feat(billing): role-aware run-lock for cancelled/inactive team plans (FE-978)

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.test.ts

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import CloudRunButtonWrapper from './CloudRunButtonWrapper.vue'
+
+const mockIsActiveSubscription = ref(true)
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    isActiveSubscription: mockIsActiveSubscription
+  })
+}))
+
+vi.mock('@/components/actionbar/ComfyRunButton/ComfyQueueButton.vue', () => ({
+  default: {
+    name: 'ComfyQueueButton',
+    template: '<div data-testid="queue-button" />'
+  }
+}))
+
+vi.mock('@/platform/cloud/subscription/components/SubscribeToRun.vue', () => ({
+  default: {
+    name: 'SubscribeToRun',
+    template: '<div data-testid="subscribe-to-run-button" />'
+  }
+}))
+
+function renderWrapper() {
+  return render(CloudRunButtonWrapper)
+}
+
+describe('CloudRunButtonWrapper', () => {
+  beforeEach(() => {
+    mockIsActiveSubscription.value = true
+  })
+
+  it('renders the runnable queue button when the subscription is active', () => {
+    renderWrapper()
+
+    expect(screen.getByTestId('queue-button')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId('subscribe-to-run-button')
+    ).not.toBeInTheDocument()
+  })
+
+  it('locks the run button when the subscription is inactive', () => {
+    mockIsActiveSubscription.value = false
+    renderWrapper()
+
+    expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
+    expect(screen.queryByTestId('queue-button')).not.toBeInTheDocument()
+  })
+
+  it('unlocks the run button once the subscription becomes active again', async () => {
+    mockIsActiveSubscription.value = false
+    renderWrapper()
+
+    expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
+
+    mockIsActiveSubscription.value = true
+    await nextTick()
+
+    expect(screen.getByTestId('queue-button')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId('subscribe-to-run-button')
+    ).not.toBeInTheDocument()
+  })
+})

src/locales/en/main.json

@@ -2507,6 +2507,13 @@
       "pollingFailed": "Subscription activation failed",
       "pollingTimeout": "Timed out waiting for subscription. Please refresh and try again."
     },
+    "inactive": {
+      "memberTitle": "This workspace's subscription is inactive",
+      "memberDescription": "Ask your workspace owner to reactivate the workspace's subscription to run workflows.",
+      "memberCta": "Ok, got it",
+      "memberRunTooltip": "Contact your workspace owner to resubscribe",
+      "runLabel": "Run"
+    },
     "subscribeToRun": "Subscribe",
     "subscribeToRunFull": "Subscribe to Run",
     "subscribeForMore": "Upgrade",

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

@@ -0,0 +1,114 @@
+import type * as VueUseCore from '@vueuse/core'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import SubscribeToRun from './SubscribeToRun.vue'
+
+const mockShowSubscriptionDialog = vi.fn()
+const mockCanManageSubscription = ref(true)
+const mockIsMdOrLarger = ref(true)
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    showSubscriptionDialog: mockShowSubscriptionDialog
+  })
+}))
+
+vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
+  useWorkspaceUI: () => ({
+    permissions: computed(() => ({
+      canManageSubscription: mockCanManageSubscription.value
+    }))
+  })
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => null
+}))
+
+vi.mock('@vueuse/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof VueUseCore>()
+  return {
+    ...actual,
+    useBreakpoints: () => ({
+      greaterOrEqual: () => mockIsMdOrLarger
+    })
+  }
+})
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      subscription: {
+        subscribeToRun: 'Subscribe',
+        subscribeToRunFull: 'Subscribe to Run',
+        inactive: {
+          runLabel: 'Run',
+          memberRunTooltip: 'Contact your workspace owner to resubscribe'
+        }
+      }
+    }
+  }
+})
+
+function renderButton() {
+  const user = userEvent.setup()
+  const result = render(SubscribeToRun, {
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: () => {} }
+    }
+  })
+  return { ...result, user }
+}
+
+describe('SubscribeToRun', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCanManageSubscription.value = true
+    mockIsMdOrLarger.value = true
+  })
+
+  it('shows the subscribe label for owners who can manage the subscription', () => {
+    renderButton()
+
+    expect(screen.getByTestId('subscribe-to-run-button')).toHaveTextContent(
+      'Subscribe to Run'
+    )
+  })
+
+  it('shows a neutral run label for members who cannot subscribe', () => {
+    mockCanManageSubscription.value = false
+    renderButton()
+
+    const button = screen.getByTestId('subscribe-to-run-button')
+    expect(button).toHaveTextContent('Run')
+    expect(button).not.toHaveTextContent('Subscribe')
+  })
+
+  it('opens the subscription dialog for owners on click', async () => {
+    const { user } = renderButton()
+
+    await user.click(screen.getByTestId('subscribe-to-run-button'))
+
+    expect(mockShowSubscriptionDialog).toHaveBeenCalledOnce()
+  })
+
+  it('routes members to the same role-aware dialog on click', async () => {
+    mockCanManageSubscription.value = false
+    const { user } = renderButton()
+
+    await user.click(screen.getByTestId('subscribe-to-run-button'))
+
+    expect(mockShowSubscriptionDialog).toHaveBeenCalledOnce()
+  })
+})

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

@@ -1,7 +1,7 @@
 <template>
   <Button
     v-tooltip.bottom="{
-      value: $t('subscription.subscribeToRunFull'),
+      value: buttonTooltip,
       showDelay: 600
     }"
     class="subscribe-to-run-button whitespace-nowrap"
@@ -24,20 +24,31 @@ import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 
 const { t } = useI18n()
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const isMdOrLarger = breakpoints.greaterOrEqual('md')
 
-const buttonLabel = computed(() =>
-  isMdOrLarger.value
+const { permissions } = useWorkspaceUI()
+const { showSubscriptionDialog } = useBillingContext()
+
+const canResubscribe = computed(() => permissions.value.canManageSubscription)
+
+const buttonLabel = computed(() => {
+  if (!canResubscribe.value) return t('subscription.inactive.runLabel')
+  return isMdOrLarger.value
     ? t('subscription.subscribeToRunFull')
     : t('subscription.subscribeToRun')
-)
+})
 
-const { showSubscriptionDialog } = useBillingContext()
+const buttonTooltip = computed(() =>
+  canResubscribe.value
+    ? t('subscription.subscribeToRunFull')
+    : t('subscription.inactive.memberRunTooltip')
+)
 
-const handleSubscribeToRun = () => {
+function handleSubscribeToRun() {
   if (isCloud) {
     useTelemetry()?.trackRunButton({ subscribe_to_run: true })
   }

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

@@ -4,6 +4,7 @@ import { useDialogStore } from '@/stores/dialogStore'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 
 const DIALOG_KEY = 'subscription-required'
@@ -20,6 +21,7 @@ export const useSubscriptionDialog = () => {
   const dialogService = useDialogService()
   const dialogStore = useDialogStore()
   const workspaceStore = useTeamWorkspaceStore()
+  const { permissions } = useWorkspaceUI()
   const { isFreeTier } = useSubscription()
 
   function hide() {
@@ -30,6 +32,33 @@ export const useSubscriptionDialog = () => {
   function showPricingTable(options?: { reason?: SubscriptionDialogReason }) {
     if (!isCloud) return
 
+    // Members can't manage the workspace subscription, so a blocked run shows a
+    // small read-only "ask your owner to reactivate" modal instead of the
+    // pricing table. Out-of-credits still routes everyone to the credits flow.
+    if (
+      flags.teamWorkspacesEnabled &&
+      !workspaceStore.isInPersonalWorkspace &&
+      !permissions.value.canManageSubscription &&
+      options?.reason !== 'out_of_credits'
+    ) {
+      dialogService.showLayoutDialog({
+        key: DIALOG_KEY,
+        component: defineAsyncComponent(
+          () =>
+            import('@/platform/workspace/components/SubscriptionInactiveMemberDialog.vue')
+        ),
+        props: { onClose: hide },
+        dialogComponentProps: {
+          style: 'width: min(360px, 95vw);',
+          pt: {
+            root: { class: 'bg-transparent' },
+            content: { class: '!p-0 bg-transparent border-none shadow-none' }
+          }
+        }
+      })
+      return
+    }
+
     const useWorkspaceVariant =
       flags.teamWorkspacesEnabled && !workspaceStore.isInPersonalWorkspace
 

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

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SubscriptionInactiveMemberDialog from './SubscriptionInactiveMemberDialog.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { close: 'Close' },
+      subscription: {
+        inactive: {
+          memberTitle: "This workspace's subscription is inactive",
+          memberDescription:
+            "Ask your workspace owner to reactivate the workspace's subscription to run workflows.",
+          memberCta: 'Ok, got it'
+        }
+      }
+    }
+  }
+})
+
+function renderComponent(onClose = vi.fn()) {
+  render(SubscriptionInactiveMemberDialog, {
+    props: { onClose },
+    global: { plugins: [i18n] }
+  })
+  return onClose
+}
+
+describe('SubscriptionInactiveMemberDialog', () => {
+  it('renders the inactive title, description and CTA', () => {
+    renderComponent()
+    expect(
+      screen.getByText("This workspace's subscription is inactive")
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        "Ask your workspace owner to reactivate the workspace's subscription to run workflows."
+      )
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Ok, got it' })
+    ).toBeInTheDocument()
+  })
+
+  it('exposes no subscribe affordance', () => {
+    renderComponent()
+    expect(screen.queryByText(/subscribe/i)).not.toBeInTheDocument()
+  })
+
+  it('calls onClose when the CTA is clicked', async () => {
+    const user = userEvent.setup()
+    const onClose = renderComponent()
+
+    await user.click(screen.getByRole('button', { name: 'Ok, got it' }))
+
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+
+  it('calls onClose when the header close button is clicked', async () => {
+    const user = userEvent.setup()
+    const onClose = renderComponent()
+
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+})