mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-07-17 17:28:58 +00:00
Compare commits
6 Commits
fix/legacy
...
codex/part
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
71f37c4daf | ||
|
|
8938305de7 | ||
|
|
a4ffecd49d | ||
|
|
3be998aaf4 | ||
|
|
99674df73b | ||
|
|
cfaf89edea |
9
.fallowrc.json
Normal file
9
.fallowrc.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"$schema": "https://raw.githubusercontent.com/fallow-rs/fallow/main/schema.json",
|
||||
"entry": ["src/main.ts", "index.html"],
|
||||
"duplicates": {
|
||||
"minOccurrences": 3,
|
||||
"ignore": ["**/*.generated.*", "**/generatedManagerTypes.ts"]
|
||||
},
|
||||
"rules": {}
|
||||
}
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -16,6 +16,7 @@ yarn.lock
|
||||
.eslintcache
|
||||
.prettiercache
|
||||
.stylelintcache
|
||||
.fallow/
|
||||
|
||||
node_modules
|
||||
.pnpm-store
|
||||
|
||||
@@ -88,6 +88,11 @@ const config: StorybookConfig = {
|
||||
replacement:
|
||||
process.cwd() + '/src/storybook/mocks/useFeatureFlags.ts'
|
||||
},
|
||||
{
|
||||
find: '@/platform/workspace/composables/useWorkspaceUI',
|
||||
replacement:
|
||||
process.cwd() + '/src/storybook/mocks/useWorkspaceUI.ts'
|
||||
},
|
||||
{
|
||||
find: '@/platform/workspace/stores/teamWorkspaceStore',
|
||||
replacement:
|
||||
|
||||
@@ -8,11 +8,13 @@ export class ComfyActionbar {
|
||||
public readonly root: Locator
|
||||
public readonly queueButton: ComfyQueueButton
|
||||
public readonly propertiesButton: Locator
|
||||
public readonly dragHandle: Locator
|
||||
|
||||
constructor(public readonly page: Page) {
|
||||
this.root = page.locator('.actionbar-container')
|
||||
this.queueButton = new ComfyQueueButton(this)
|
||||
this.propertiesButton = this.root.getByLabel('Toggle properties panel')
|
||||
this.dragHandle = this.root.locator('.drag-handle')
|
||||
}
|
||||
|
||||
async isDocked() {
|
||||
|
||||
21
browser_tests/fixtures/components/FreeTierQuota.ts
Normal file
21
browser_tests/fixtures/components/FreeTierQuota.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import type { Locator } from '@playwright/test'
|
||||
|
||||
import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
|
||||
import { TestIds } from '@e2e/fixtures/selectors'
|
||||
|
||||
export class FreeTierQuota {
|
||||
readonly root: Locator
|
||||
|
||||
constructor(comfyPage: ComfyPage) {
|
||||
this.root = comfyPage.page.getByTestId(TestIds.topbar.freeTierQuota)
|
||||
}
|
||||
|
||||
async getMax() {
|
||||
const text = await this.root.textContent()
|
||||
return text?.match(/(\d+) \/ (\d+)/)?.[2]
|
||||
}
|
||||
async getAvailable() {
|
||||
const text = await this.root.textContent()
|
||||
return text?.match(/(\d+) \/ (\d+)/)?.[1]
|
||||
}
|
||||
}
|
||||
@@ -103,7 +103,8 @@ export const TestIds = {
|
||||
loginButtonPopoverLearnMore: 'login-button-popover-learn-more',
|
||||
workflowTabs: 'topbar-workflow-tabs',
|
||||
integratedTabBarActions: 'integrated-tab-bar-actions',
|
||||
actionBarButtons: 'action-bar-buttons'
|
||||
actionBarButtons: 'action-bar-buttons',
|
||||
freeTierQuota: 'free-tier-quota'
|
||||
},
|
||||
nodeLibrary: {
|
||||
bookmarksSection: 'node-library-bookmarks-section'
|
||||
|
||||
@@ -28,11 +28,11 @@ const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
|
||||
// matches it against the members self-row.
|
||||
const SELF_EMAIL = 'e2e@test.comfy.org'
|
||||
|
||||
// consolidated_billing_enabled routes personal workspaces to the unified
|
||||
// pricing table asserted here; without it they fall back to the legacy table.
|
||||
// billing_control_enabled routes personal workspaces to the unified pricing
|
||||
// table asserted here; without it they fall back to the legacy table.
|
||||
const BOOT_FEATURES = {
|
||||
team_workspaces_enabled: true,
|
||||
consolidated_billing_enabled: true
|
||||
billing_control_enabled: true
|
||||
} satisfies RemoteConfig
|
||||
// Disable the experimental Asset API: with it on (cloud default) the unmocked
|
||||
// asset endpoints 403 and workflow restore throws uncaught, aborting the
|
||||
|
||||
63
browser_tests/tests/freeTierQuota.spec.ts
Normal file
63
browser_tests/tests/freeTierQuota.spec.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import { expect, mergeTests } from '@playwright/test'
|
||||
|
||||
import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
|
||||
import { jsonRoute } from '@e2e/fixtures/utils/jsonRoute'
|
||||
import { FreeTierQuota } from '@e2e/fixtures/components/FreeTierQuota'
|
||||
import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
|
||||
import { webSocketFixture } from '@e2e/fixtures/ws'
|
||||
|
||||
const wstest = mergeTests(test, webSocketFixture)
|
||||
|
||||
test.describe('Free Tier Quota', { tag: ['@cloud', '@vue-nodes'] }, () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
const features = {
|
||||
free_tier_job_allowance_enabled: true,
|
||||
free_tier_balance: { allowance: 5, remaining: 3, used: 0 }
|
||||
}
|
||||
await page.route('**/api/features', (r) => r.fulfill(jsonRoute(features)))
|
||||
})
|
||||
|
||||
wstest('Free Tier Quota', async ({ comfyPage, comfyMouse, getWebSocket }) => {
|
||||
const execution = new ExecutionHelper(comfyPage, await getWebSocket())
|
||||
const freeTierQuota = new FreeTierQuota(comfyPage)
|
||||
|
||||
await test.step('Populates initial state from config', async () => {
|
||||
await expect.poll(() => freeTierQuota.getAvailable()).toBe('3')
|
||||
expect(await freeTierQuota.getMax()).toBe('5')
|
||||
})
|
||||
|
||||
await test.step('available decrements on run', async () => {
|
||||
await execution.run()
|
||||
await expect.poll(() => freeTierQuota.getAvailable()).toBe('2')
|
||||
})
|
||||
|
||||
await test.step('connects to detached run button', async () => {
|
||||
const handle = comfyPage.actionbar.dragHandle
|
||||
await comfyMouse.dragElementBy(handle, { x: -100, y: 100 })
|
||||
await expect.poll(() => comfyPage.actionbar.isDocked()).toBe(false)
|
||||
expect(await freeTierQuota.getAvailable()).toBe('2')
|
||||
await comfyMouse.dragElementBy(handle, { x: 100, y: -100 })
|
||||
await expect.poll(() => comfyPage.actionbar.isDocked()).toBe(true)
|
||||
})
|
||||
|
||||
await test.step('Detects workflows with Partner nodes', async () => {
|
||||
await comfyPage.searchBoxV2.addNode('Node With Price Badge')
|
||||
const node = await comfyPage.vueNodes.getFixtureByTitle('Price Badge')
|
||||
await expect.poll(() => freeTierQuota.getAvailable()).toBe(undefined)
|
||||
await node.delete()
|
||||
await expect.poll(() => freeTierQuota.getAvailable()).toBe('2')
|
||||
})
|
||||
|
||||
await test.step('Does not decrease past 0', async () => {
|
||||
await execution.run()
|
||||
await expect.poll(() => freeTierQuota.getAvailable()).toBe('1')
|
||||
await execution.run()
|
||||
await expect.poll(() => freeTierQuota.getAvailable()).toBe(undefined)
|
||||
await execution.run()
|
||||
await execution.run()
|
||||
await execution.run()
|
||||
await comfyPage.nextFrame()
|
||||
expect(await freeTierQuota.getAvailable()).toBe(undefined)
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -29,6 +29,8 @@
|
||||
"dev:test": "cross-env VITE_USE_LEGACY_DEFAULT_GRAPH=true vite --config vite.config.mts",
|
||||
"dev": "vite --config vite.config.mts",
|
||||
"devtools:pycheck": "python3 -m compileall -q tools/devtools",
|
||||
"fallow": "fallow",
|
||||
"fallow:audit": "fallow audit",
|
||||
"format:check": "oxfmt --check",
|
||||
"format": "oxfmt --write",
|
||||
"json-schema": "tsx scripts/generate-json-schema.ts",
|
||||
@@ -172,6 +174,7 @@
|
||||
"eslint-plugin-testing-library": "catalog:",
|
||||
"eslint-plugin-unused-imports": "catalog:",
|
||||
"eslint-plugin-vue": "catalog:",
|
||||
"fallow": "catalog:",
|
||||
"fast-check": "catalog:",
|
||||
"fs-extra": "^11.2.0",
|
||||
"globals": "catalog:",
|
||||
|
||||
88
pnpm-lock.yaml
generated
88
pnpm-lock.yaml
generated
@@ -240,6 +240,9 @@ catalogs:
|
||||
eslint-plugin-vue:
|
||||
specifier: ^10.9.1
|
||||
version: 10.9.1
|
||||
fallow:
|
||||
specifier: ^2.102.0
|
||||
version: 2.102.0
|
||||
fast-check:
|
||||
specifier: ^4.5.3
|
||||
version: 4.5.3
|
||||
@@ -763,6 +766,9 @@ importers:
|
||||
eslint-plugin-vue:
|
||||
specifier: 'catalog:'
|
||||
version: 10.9.1(@typescript-eslint/parser@8.60.0(eslint@10.4.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.4.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.4.0(jiti@2.6.1)))
|
||||
fallow:
|
||||
specifier: 'catalog:'
|
||||
version: 2.102.0
|
||||
fast-check:
|
||||
specifier: 'catalog:'
|
||||
version: 4.5.3
|
||||
@@ -1908,6 +1914,46 @@ packages:
|
||||
'@exodus/crypto':
|
||||
optional: true
|
||||
|
||||
'@fallow-cli/darwin-arm64@2.102.0':
|
||||
resolution: {integrity: sha512-B8wzfzJgoX6h5Gv2xQ9ZidO5Jb8/PWdssAxYbWs1pb5oJHZ6S5PLwXuUdINmNSIaRGQwTk4DC9/tIMFHFvd9uw==}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@fallow-cli/darwin-x64@2.102.0':
|
||||
resolution: {integrity: sha512-aLbTWWzQnleKdi56obAPXMJm7YA3qAnkIX9T3eocRHiagYqp8nsf4cslM0rZKvu2WwK34NaBm8x886gl4cl+zg==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@fallow-cli/linux-arm64-gnu@2.102.0':
|
||||
resolution: {integrity: sha512-8nYeOSLSewqcKH/KUcKZaCq5QII5VTRX62l60B6UM1iKe/0jcmlQ2mOtx4rkHpeq3LL5emvT/ph4NNgGmWKSBg==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@fallow-cli/linux-arm64-musl@2.102.0':
|
||||
resolution: {integrity: sha512-2Zi33PXzZxD7HU5sPVwyElZGP7zyEdGo4hK0ewy6gMYgQ9BDfLnFhgaSSOzN1J4paIhYtBmVsLmqakyDKy22Jw==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@fallow-cli/linux-x64-gnu@2.102.0':
|
||||
resolution: {integrity: sha512-7Hys4X6hKuR/lqUaGXwezRzDrwXwu9KfahUy85WTuiG1to+ZbzDCqdbZ04LtnI8kK8ufrPDcq+ZXdyt5ksOJHA==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@fallow-cli/linux-x64-musl@2.102.0':
|
||||
resolution: {integrity: sha512-RuDY1jOEPgJOuHBgEpHVl6J7Xf2QLFklnNy6zO1nw8R1fLgWUAAKlFirn1Y93pb9bXzqpn5Gre3YlhgIZ3+LBA==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@fallow-cli/win32-arm64-msvc@2.102.0':
|
||||
resolution: {integrity: sha512-wsvHjLzWFvsYmCqnQLm1doSEHb9Z038+sFp1RzMcffPUBC5tqS3vCr8J8nolcLlPk7o3QWHQMXAqb1xSJe+doA==}
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
|
||||
'@fallow-cli/win32-x64-msvc@2.102.0':
|
||||
resolution: {integrity: sha512-rH1hd0PD0mm6pCxh1pw5jubpJsvV6f5rjixMoD5AZLzWa6NPJBpPPuzruLGtH/9CYy8B0y7zPrGGTKRO2PCGzg==}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@firebase/analytics-compat@0.2.18':
|
||||
resolution: {integrity: sha512-Hw9mzsSMZaQu6wrTbi3kYYwGw9nBqOHr47pVLxfr5v8CalsdrG5gfs9XUlPOZjHRVISp3oQrh1j7d3E+ulHPjQ==}
|
||||
peerDependencies:
|
||||
@@ -5682,6 +5728,11 @@ packages:
|
||||
extendable-media-recorder@9.2.27:
|
||||
resolution: {integrity: sha512-2X+Ixi1cxLek0Cj9x9atmhQ+apG+LwJpP2p3ypP8Pxau0poDnicrg7FTfPVQV5PW/3DHFm/eQ16vbgo5Yk3HGQ==}
|
||||
|
||||
fallow@2.102.0:
|
||||
resolution: {integrity: sha512-bkOT58kPVCB12d2apQjIKBw/qSdsGRPQFrN5ff9Yl5WzXRqlDTbT/MVdMXld4sJD5JQW1ftw2bTxJWCINggh6g==}
|
||||
engines: {node: '>=16'}
|
||||
hasBin: true
|
||||
|
||||
fast-check@4.5.3:
|
||||
resolution: {integrity: sha512-IE9csY7lnhxBnA8g/WI5eg/hygA6MGWJMSNfFRrBlXUciADEhS1EDB0SIsMSvzubzIlOBbVITSsypCsW717poA==}
|
||||
engines: {node: '>=12.17.0'}
|
||||
@@ -10044,6 +10095,30 @@ snapshots:
|
||||
|
||||
'@exodus/bytes@1.7.0': {}
|
||||
|
||||
'@fallow-cli/darwin-arm64@2.102.0':
|
||||
optional: true
|
||||
|
||||
'@fallow-cli/darwin-x64@2.102.0':
|
||||
optional: true
|
||||
|
||||
'@fallow-cli/linux-arm64-gnu@2.102.0':
|
||||
optional: true
|
||||
|
||||
'@fallow-cli/linux-arm64-musl@2.102.0':
|
||||
optional: true
|
||||
|
||||
'@fallow-cli/linux-x64-gnu@2.102.0':
|
||||
optional: true
|
||||
|
||||
'@fallow-cli/linux-x64-musl@2.102.0':
|
||||
optional: true
|
||||
|
||||
'@fallow-cli/win32-arm64-msvc@2.102.0':
|
||||
optional: true
|
||||
|
||||
'@fallow-cli/win32-x64-msvc@2.102.0':
|
||||
optional: true
|
||||
|
||||
'@firebase/analytics-compat@0.2.18(@firebase/app-compat@0.2.53)(@firebase/app@0.11.4)':
|
||||
dependencies:
|
||||
'@firebase/analytics': 0.10.12(@firebase/app@0.11.4)
|
||||
@@ -14095,6 +14170,19 @@ snapshots:
|
||||
subscribable-things: 2.1.53
|
||||
tslib: 2.8.1
|
||||
|
||||
fallow@2.102.0:
|
||||
dependencies:
|
||||
detect-libc: 2.1.2
|
||||
optionalDependencies:
|
||||
'@fallow-cli/darwin-arm64': 2.102.0
|
||||
'@fallow-cli/darwin-x64': 2.102.0
|
||||
'@fallow-cli/linux-arm64-gnu': 2.102.0
|
||||
'@fallow-cli/linux-arm64-musl': 2.102.0
|
||||
'@fallow-cli/linux-x64-gnu': 2.102.0
|
||||
'@fallow-cli/linux-x64-musl': 2.102.0
|
||||
'@fallow-cli/win32-arm64-msvc': 2.102.0
|
||||
'@fallow-cli/win32-x64-msvc': 2.102.0
|
||||
|
||||
fast-check@4.5.3:
|
||||
dependencies:
|
||||
pure-rand: 7.0.1
|
||||
|
||||
@@ -89,6 +89,7 @@ catalog:
|
||||
eslint-plugin-testing-library: ^7.16.1
|
||||
eslint-plugin-unused-imports: ^4.4.1
|
||||
eslint-plugin-vue: ^10.9.1
|
||||
fallow: ^2.102.0
|
||||
fast-check: ^4.5.3
|
||||
firebase: ^11.6.0
|
||||
glob: ^13.0.6
|
||||
|
||||
@@ -629,7 +629,7 @@ describe('TopMenuSection', () => {
|
||||
await nextTick()
|
||||
|
||||
expect(querySpy).toHaveBeenCalledTimes(1)
|
||||
expect(actionbarContainer!.classList).toContain('px-2')
|
||||
expect(actionbarContainer!.classList).not.toContain('w-0')
|
||||
} finally {
|
||||
unmount()
|
||||
vi.unstubAllGlobals()
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mx-1 flex flex-col items-end gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-start gap-2">
|
||||
<div
|
||||
v-if="managerState.shouldShowManagerButtons.value || isCloud"
|
||||
class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
|
||||
@@ -34,61 +34,75 @@
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div ref="actionbarContainerRef" :class="actionbarContainerClass">
|
||||
<ActionBarButtons />
|
||||
<!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
|
||||
<div
|
||||
class="pointer-events-auto z-1 flex flex-col rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 py-1.75 shadow-interface"
|
||||
>
|
||||
<div
|
||||
ref="legacyCommandsContainerRef"
|
||||
data-testid="legacy-topbar-container"
|
||||
class="[&:not(:has(*>*:not(:empty)))]:hidden"
|
||||
></div>
|
||||
|
||||
<ComfyActionbar
|
||||
:top-menu-container="actionbarContainerRef"
|
||||
:queue-overlay-expanded="isQueueOverlayExpanded"
|
||||
@update:progress-target="updateProgressTarget"
|
||||
/>
|
||||
<CurrentUserButton
|
||||
v-if="isLoggedIn && !isIntegratedTabBar"
|
||||
class="shrink-0"
|
||||
/>
|
||||
<LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
|
||||
<Button
|
||||
v-if="isCloud && flags.workflowSharingEnabled"
|
||||
v-tooltip.bottom="shareTooltipConfig"
|
||||
variant="secondary"
|
||||
:aria-label="t('actionbar.shareTooltip')"
|
||||
@click="() => openShareDialog().catch(toastErrorHandler)"
|
||||
@pointerenter="prefetchShareDialog"
|
||||
ref="actionbarContainerRef"
|
||||
:class="
|
||||
cn(
|
||||
'actionbar-container relative flex items-center gap-2',
|
||||
isActionbarContainerEmpty &&
|
||||
'-ml-2 w-0 min-w-0 border-transparent shadow-none has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
|
||||
)
|
||||
"
|
||||
>
|
||||
<i class="icon-[comfy--send] size-4" />
|
||||
<span class="not-md:hidden">
|
||||
{{ t('actionbar.share') }}
|
||||
</span>
|
||||
</Button>
|
||||
<div v-if="!isRightSidePanelOpen" class="relative">
|
||||
<Button
|
||||
v-tooltip.bottom="rightSidePanelTooltipConfig"
|
||||
:class="
|
||||
cn(
|
||||
showErrorIndicatorOnPanelButton &&
|
||||
'outline-1 outline-destructive-background'
|
||||
)
|
||||
"
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
:aria-label="t('rightSidePanel.togglePanel')"
|
||||
@click="openRightSidePanel"
|
||||
>
|
||||
<i class="icon-[lucide--panel-right] size-4" />
|
||||
</Button>
|
||||
<StatusBadge
|
||||
v-if="showErrorIndicatorOnPanelButton"
|
||||
variant="dot"
|
||||
severity="danger"
|
||||
class="absolute -top-1 -right-1"
|
||||
<ActionBarButtons />
|
||||
<!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
|
||||
<div
|
||||
ref="legacyCommandsContainerRef"
|
||||
data-testid="legacy-topbar-container"
|
||||
class="[&:not(:has(*>*:not(:empty)))]:hidden"
|
||||
></div>
|
||||
|
||||
<ComfyActionbar
|
||||
:top-menu-container="actionbarContainerRef"
|
||||
:queue-overlay-expanded="isQueueOverlayExpanded"
|
||||
@update:progress-target="updateProgressTarget"
|
||||
/>
|
||||
<CurrentUserButton
|
||||
v-if="isLoggedIn && !isIntegratedTabBar"
|
||||
class="shrink-0"
|
||||
/>
|
||||
<LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
|
||||
<Button
|
||||
v-if="isCloud && flags.workflowSharingEnabled"
|
||||
v-tooltip.bottom="shareTooltipConfig"
|
||||
variant="secondary"
|
||||
:aria-label="t('actionbar.shareTooltip')"
|
||||
@click="() => openShareDialog().catch(toastErrorHandler)"
|
||||
@pointerenter="prefetchShareDialog"
|
||||
>
|
||||
<i class="icon-[comfy--send] size-4" />
|
||||
<span class="not-md:hidden">
|
||||
{{ t('actionbar.share') }}
|
||||
</span>
|
||||
</Button>
|
||||
<div v-if="!isRightSidePanelOpen" class="relative">
|
||||
<Button
|
||||
v-tooltip.bottom="rightSidePanelTooltipConfig"
|
||||
:class="
|
||||
cn(
|
||||
showErrorIndicatorOnPanelButton &&
|
||||
'outline-1 outline-destructive-background'
|
||||
)
|
||||
"
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
:aria-label="t('rightSidePanel.togglePanel')"
|
||||
@click="openRightSidePanel"
|
||||
>
|
||||
<i class="icon-[lucide--panel-right] size-4" />
|
||||
</Button>
|
||||
<StatusBadge
|
||||
v-if="showErrorIndicatorOnPanelButton"
|
||||
variant="dot"
|
||||
severity="danger"
|
||||
class="absolute -top-1 -right-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<FreeTierQuota v-if="!isActionbarFloating" />
|
||||
</div>
|
||||
</div>
|
||||
<ErrorOverlay />
|
||||
@@ -147,6 +161,7 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
|
||||
import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
|
||||
import { useErrorHandling } from '@/composables/useErrorHandling'
|
||||
import { buildTooltipConfig } from '@/composables/useTooltipConfig'
|
||||
import FreeTierQuota from '@/platform/cloud/subscription/components/FreeTierQuota.vue'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
import { app } from '@/scripts/app'
|
||||
@@ -209,21 +224,6 @@ const hasDockedButtons = computed(() => {
|
||||
const isActionbarContainerEmpty = computed(
|
||||
() => isActionbarFloating.value && !hasDockedButtons.value
|
||||
)
|
||||
const actionbarContainerClass = computed(() => {
|
||||
const base =
|
||||
'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg shadow-interface'
|
||||
|
||||
if (isActionbarContainerEmpty.value) {
|
||||
return cn(
|
||||
base,
|
||||
'-ml-2 w-0 min-w-0 border-transparent shadow-none',
|
||||
'has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto',
|
||||
'has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
|
||||
)
|
||||
}
|
||||
|
||||
return cn(base, 'px-2', 'border-interface-stroke')
|
||||
})
|
||||
const isIntegratedTabBar = computed(
|
||||
() => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
|
||||
)
|
||||
|
||||
@@ -75,6 +75,7 @@
|
||||
</Button>
|
||||
<ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
|
||||
</div>
|
||||
<FreeTierQuota v-if="!isDocked" />
|
||||
</Panel>
|
||||
|
||||
<Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
|
||||
@@ -109,6 +110,7 @@ import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
|
||||
import { buildTooltipConfig } from '@/composables/useTooltipConfig'
|
||||
import FreeTierQuota from '@/platform/cloud/subscription/components/FreeTierQuota.vue'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
import { useCommandStore } from '@/stores/commandStore'
|
||||
|
||||
@@ -4,11 +4,11 @@ import { nextTick, ref } from 'vue'
|
||||
|
||||
import CloudRunButtonWrapper from './CloudRunButtonWrapper.vue'
|
||||
|
||||
const mockIsActiveSubscription = ref(true)
|
||||
const mockCanRunWorkflows = ref(true)
|
||||
|
||||
vi.mock('@/composables/billing/useBillingContext', () => ({
|
||||
useBillingContext: () => ({
|
||||
isActiveSubscription: mockIsActiveSubscription
|
||||
canRunWorkflows: mockCanRunWorkflows
|
||||
})
|
||||
}))
|
||||
|
||||
@@ -32,7 +32,7 @@ function renderWrapper() {
|
||||
|
||||
describe('CloudRunButtonWrapper', () => {
|
||||
beforeEach(() => {
|
||||
mockIsActiveSubscription.value = true
|
||||
mockCanRunWorkflows.value = true
|
||||
})
|
||||
|
||||
it('renders the runnable queue button when the subscription is active', () => {
|
||||
@@ -45,7 +45,7 @@ describe('CloudRunButtonWrapper', () => {
|
||||
})
|
||||
|
||||
it('locks the run button when the subscription is inactive', () => {
|
||||
mockIsActiveSubscription.value = false
|
||||
mockCanRunWorkflows.value = false
|
||||
renderWrapper()
|
||||
|
||||
expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
|
||||
@@ -53,12 +53,12 @@ describe('CloudRunButtonWrapper', () => {
|
||||
})
|
||||
|
||||
it('unlocks the run button once the subscription becomes active again', async () => {
|
||||
mockIsActiveSubscription.value = false
|
||||
mockCanRunWorkflows.value = false
|
||||
renderWrapper()
|
||||
|
||||
expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
|
||||
|
||||
mockIsActiveSubscription.value = true
|
||||
mockCanRunWorkflows.value = true
|
||||
await nextTick()
|
||||
|
||||
expect(screen.getByTestId('queue-button')).toBeInTheDocument()
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<component
|
||||
:is="currentButton"
|
||||
:key="isActiveSubscription ? 'queue' : 'subscribe'"
|
||||
:key="canRunWorkflows ? 'queue' : 'subscribe'"
|
||||
/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -11,9 +11,9 @@ import ComfyQueueButton from '@/components/actionbar/ComfyRunButton/ComfyQueueBu
|
||||
import { useBillingContext } from '@/composables/billing/useBillingContext'
|
||||
import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
|
||||
|
||||
const { isActiveSubscription } = useBillingContext()
|
||||
const { canRunWorkflows } = useBillingContext()
|
||||
|
||||
const currentButton = computed(() =>
|
||||
isActiveSubscription.value ? ComfyQueueButton : SubscribeToRunButton
|
||||
canRunWorkflows.value ? ComfyQueueButton : SubscribeToRunButton
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -112,5 +112,13 @@ export interface BillingContext extends BillingState, BillingActions {
|
||||
* (legacy) per-member tier plan, which keeps the old team pricing table.
|
||||
*/
|
||||
isLegacyTeamPlan: ComputedRef<boolean>
|
||||
/**
|
||||
* True when the subscription is a team plan of either generation. Unlike
|
||||
* `isLegacyTeamPlan` this does not require an active subscription: the spend
|
||||
* gate folds billing_status into is_active, so a paused or payment-failed team
|
||||
* plan reports is_active=false and must still read as a team plan.
|
||||
*/
|
||||
isTeamPlan: ComputedRef<boolean>
|
||||
getMaxSeats: (tierKey: TierKey) => number
|
||||
canRunWorkflows: ComputedRef<boolean>
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ const DEFAULT_BILLING_STATUS: BillingStatusResponse = {
|
||||
|
||||
const {
|
||||
mockTeamWorkspacesEnabled,
|
||||
mockConsolidatedBillingEnabled,
|
||||
mockBillingControlEnabled,
|
||||
mockIsPersonal,
|
||||
mockPlans,
|
||||
mockPurchaseCredits,
|
||||
@@ -27,7 +27,7 @@ const {
|
||||
mockBillingStatus
|
||||
} = vi.hoisted(() => ({
|
||||
mockTeamWorkspacesEnabled: { value: false },
|
||||
mockConsolidatedBillingEnabled: { value: false },
|
||||
mockBillingControlEnabled: { value: false },
|
||||
mockIsPersonal: { value: true },
|
||||
mockPlans: { value: [] as Plan[] },
|
||||
mockPurchaseCredits: vi.fn(),
|
||||
@@ -59,13 +59,11 @@ vi.mock('@/composables/useFeatureFlags', async () => {
|
||||
teamWorkspacesEnabledRef.value = value
|
||||
}
|
||||
})
|
||||
const consolidatedBillingEnabledRef = ref(
|
||||
mockConsolidatedBillingEnabled.value
|
||||
)
|
||||
Object.defineProperty(mockConsolidatedBillingEnabled, 'value', {
|
||||
get: () => consolidatedBillingEnabledRef.value,
|
||||
const billingControlEnabledRef = ref(mockBillingControlEnabled.value)
|
||||
Object.defineProperty(mockBillingControlEnabled, 'value', {
|
||||
get: () => billingControlEnabledRef.value,
|
||||
set: (value: boolean) => {
|
||||
consolidatedBillingEnabledRef.value = value
|
||||
billingControlEnabledRef.value = value
|
||||
}
|
||||
})
|
||||
return {
|
||||
@@ -74,8 +72,8 @@ vi.mock('@/composables/useFeatureFlags', async () => {
|
||||
get teamWorkspacesEnabled() {
|
||||
return mockTeamWorkspacesEnabled.value
|
||||
},
|
||||
get consolidatedBillingEnabled() {
|
||||
return mockConsolidatedBillingEnabled.value
|
||||
get billingControlEnabled() {
|
||||
return mockBillingControlEnabled.value
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -165,7 +163,7 @@ describe('useBillingContext', () => {
|
||||
setActivePinia(createPinia())
|
||||
vi.clearAllMocks()
|
||||
mockTeamWorkspacesEnabled.value = false
|
||||
mockConsolidatedBillingEnabled.value = false
|
||||
mockBillingControlEnabled.value = false
|
||||
mockIsPersonal.value = true
|
||||
mockPlans.value = []
|
||||
mockBillingStatus.value = { ...DEFAULT_BILLING_STATUS }
|
||||
@@ -177,27 +175,27 @@ describe('useBillingContext', () => {
|
||||
expect(type.value).toBe('legacy')
|
||||
})
|
||||
|
||||
it('keeps personal on legacy when consolidated billing is disabled', () => {
|
||||
it('keeps personal on legacy when billing control is disabled', () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockConsolidatedBillingEnabled.value = false
|
||||
mockBillingControlEnabled.value = false
|
||||
mockIsPersonal.value = true
|
||||
|
||||
const { type } = useBillingContext()
|
||||
expect(type.value).toBe('legacy')
|
||||
})
|
||||
|
||||
it('selects workspace type for personal when consolidated billing is enabled', () => {
|
||||
it('selects workspace type for personal when billing control is enabled', () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockConsolidatedBillingEnabled.value = true
|
||||
mockBillingControlEnabled.value = true
|
||||
mockIsPersonal.value = true
|
||||
|
||||
const { type } = useBillingContext()
|
||||
expect(type.value).toBe('workspace')
|
||||
})
|
||||
|
||||
it('selects workspace type for team regardless of consolidated billing', () => {
|
||||
it('selects workspace type for team regardless of billing control', () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockConsolidatedBillingEnabled.value = false
|
||||
mockBillingControlEnabled.value = false
|
||||
mockIsPersonal.value = false
|
||||
|
||||
const { type } = useBillingContext()
|
||||
@@ -298,7 +296,7 @@ describe('useBillingContext', () => {
|
||||
expect(workspaceApi.getBillingStatus).not.toHaveBeenCalled()
|
||||
|
||||
// Authenticated remote config resolves the flag on for the same workspace
|
||||
mockConsolidatedBillingEnabled.value = true
|
||||
mockBillingControlEnabled.value = true
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
|
||||
await vi.waitFor(() => {
|
||||
@@ -307,16 +305,16 @@ describe('useBillingContext', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('moves a personal workspace to workspace billing when consolidated billing flips on', async () => {
|
||||
it('moves a personal workspace to workspace billing when billing control flips on', async () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockConsolidatedBillingEnabled.value = false
|
||||
mockBillingControlEnabled.value = false
|
||||
mockIsPersonal.value = true
|
||||
|
||||
const { type } = useBillingContext()
|
||||
await nextTick()
|
||||
expect(type.value).toBe('legacy')
|
||||
|
||||
mockConsolidatedBillingEnabled.value = true
|
||||
mockBillingControlEnabled.value = true
|
||||
|
||||
await vi.waitFor(() => {
|
||||
expect(type.value).toBe('workspace')
|
||||
@@ -325,9 +323,9 @@ describe('useBillingContext', () => {
|
||||
})
|
||||
|
||||
describe('subscription mirror to workspace store', () => {
|
||||
it('mirrors subscription for personal workspaces on the consolidated billing flow', async () => {
|
||||
it('mirrors subscription for personal workspaces on the billing control flow', async () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockConsolidatedBillingEnabled.value = true
|
||||
mockBillingControlEnabled.value = true
|
||||
mockIsPersonal.value = true
|
||||
|
||||
const { initialize } = useBillingContext()
|
||||
@@ -555,4 +553,110 @@ describe('useBillingContext', () => {
|
||||
expect(isLegacyTeamPlan.value).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('isTeamPlan', () => {
|
||||
it('is false for a personal workspace', () => {
|
||||
const { isTeamPlan } = useBillingContext()
|
||||
expect(isTeamPlan.value).toBe(false)
|
||||
})
|
||||
|
||||
// subscription_tier is omitted throughout: the backend sends 'TEAM' here, but
|
||||
// the FE's SubscriptionTier resolves to the registry spec, which has no TEAM
|
||||
// (tierPricing.ts imports comfyRegistryTypes for what is an ingest field).
|
||||
// isTeamPlan reads the credit stop and the slug, never the tier — which is
|
||||
// what keeps it working despite that divergence.
|
||||
it('is true for a credit-slider team sub, which carries a credit stop', async () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockIsPersonal.value = false
|
||||
mockBillingStatus.value = {
|
||||
is_active: true,
|
||||
has_funds: true,
|
||||
plan_slug: 'team_per_credit_monthly',
|
||||
team_credit_stop: {
|
||||
id: 'team_700',
|
||||
credits_monthly: 700,
|
||||
stop_usd: 332
|
||||
}
|
||||
}
|
||||
|
||||
const { initialize, isTeamPlan } = useBillingContext()
|
||||
await initialize()
|
||||
|
||||
expect(isTeamPlan.value).toBe(true)
|
||||
})
|
||||
|
||||
it('is true for a legacy team sub, identified by slug rather than credit stop', async () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockIsPersonal.value = false
|
||||
mockBillingStatus.value = {
|
||||
is_active: true,
|
||||
has_funds: true,
|
||||
subscription_tier: 'STANDARD',
|
||||
plan_slug: 'team-standard-annual'
|
||||
}
|
||||
|
||||
const { initialize, isTeamPlan } = useBillingContext()
|
||||
await initialize()
|
||||
|
||||
expect(isTeamPlan.value).toBe(true)
|
||||
})
|
||||
|
||||
// The banner states that need isTeamPlan most — paused and payment_failed —
|
||||
// are exactly the ones the backend reports with is_active=false, because the
|
||||
// spend gate folds billing_status into it. Coupling isTeamPlan to an active
|
||||
// subscription would blank the banner precisely when it is needed.
|
||||
it('stays true for a paused team plan, which the backend reports inactive', async () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockIsPersonal.value = false
|
||||
mockBillingStatus.value = {
|
||||
is_active: false,
|
||||
has_funds: true,
|
||||
billing_status: 'paused',
|
||||
plan_slug: 'team_per_credit_monthly',
|
||||
team_credit_stop: {
|
||||
id: 'team_700',
|
||||
credits_monthly: 700,
|
||||
stop_usd: 332
|
||||
}
|
||||
}
|
||||
|
||||
const { initialize, isTeamPlan } = useBillingContext()
|
||||
await initialize()
|
||||
|
||||
expect(isTeamPlan.value).toBe(true)
|
||||
})
|
||||
|
||||
it('stays true for a legacy team plan whose payment failed', async () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockIsPersonal.value = false
|
||||
mockBillingStatus.value = {
|
||||
is_active: false,
|
||||
has_funds: true,
|
||||
billing_status: 'payment_failed',
|
||||
subscription_tier: 'STANDARD',
|
||||
plan_slug: 'team-standard-annual'
|
||||
}
|
||||
|
||||
const { initialize, isTeamPlan } = useBillingContext()
|
||||
await initialize()
|
||||
|
||||
expect(isTeamPlan.value).toBe(true)
|
||||
})
|
||||
|
||||
it('is false for a team workspace on a personal-tier plan', async () => {
|
||||
mockTeamWorkspacesEnabled.value = true
|
||||
mockIsPersonal.value = false
|
||||
mockBillingStatus.value = {
|
||||
is_active: true,
|
||||
has_funds: true,
|
||||
subscription_tier: 'PRO',
|
||||
plan_slug: 'pro-monthly'
|
||||
}
|
||||
|
||||
const { initialize, isTeamPlan } = useBillingContext()
|
||||
await initialize()
|
||||
|
||||
expect(isTeamPlan.value).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
getTierFeatures
|
||||
} from '@/platform/cloud/subscription/constants/tierPricing'
|
||||
import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
|
||||
import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota'
|
||||
import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
|
||||
import type {
|
||||
PreviewSubscribeOptions,
|
||||
@@ -35,8 +36,8 @@ const LEGACY_TEAM_PLAN_SLUG_PREFIX = 'team-'
|
||||
*
|
||||
* - Team workspaces disabled (OSS/Desktop): legacy billing via /customers/*
|
||||
* - Team workspaces enabled: workspace billing via /api/billing/* for team
|
||||
* workspaces, and for personal workspaces once consolidated billing is
|
||||
* enabled; personal workspaces otherwise stay on legacy billing
|
||||
* workspaces, and for personal workspaces once billing control is enabled;
|
||||
* personal workspaces otherwise stay on legacy billing
|
||||
*
|
||||
* The context automatically initializes when the workspace changes and provides
|
||||
* a unified interface for subscription status, balance, and billing actions.
|
||||
@@ -129,6 +130,16 @@ function useBillingContextInternal(): BillingContext {
|
||||
|
||||
const isFreeTier = computed(() => subscription.value?.tier === 'FREE')
|
||||
|
||||
const freeTierQuota = useFreeTierQuota()
|
||||
|
||||
const canRunWorkflows = computed(
|
||||
() =>
|
||||
isActiveSubscription.value &&
|
||||
(!isFreeTier.value ||
|
||||
!freeTierQuota.quotaEnabled.value ||
|
||||
freeTierQuota.freeTierExecutionPermitted.value)
|
||||
)
|
||||
|
||||
const isLegacyTeamPlan = computed(
|
||||
() =>
|
||||
type.value === 'workspace' &&
|
||||
@@ -141,6 +152,21 @@ function useBillingContextInternal(): BillingContext {
|
||||
false)
|
||||
)
|
||||
|
||||
// Plan identity, independent of subscription health: the per-credit Team plan
|
||||
// carries a credit stop, the retired seat-based ones a `team-` slug. Kept off
|
||||
// isActiveSubscription on purpose — paused and payment_failed both force
|
||||
// is_active=false, which is exactly when callers still need to know this is a
|
||||
// team plan.
|
||||
const isTeamPlan = computed(
|
||||
() =>
|
||||
type.value === 'workspace' &&
|
||||
(currentTeamCreditStop.value !== null ||
|
||||
(currentPlanSlug.value
|
||||
?.toLowerCase()
|
||||
.startsWith(LEGACY_TEAM_PLAN_SLUG_PREFIX) ??
|
||||
false))
|
||||
)
|
||||
|
||||
const billingStatus = computed(() =>
|
||||
toValue(activeContext.value.billingStatus)
|
||||
)
|
||||
@@ -191,9 +217,9 @@ function useBillingContextInternal(): BillingContext {
|
||||
error.value = null
|
||||
}
|
||||
|
||||
// type flips when the team-workspaces or consolidated-billing flag resolves
|
||||
// from authenticated config, swapping the active backend. Reset then reinit
|
||||
// on every workspace-id or type change.
|
||||
// type flips when the team-workspaces or billing-control flag resolves from
|
||||
// authenticated config, swapping the active backend. Reset then reinit on
|
||||
// every workspace-id or type change.
|
||||
watch(
|
||||
[() => store.activeWorkspace?.id, () => type.value],
|
||||
async ([newWorkspaceId]) => {
|
||||
@@ -297,8 +323,10 @@ function useBillingContextInternal(): BillingContext {
|
||||
isLoading,
|
||||
error,
|
||||
isActiveSubscription,
|
||||
canRunWorkflows,
|
||||
isFreeTier,
|
||||
isLegacyTeamPlan,
|
||||
isTeamPlan,
|
||||
billingStatus,
|
||||
subscriptionStatus,
|
||||
tier,
|
||||
|
||||
@@ -5,7 +5,7 @@ import { useBillingRouting } from './useBillingRouting'
|
||||
const { mockFlags, mockActiveWorkspace } = vi.hoisted(() => ({
|
||||
mockFlags: {
|
||||
teamWorkspacesEnabled: false,
|
||||
consolidatedBillingEnabled: false
|
||||
billingControlEnabled: false
|
||||
},
|
||||
mockActiveWorkspace: {
|
||||
value: null as { id: string; type: 'personal' | 'team' } | null
|
||||
@@ -30,7 +30,7 @@ const team = { id: 'w-team', type: 'team' as const }
|
||||
describe('useBillingRouting', () => {
|
||||
beforeEach(() => {
|
||||
mockFlags.teamWorkspacesEnabled = false
|
||||
mockFlags.consolidatedBillingEnabled = false
|
||||
mockFlags.billingControlEnabled = false
|
||||
mockActiveWorkspace.value = personal
|
||||
})
|
||||
|
||||
@@ -44,9 +44,9 @@ describe('useBillingRouting', () => {
|
||||
expect(shouldUseWorkspaceBilling.value).toBe(false)
|
||||
})
|
||||
|
||||
it('keeps personal on legacy when consolidated billing is disabled', () => {
|
||||
it('keeps personal on legacy when billing control is disabled', () => {
|
||||
mockFlags.teamWorkspacesEnabled = true
|
||||
mockFlags.consolidatedBillingEnabled = false
|
||||
mockFlags.billingControlEnabled = false
|
||||
mockActiveWorkspace.value = personal
|
||||
|
||||
const { type } = useBillingRouting()
|
||||
@@ -54,9 +54,9 @@ describe('useBillingRouting', () => {
|
||||
expect(type.value).toBe('legacy')
|
||||
})
|
||||
|
||||
it('moves personal to workspace billing when consolidated billing is enabled', () => {
|
||||
it('moves personal to workspace billing when billing control is enabled', () => {
|
||||
mockFlags.teamWorkspacesEnabled = true
|
||||
mockFlags.consolidatedBillingEnabled = true
|
||||
mockFlags.billingControlEnabled = true
|
||||
mockActiveWorkspace.value = personal
|
||||
|
||||
const { type, shouldUseWorkspaceBilling } = useBillingRouting()
|
||||
@@ -65,9 +65,9 @@ describe('useBillingRouting', () => {
|
||||
expect(shouldUseWorkspaceBilling.value).toBe(true)
|
||||
})
|
||||
|
||||
it('uses workspace billing for team workspaces regardless of consolidated billing', () => {
|
||||
it('uses workspace billing for team workspaces regardless of billing control', () => {
|
||||
mockFlags.teamWorkspacesEnabled = true
|
||||
mockFlags.consolidatedBillingEnabled = false
|
||||
mockFlags.billingControlEnabled = false
|
||||
mockActiveWorkspace.value = team
|
||||
|
||||
const { type, shouldUseWorkspaceBilling } = useBillingRouting()
|
||||
@@ -76,9 +76,9 @@ describe('useBillingRouting', () => {
|
||||
expect(shouldUseWorkspaceBilling.value).toBe(true)
|
||||
})
|
||||
|
||||
it('uses workspace billing for team workspaces with consolidated billing enabled', () => {
|
||||
it('uses workspace billing for team workspaces with billing control enabled', () => {
|
||||
mockFlags.teamWorkspacesEnabled = true
|
||||
mockFlags.consolidatedBillingEnabled = true
|
||||
mockFlags.billingControlEnabled = true
|
||||
mockActiveWorkspace.value = team
|
||||
|
||||
const { type, shouldUseWorkspaceBilling } = useBillingRouting()
|
||||
@@ -89,7 +89,7 @@ describe('useBillingRouting', () => {
|
||||
|
||||
it('defaults to legacy while the workspace has not loaded', () => {
|
||||
mockFlags.teamWorkspacesEnabled = true
|
||||
mockFlags.consolidatedBillingEnabled = true
|
||||
mockFlags.billingControlEnabled = true
|
||||
mockActiveWorkspace.value = null
|
||||
|
||||
const { type } = useBillingRouting()
|
||||
|
||||
@@ -8,7 +8,7 @@ import type { BillingType } from './types'
|
||||
/**
|
||||
* Selects the billing backend for the active workspace: legacy user-scoped
|
||||
* (`/customers/*`) or workspace-scoped (`/api/billing/*`). Personal workspaces
|
||||
* stay legacy until `consolidatedBillingEnabled`; team workspaces are always
|
||||
* stay legacy until `billingControlEnabled`; team workspaces are always
|
||||
* workspace-scoped. The routing matrix is covered in useBillingRouting.test.ts.
|
||||
*/
|
||||
export function useBillingRouting() {
|
||||
@@ -23,7 +23,7 @@ export function useBillingRouting() {
|
||||
const workspaceType = workspaceStore.activeWorkspace?.type
|
||||
if (!workspaceType) return 'legacy'
|
||||
|
||||
if (workspaceType === 'personal' && !flags.consolidatedBillingEnabled) {
|
||||
if (workspaceType === 'personal' && !flags.billingControlEnabled) {
|
||||
return 'legacy'
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
import { createSharedComposable } from '@vueuse/core'
|
||||
import { computed, toValue } from 'vue'
|
||||
|
||||
import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
|
||||
import { LGraphBadge } from '@/lib/litegraph/src/litegraph'
|
||||
|
||||
import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
|
||||
import { useNodePricing } from '@/composables/node/useNodePricing'
|
||||
import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
|
||||
import type { SubgraphInput } from '@/lib/litegraph/src/subgraph/SubgraphInput'
|
||||
import { trackNodePrice } from '@/renderer/extensions/vueNodes/composables/usePartitionedBadges'
|
||||
import { app } from '@/scripts/app'
|
||||
import { useWidgetValueStore } from '@/stores/widgetValueStore'
|
||||
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
|
||||
import { adjustColor } from '@/utils/colorUtil'
|
||||
import { useWidgetValueStore } from '@/stores/widgetValueStore'
|
||||
import { mapAllNodes } from '@/utils/graphTraversalUtil'
|
||||
|
||||
type LinkedWidgetInput = INodeInputSlot & {
|
||||
_subgraphSlot?: SubgraphInput
|
||||
@@ -150,3 +157,20 @@ export const usePriceBadge = () => {
|
||||
updateSubgraphCredits
|
||||
}
|
||||
}
|
||||
export const useCreditsBadgesInGraph = createSharedComposable(() => {
|
||||
const { isCreditsBadge } = usePriceBadge()
|
||||
const vueNodeLifecycle = useVueNodeLifecycle()
|
||||
return computed(() => {
|
||||
void vueNodeLifecycle.nodeManager.value?.vueNodeData.size
|
||||
if (!app.graph) return []
|
||||
return mapAllNodes(app.graph, (node) => {
|
||||
if (node.isSubgraphNode()) return
|
||||
|
||||
const priceBadge = node.badges.find(isCreditsBadge)
|
||||
if (!priceBadge) return
|
||||
|
||||
trackNodePrice(node)
|
||||
return [node.title, toValue(priceBadge).text, node.id] as const
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
} from '@/composables/useFeatureFlags'
|
||||
import * as distributionTypes from '@/platform/distribution/types'
|
||||
import {
|
||||
cachedConsolidatedBillingEnabled,
|
||||
cachedBillingControlEnabled,
|
||||
cachedTeamWorkspacesEnabled,
|
||||
remoteConfig,
|
||||
remoteConfigState
|
||||
@@ -182,6 +182,20 @@ describe('useFeatureFlags', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('partnerNodeGovernanceEnabled', () => {
|
||||
afterEach(() => {
|
||||
remoteConfig.value = {}
|
||||
})
|
||||
|
||||
it('uses the workspace eligibility flag', () => {
|
||||
remoteConfig.value = { partner_node_governance_enabled: true }
|
||||
|
||||
const { flags } = useFeatureFlags()
|
||||
|
||||
expect(flags.partnerNodeGovernanceEnabled).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('dev override via localStorage', () => {
|
||||
afterEach(() => {
|
||||
localStorage.clear()
|
||||
@@ -226,19 +240,19 @@ describe('useFeatureFlags', () => {
|
||||
expect(flags.teamWorkspacesEnabled).toBe(true)
|
||||
})
|
||||
|
||||
it('consolidatedBillingEnabled override bypasses isCloud and isAuthenticatedConfigLoaded guards', () => {
|
||||
it('billingControlEnabled override bypasses isCloud and isAuthenticatedConfigLoaded guards', () => {
|
||||
vi.mocked(distributionTypes).isCloud = false
|
||||
localStorage.setItem('ff:consolidated_billing_enabled', 'true')
|
||||
localStorage.setItem('ff:billing_control_enabled', 'true')
|
||||
|
||||
const { flags } = useFeatureFlags()
|
||||
expect(flags.consolidatedBillingEnabled).toBe(true)
|
||||
expect(flags.billingControlEnabled).toBe(true)
|
||||
})
|
||||
|
||||
it('consolidatedBillingEnabled is false off-cloud even without an override', () => {
|
||||
it('billingControlEnabled is false off-cloud even without an override', () => {
|
||||
vi.mocked(distributionTypes).isCloud = false
|
||||
|
||||
const { flags } = useFeatureFlags()
|
||||
expect(flags.consolidatedBillingEnabled).toBe(false)
|
||||
expect(flags.billingControlEnabled).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -248,7 +262,7 @@ describe('useFeatureFlags', () => {
|
||||
remoteConfigState.value = 'unloaded'
|
||||
remoteConfig.value = {}
|
||||
cachedTeamWorkspacesEnabled.value = undefined
|
||||
cachedConsolidatedBillingEnabled.value = undefined
|
||||
cachedBillingControlEnabled.value = undefined
|
||||
localStorage.clear()
|
||||
})
|
||||
|
||||
@@ -257,36 +271,36 @@ describe('useFeatureFlags', () => {
|
||||
remoteConfigState.value = 'unloaded'
|
||||
remoteConfig.value = {}
|
||||
cachedTeamWorkspacesEnabled.value = undefined
|
||||
cachedConsolidatedBillingEnabled.value = undefined
|
||||
cachedBillingControlEnabled.value = undefined
|
||||
localStorage.clear()
|
||||
})
|
||||
|
||||
it('returns the cached session value during the auth window', () => {
|
||||
cachedTeamWorkspacesEnabled.value = false
|
||||
cachedConsolidatedBillingEnabled.value = true
|
||||
cachedBillingControlEnabled.value = true
|
||||
|
||||
const { flags } = useFeatureFlags()
|
||||
expect(flags.teamWorkspacesEnabled).toBe(false)
|
||||
expect(flags.consolidatedBillingEnabled).toBe(true)
|
||||
expect(flags.billingControlEnabled).toBe(true)
|
||||
})
|
||||
|
||||
it('defaults to false during the auth window when nothing is cached', () => {
|
||||
const { flags } = useFeatureFlags()
|
||||
expect(flags.teamWorkspacesEnabled).toBe(false)
|
||||
expect(flags.consolidatedBillingEnabled).toBe(false)
|
||||
expect(flags.billingControlEnabled).toBe(false)
|
||||
})
|
||||
|
||||
it('prefers authenticated remoteConfig over the server feature fallback', () => {
|
||||
remoteConfigState.value = 'authenticated'
|
||||
remoteConfig.value = {
|
||||
team_workspaces_enabled: true,
|
||||
consolidated_billing_enabled: true
|
||||
billing_control_enabled: true
|
||||
}
|
||||
vi.mocked(api.getServerFeature).mockReturnValue(false)
|
||||
|
||||
const { flags } = useFeatureFlags()
|
||||
expect(flags.teamWorkspacesEnabled).toBe(true)
|
||||
expect(flags.consolidatedBillingEnabled).toBe(true)
|
||||
expect(flags.billingControlEnabled).toBe(true)
|
||||
})
|
||||
|
||||
it('falls back to api.getServerFeature when authenticated config omits the flag', () => {
|
||||
@@ -295,15 +309,14 @@ describe('useFeatureFlags', () => {
|
||||
vi.mocked(api.getServerFeature).mockImplementation(
|
||||
(path, defaultValue) => {
|
||||
if (path === ServerFeatureFlag.TEAM_WORKSPACES_ENABLED) return true
|
||||
if (path === ServerFeatureFlag.CONSOLIDATED_BILLING_ENABLED)
|
||||
return true
|
||||
if (path === ServerFeatureFlag.BILLING_CONTROL_ENABLED) return true
|
||||
return defaultValue
|
||||
}
|
||||
)
|
||||
|
||||
const { flags } = useFeatureFlags()
|
||||
expect(flags.teamWorkspacesEnabled).toBe(true)
|
||||
expect(flags.consolidatedBillingEnabled).toBe(true)
|
||||
expect(flags.billingControlEnabled).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
|
||||
|
||||
import { isCloud, isNightly } from '@/platform/distribution/types'
|
||||
import {
|
||||
cachedConsolidatedBillingEnabled,
|
||||
cachedBillingControlEnabled,
|
||||
cachedTeamWorkspacesEnabled,
|
||||
isAuthenticatedConfigLoaded,
|
||||
remoteConfig
|
||||
@@ -24,6 +24,7 @@ export enum ServerFeatureFlag {
|
||||
ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
|
||||
LINEAR_TOGGLE_ENABLED = 'linear_toggle_enabled',
|
||||
TEAM_WORKSPACES_ENABLED = 'team_workspaces_enabled',
|
||||
PARTNER_NODE_GOVERNANCE_ENABLED = 'partner_node_governance_enabled',
|
||||
USER_SECRETS_ENABLED = 'user_secrets_enabled',
|
||||
NODE_REPLACEMENTS = 'node_replacements',
|
||||
NODE_LIBRARY_ESSENTIALS_ENABLED = 'node_library_essentials_enabled',
|
||||
@@ -32,7 +33,8 @@ export enum ServerFeatureFlag {
|
||||
COMFYHUB_PROFILE_GATE_ENABLED = 'comfyhub_profile_gate_enabled',
|
||||
SHOW_SIGNIN_BUTTON = 'show_signin_button',
|
||||
UNIFIED_CLOUD_AUTH = 'unified_cloud_auth',
|
||||
CONSOLIDATED_BILLING_ENABLED = 'consolidated_billing_enabled',
|
||||
BILLING_CONTROL_ENABLED = 'billing_control_enabled',
|
||||
FREE_TIER_JOB_ALLOWANCE_ENABLED = 'free_tier_job_allowance_enabled',
|
||||
SIGNUP_TURNSTILE = 'signup_turnstile'
|
||||
}
|
||||
|
||||
@@ -133,6 +135,13 @@ export function useFeatureFlags() {
|
||||
cachedTeamWorkspacesEnabled
|
||||
)
|
||||
},
|
||||
get partnerNodeGovernanceEnabled() {
|
||||
return resolveFlag(
|
||||
ServerFeatureFlag.PARTNER_NODE_GOVERNANCE_ENABLED,
|
||||
remoteConfig.value.partner_node_governance_enabled,
|
||||
false
|
||||
)
|
||||
},
|
||||
get userSecretsEnabled() {
|
||||
return resolveFlag(
|
||||
ServerFeatureFlag.USER_SECRETS_ENABLED,
|
||||
@@ -191,15 +200,25 @@ export function useFeatureFlags() {
|
||||
)
|
||||
},
|
||||
/**
|
||||
* Whether personal workspaces use the consolidated (workspace-scoped)
|
||||
* billing flow. While false (default), personal workspaces stay on the
|
||||
* legacy per-user billing flow; team workspaces are unaffected.
|
||||
* Whether personal workspaces use the workspace-scoped billing flow. While
|
||||
* false (default), personal workspaces stay on the legacy per-user billing
|
||||
* flow; team workspaces are unaffected.
|
||||
*/
|
||||
get consolidatedBillingEnabled() {
|
||||
get billingControlEnabled() {
|
||||
return resolveAuthGatedFlag(
|
||||
ServerFeatureFlag.CONSOLIDATED_BILLING_ENABLED,
|
||||
remoteConfig.value.consolidated_billing_enabled,
|
||||
cachedConsolidatedBillingEnabled
|
||||
ServerFeatureFlag.BILLING_CONTROL_ENABLED,
|
||||
remoteConfig.value.billing_control_enabled,
|
||||
cachedBillingControlEnabled
|
||||
)
|
||||
},
|
||||
get freeTierJobAllowanceEnabled() {
|
||||
const config = remoteConfig.value as typeof remoteConfig.value & {
|
||||
free_tier_job_allowance_enabled?: boolean
|
||||
}
|
||||
return resolveFlag(
|
||||
ServerFeatureFlag.FREE_TIER_JOB_ALLOWANCE_ENABLED,
|
||||
config.free_tier_job_allowance_enabled,
|
||||
false
|
||||
)
|
||||
},
|
||||
get signupTurnstileMode() {
|
||||
|
||||
@@ -2473,6 +2473,11 @@
|
||||
},
|
||||
"credits": {
|
||||
"activity": "Activity",
|
||||
"insufficient": {
|
||||
"memberTitle": "This workspace is out of credits",
|
||||
"memberDescription": "Your team has used all its credits. Your workspace admins need to add more credits to run workflows.",
|
||||
"memberCta": "Ok, got it"
|
||||
},
|
||||
"credits": "Credits",
|
||||
"yourCreditBalance": "Your credit balance",
|
||||
"purchaseCredits": "Purchase Credits",
|
||||
@@ -2882,6 +2887,32 @@
|
||||
"updatePassword": "Update Password"
|
||||
},
|
||||
"workspacePanel": {
|
||||
"billingStatus": {
|
||||
"warning": {
|
||||
"title": "Payment declined",
|
||||
"body": "Your last payment didn't go through. Your subscription will pause on {date} unless payment is updated.",
|
||||
"bodyNoDate": "Your last payment didn't go through. Update payment to avoid a pause."
|
||||
},
|
||||
"paused": {
|
||||
"title": "Subscription paused",
|
||||
"body": "This workspace's subscription is paused. Update payment to resume.",
|
||||
"memberBody": "This workspace's subscription is paused. Your workspace admins need to update the payment method."
|
||||
},
|
||||
"outOfCredits": {
|
||||
"title": "Out of credits",
|
||||
"body": "Your team has used all its credits. Add more credits to continue generating or wait until credits refill on {date}.",
|
||||
"bodyNoDate": "Your team has used all its credits. Add more credits to continue generating.",
|
||||
"memberBody": "Your team has used all its credits. Your workspace admins need to add more credits to continue generating.",
|
||||
"addCredits": "Add credits",
|
||||
"dismiss": "Dismiss"
|
||||
},
|
||||
"ending": {
|
||||
"title": "Your team plan ends on {date}",
|
||||
"body": "Members keep full access until then. Reactivate to keep your shared credits and seats.",
|
||||
"reactivate": "Reactivate plan"
|
||||
},
|
||||
"updatePayment": "Update payment"
|
||||
},
|
||||
"invite": "Invite",
|
||||
"inviteMember": "Invite member",
|
||||
"inviteLimitReached": "You've reached the maximum of {count} members",
|
||||
@@ -3556,6 +3587,9 @@
|
||||
"dockToTop": "Dock to top",
|
||||
"feedback": "Feedback",
|
||||
"feedbackTooltip": "Feedback",
|
||||
"freeTierRuns": "{available} / {MAX_AVAILABLE} runs left",
|
||||
"freeTierRunsExhausted": "No runs left",
|
||||
"freeTierPartner": "Partner nodes need a paid plan",
|
||||
"share": "Share",
|
||||
"shareTooltip": "Share workflow"
|
||||
},
|
||||
|
||||
65
src/platform/cloud/subscription/components/FreeTierQuota.vue
Normal file
65
src/platform/cloud/subscription/components/FreeTierQuota.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { cn } from '@comfyorg/tailwind-utils'
|
||||
import { useBillingContext } from '@/composables/billing/useBillingContext'
|
||||
import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota'
|
||||
|
||||
const DOT_COLORS = [
|
||||
'bg-destructive-background',
|
||||
'bg-warning-background',
|
||||
'bg-success-background'
|
||||
]
|
||||
|
||||
const { showSubscriptionDialog } = useBillingContext()
|
||||
const { t } = useI18n()
|
||||
const { available, hasInvalidNodes, maxAvailable, quotaEnabled } =
|
||||
useFreeTierQuota()
|
||||
|
||||
const dotColor = computed(() => {
|
||||
const ratio = maxAvailable.value ? available.value / maxAvailable.value : 0
|
||||
return DOT_COLORS[
|
||||
Math.min(Math.floor(ratio * DOT_COLORS.length), DOT_COLORS.length - 1)
|
||||
]
|
||||
})
|
||||
const label = computed(() =>
|
||||
available.value === 0
|
||||
? t('actionbar.freeTierRunsExhausted')
|
||||
: t('actionbar.freeTierRuns', {
|
||||
available: available.value,
|
||||
MAX_AVAILABLE: maxAvailable.value
|
||||
})
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
v-if="quotaEnabled"
|
||||
class="mt-2 w-full cursor-pointer border-t border-border-subtle bg-comfy-menu-bg px-4 pt-2 select-none"
|
||||
data-testid="free-tier-quota"
|
||||
@click="showSubscriptionDialog({ reason: 'free_tier_quota' })"
|
||||
>
|
||||
<div
|
||||
v-if="hasInvalidNodes"
|
||||
class="flex w-full items-center justify-center gap-2"
|
||||
>
|
||||
<i class="icon-[comfy--credits] bg-amber-400" />
|
||||
{{ t('actionbar.freeTierPartner') }}
|
||||
</div>
|
||||
<div v-else class="flex w-full items-center justify-between">
|
||||
<div class="flex gap-2" :aria-label="label" role="img">
|
||||
<div
|
||||
v-for="index in maxAvailable"
|
||||
:key="index"
|
||||
:class="
|
||||
cn(
|
||||
'size-1.5 rounded-full',
|
||||
index > available ? 'bg-secondary-background-selected' : dotColor
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-text="label" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -8,10 +8,19 @@ const mockDialogService = {
|
||||
showTopUpCreditsDialog: vi.fn()
|
||||
}
|
||||
|
||||
const mockBilling = {
|
||||
fetchStatus: vi.fn(),
|
||||
fetchBalance: vi.fn()
|
||||
}
|
||||
|
||||
vi.mock('@/services/dialogService', () => ({
|
||||
useDialogService: vi.fn(() => mockDialogService)
|
||||
}))
|
||||
|
||||
vi.mock('@/composables/billing/useBillingContext', () => ({
|
||||
useBillingContext: vi.fn(() => mockBilling)
|
||||
}))
|
||||
|
||||
describe('useAccountPreconditionDialog', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
@@ -55,4 +64,18 @@ describe('useAccountPreconditionDialog', () => {
|
||||
mockDialogService.showSubscriptionRequiredDialog
|
||||
).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('refreshes the billing snapshot on a credit precondition so exhausted-state surfaces converge', () => {
|
||||
useAccountPreconditionDialog().open('credits')
|
||||
|
||||
expect(mockBilling.fetchStatus).toHaveBeenCalledTimes(1)
|
||||
expect(mockBilling.fetchBalance).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('does not touch billing state for non-credit preconditions', () => {
|
||||
useAccountPreconditionDialog().open('subscription')
|
||||
|
||||
expect(mockBilling.fetchStatus).not.toHaveBeenCalled()
|
||||
expect(mockBilling.fetchBalance).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useBillingContext } from '@/composables/billing/useBillingContext'
|
||||
import type { AccountPrecondition } from '@/platform/errorCatalog/accountPreconditionRouting'
|
||||
import { useDialogService } from '@/services/dialogService'
|
||||
|
||||
@@ -28,11 +29,19 @@ export function useAccountPreconditionDialog() {
|
||||
reason: 'subscription_required'
|
||||
})
|
||||
return
|
||||
case 'credits':
|
||||
case 'credits': {
|
||||
// The server just declared the balance exhausted; there is no push or
|
||||
// polling for billing state, so refresh it here to converge
|
||||
// hasFunds-keyed surfaces such as the credits-exhausted banner. The
|
||||
// refresh is best-effort: allSettled keeps a flaky billing API from
|
||||
// surfacing as unhandled rejections.
|
||||
const { fetchStatus, fetchBalance } = useBillingContext()
|
||||
void Promise.allSettled([fetchStatus(), fetchBalance()])
|
||||
void dialogService.showTopUpCreditsDialog({
|
||||
isInsufficientCredits: true
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import { createSharedComposable } from '@vueuse/core'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
import { useCreditsBadgesInGraph } from '@/composables/node/usePriceBadge'
|
||||
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
||||
import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
|
||||
|
||||
export const useFreeTierQuota = createSharedComposable(function () {
|
||||
const { flags } = useFeatureFlags()
|
||||
const creditsBadges = useCreditsBadgesInGraph()
|
||||
|
||||
const available = ref(0)
|
||||
const maxAvailable = ref(0)
|
||||
watch(
|
||||
() => remoteConfig.value.free_tier_balance?.remaining,
|
||||
(val) => (available.value = val ?? 0),
|
||||
{ immediate: true }
|
||||
)
|
||||
watch(
|
||||
() => remoteConfig.value.free_tier_balance?.allowance,
|
||||
(val) => (maxAvailable.value = val ?? 0),
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const quotaEnabled = computed(
|
||||
() => flags.freeTierJobAllowanceEnabled && maxAvailable.value > 0
|
||||
)
|
||||
const hasInvalidNodes = computed(() => creditsBadges.value.length > 0)
|
||||
const freeTierExecutionPermitted = computed(
|
||||
() => !hasInvalidNodes.value && quotaEnabled.value && available.value > 0
|
||||
)
|
||||
|
||||
function trackRun() {
|
||||
if (available.value > 0) available.value--
|
||||
}
|
||||
|
||||
return {
|
||||
available,
|
||||
freeTierExecutionPermitted,
|
||||
hasInvalidNodes,
|
||||
maxAvailable,
|
||||
quotaEnabled,
|
||||
trackRun
|
||||
}
|
||||
})
|
||||
@@ -266,6 +266,21 @@ describe('useSubscriptionDialog', () => {
|
||||
expect(mockTrackSubscription).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('shows the read-only member dialog for out-of-credits too, not the pricing table', () => {
|
||||
mockShouldUseWorkspaceBilling.value = true
|
||||
mockIsInPersonalWorkspace.value = false
|
||||
mockCanManageSubscription.value = false
|
||||
const { showPricingTable } = useSubscriptionDialog()
|
||||
|
||||
showPricingTable({ reason: 'out_of_credits' })
|
||||
|
||||
expect(mockShowLayoutDialog).toHaveBeenCalledTimes(1)
|
||||
const props = mockShowLayoutDialog.mock.calls[0][0].props
|
||||
expect(props).toHaveProperty('onClose')
|
||||
expect(props).not.toHaveProperty('reason')
|
||||
expect(props).not.toHaveProperty('initialPlanMode')
|
||||
})
|
||||
|
||||
it('does not track on non-cloud', () => {
|
||||
mockIsCloud.value = false
|
||||
const { showPricingTable } = useSubscriptionDialog()
|
||||
|
||||
@@ -55,12 +55,12 @@ export const useSubscriptionDialog = () => {
|
||||
|
||||
// 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.
|
||||
// pricing table — including out-of-credits, whose member recovery path is
|
||||
// also owner-only (FE-1246).
|
||||
if (
|
||||
shouldUseWorkspaceBilling.value &&
|
||||
!workspaceStore.isInPersonalWorkspace &&
|
||||
!permissions.value.canManageSubscription &&
|
||||
options?.reason !== 'out_of_credits'
|
||||
!permissions.value.canManageSubscription
|
||||
) {
|
||||
dialogService.showLayoutDialog({
|
||||
key: DIALOG_KEY,
|
||||
@@ -88,9 +88,9 @@ export const useSubscriptionDialog = () => {
|
||||
} as const
|
||||
|
||||
// Jun-5 model: a single unified pricing table (personal/team plan toggle on
|
||||
// one workspace) for workspaces on the consolidated billing flow. Replaces
|
||||
// the old personal-vs-team workspace fork. Personal workspaces still on the
|
||||
// legacy flow (consolidated billing disabled) get the legacy table.
|
||||
// one workspace) for workspaces on the workspace-scoped billing flow.
|
||||
// Replaces the old personal-vs-team workspace fork. Personal workspaces
|
||||
// still on the legacy flow (billing control disabled) get the legacy table.
|
||||
if (shouldUseWorkspaceBilling.value) {
|
||||
// Existing per-member (legacy) team subscribers keep the old tier-based
|
||||
// team table; the unified credit-slider table is for everyone else.
|
||||
|
||||
@@ -73,6 +73,33 @@ describe('resolveAccountPrecondition', () => {
|
||||
).toBe('credits')
|
||||
})
|
||||
|
||||
it('classifies the submit-time 402 body by its insufficient_credits type regardless of message', () => {
|
||||
expect(
|
||||
resolveAccountPrecondition({
|
||||
exceptionType: 'insufficient_credits',
|
||||
exceptionMessage: 'Workspace balance exhausted'
|
||||
})
|
||||
).toBe('credits')
|
||||
})
|
||||
|
||||
it('classifies the team submit-time 429 (PAYMENT_REQUIRED / insufficient credits) as a credits precondition', () => {
|
||||
expect(
|
||||
resolveAccountPrecondition({
|
||||
exceptionType: 'PAYMENT_REQUIRED',
|
||||
exceptionMessage: 'Insufficient credits to queue workflows'
|
||||
})
|
||||
).toBe('credits')
|
||||
})
|
||||
|
||||
it('keeps the team submit-time 429 for an inactive subscription on the subscription precondition', () => {
|
||||
expect(
|
||||
resolveAccountPrecondition({
|
||||
exceptionType: 'PAYMENT_REQUIRED',
|
||||
exceptionMessage: 'Subscription required to queue workflows'
|
||||
})
|
||||
).toBe('subscription')
|
||||
})
|
||||
|
||||
it('returns undefined for an ordinary workflow error', () => {
|
||||
expect(
|
||||
resolveAccountPrecondition({
|
||||
|
||||
@@ -33,7 +33,13 @@ const INSUFFICIENT_CREDITS_MESSAGES = new Set([
|
||||
'Payment Required: Please add credits to your account to use this node.'
|
||||
])
|
||||
const WORKSPACE_INSUFFICIENT_CREDITS_MESSAGES = new Set([
|
||||
'Payment Required: Please add credits to your workspace to continue.'
|
||||
// Execution-time (pre-GPU) WebSocket failure for a queued team job.
|
||||
'Payment Required: Please add credits to your workspace to continue.',
|
||||
// Submit-time 429 rejection for a team workspace out of credits
|
||||
// (checkTeamWorkspaceSubscription). It shares the PAYMENT_REQUIRED error type
|
||||
// with the subscription-required rejection, so it can only be told apart by
|
||||
// message.
|
||||
'Insufficient credits to queue workflows'
|
||||
])
|
||||
const SUBSCRIPTION_REQUIRED_MESSAGES = new Set([
|
||||
'Workspace has no active subscription. Please subscribe to a plan to continue.',
|
||||
@@ -243,8 +249,12 @@ const RUNTIME_MATCH_RULES: RuntimeMatchRule[] = [
|
||||
resolve: () => catalogMatch(WORKSPACE_INSUFFICIENT_CREDITS_CATALOG_ID)
|
||||
},
|
||||
{
|
||||
// 'insufficient_credits' is the error.type BE-2866 will emit on the
|
||||
// personal submit-time 402; the team submit path is a 429 matched by
|
||||
// message in WORKSPACE_INSUFFICIENT_CREDITS_MESSAGES above.
|
||||
matches: (info, message) =>
|
||||
info.exceptionType === 'InsufficientFundsError' ||
|
||||
info.exceptionType === 'insufficient_credits' ||
|
||||
INSUFFICIENT_CREDITS_MESSAGES.has(message),
|
||||
resolve: () => catalogMatch(INSUFFICIENT_CREDITS_CATALOG_ID)
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {
|
||||
cachedConsolidatedBillingEnabled,
|
||||
cachedBillingControlEnabled,
|
||||
cachedTeamWorkspacesEnabled,
|
||||
remoteConfig,
|
||||
remoteConfigState
|
||||
@@ -60,8 +60,8 @@ export async function refreshRemoteConfig(
|
||||
cachedTeamWorkspacesEnabled.value = Boolean(
|
||||
config.team_workspaces_enabled
|
||||
)
|
||||
cachedConsolidatedBillingEnabled.value = Boolean(
|
||||
config.consolidated_billing_enabled
|
||||
cachedBillingControlEnabled.value = Boolean(
|
||||
config.billing_control_enabled
|
||||
)
|
||||
}
|
||||
return
|
||||
|
||||
@@ -60,7 +60,7 @@ export const cachedTeamWorkspacesEnabled = useStorage<boolean | undefined>(
|
||||
undefined
|
||||
)
|
||||
|
||||
export const cachedConsolidatedBillingEnabled = useStorage<boolean | undefined>(
|
||||
'consolidated_billing_enabled' satisfies `${ServerFeatureFlag.CONSOLIDATED_BILLING_ENABLED}`,
|
||||
export const cachedBillingControlEnabled = useStorage<boolean | undefined>(
|
||||
'billing_control_enabled' satisfies `${ServerFeatureFlag.BILLING_CONTROL_ENABLED}`,
|
||||
undefined
|
||||
)
|
||||
|
||||
@@ -107,15 +107,21 @@ export type RemoteConfig = {
|
||||
manager_survey_url?: string
|
||||
linear_toggle_enabled?: boolean
|
||||
team_workspaces_enabled?: boolean
|
||||
partner_node_governance_enabled?: boolean
|
||||
user_secrets_enabled?: boolean
|
||||
node_library_essentials_enabled?: boolean
|
||||
free_tier_credits?: number
|
||||
free_tier_balance?: {
|
||||
allowance: number
|
||||
used: number
|
||||
remaining: number
|
||||
}
|
||||
new_free_tier_subscriptions?: boolean
|
||||
workflow_sharing_enabled?: boolean
|
||||
comfyhub_upload_enabled?: boolean
|
||||
comfyhub_profile_gate_enabled?: boolean
|
||||
unified_cloud_auth?: boolean
|
||||
consolidated_billing_enabled?: boolean
|
||||
billing_control_enabled?: boolean
|
||||
sentry_dsn?: string
|
||||
turnstile_sitekey?: string
|
||||
// Raw, unvalidated wire value (a server typo like 'enfroce' is possible).
|
||||
|
||||
@@ -33,6 +33,7 @@ export type PaymentIntentSource =
|
||||
| 'invite_member_upsell'
|
||||
| 'upload_model_upgrade'
|
||||
| 'team_upgrade_resume'
|
||||
| 'free_tier_quota'
|
||||
|
||||
export type SubscriptionCheckoutType = 'new' | 'change'
|
||||
export type SubscriptionCheckoutTier = TierKey | 'team'
|
||||
|
||||
70
src/platform/workspace/api/partnerNodePolicyApi.test.ts
Normal file
70
src/platform/workspace/api/partnerNodePolicyApi.test.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import {
|
||||
getPartnerNodePolicy,
|
||||
PartnerNodePolicyApiError
|
||||
} from '@/platform/workspace/api/partnerNodePolicyApi'
|
||||
|
||||
const mockFetchApi = vi.fn()
|
||||
|
||||
vi.mock('@/scripts/api', () => ({
|
||||
api: {
|
||||
fetchApi: (...args: unknown[]) => mockFetchApi(...args)
|
||||
}
|
||||
}))
|
||||
|
||||
function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
|
||||
return new Response(JSON.stringify(body), init)
|
||||
}
|
||||
|
||||
describe('partnerNodePolicyApi', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('normalizes the configured policy response', async () => {
|
||||
mockFetchApi.mockResolvedValue(
|
||||
jsonResponse({
|
||||
enforcement_enabled: true,
|
||||
nodes: { AllowedNode: true, DisabledNode: false }
|
||||
})
|
||||
)
|
||||
|
||||
await expect(getPartnerNodePolicy()).resolves.toEqual({
|
||||
enforcementEnabled: true,
|
||||
nodes: { AllowedNode: true, DisabledNode: false }
|
||||
})
|
||||
expect(mockFetchApi).toHaveBeenCalledWith(
|
||||
'/workspace/partner-node-policy',
|
||||
{ cache: 'no-store' }
|
||||
)
|
||||
})
|
||||
|
||||
it('maps 404 to an unconfigured policy', async () => {
|
||||
mockFetchApi.mockResolvedValue(
|
||||
jsonResponse({}, { status: 404, statusText: 'Not Found' })
|
||||
)
|
||||
|
||||
await expect(getPartnerNodePolicy()).resolves.toBeNull()
|
||||
})
|
||||
|
||||
it('preserves non-404 status codes for policy decisions', async () => {
|
||||
mockFetchApi.mockResolvedValue(
|
||||
jsonResponse({}, { status: 503, statusText: 'Service Unavailable' })
|
||||
)
|
||||
|
||||
await expect(getPartnerNodePolicy()).rejects.toEqual(
|
||||
new PartnerNodePolicyApiError(503, 'Service Unavailable')
|
||||
)
|
||||
})
|
||||
|
||||
it('rejects malformed policy responses', async () => {
|
||||
mockFetchApi.mockResolvedValue(
|
||||
jsonResponse({ enforcement_enabled: 'yes', nodes: [] })
|
||||
)
|
||||
|
||||
await expect(getPartnerNodePolicy()).rejects.toMatchObject({
|
||||
name: 'ZodError'
|
||||
})
|
||||
})
|
||||
})
|
||||
39
src/platform/workspace/api/partnerNodePolicyApi.ts
Normal file
39
src/platform/workspace/api/partnerNodePolicyApi.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { z } from 'zod'
|
||||
|
||||
import { api } from '@/scripts/api'
|
||||
|
||||
const partnerNodePolicyResponseSchema = z.object({
|
||||
enforcement_enabled: z.boolean(),
|
||||
nodes: z.record(z.string(), z.boolean())
|
||||
})
|
||||
|
||||
export interface PartnerNodePolicy {
|
||||
enforcementEnabled: boolean
|
||||
nodes: Readonly<Record<string, boolean>>
|
||||
}
|
||||
|
||||
export class PartnerNodePolicyApiError extends Error {
|
||||
constructor(
|
||||
public readonly status: number,
|
||||
message: string
|
||||
) {
|
||||
super(message)
|
||||
this.name = 'PartnerNodePolicyApiError'
|
||||
}
|
||||
}
|
||||
|
||||
export async function getPartnerNodePolicy(): Promise<PartnerNodePolicy | null> {
|
||||
const response = await api.fetchApi('/workspace/partner-node-policy', {
|
||||
cache: 'no-store'
|
||||
})
|
||||
if (response.status === 404) return null
|
||||
if (!response.ok) {
|
||||
throw new PartnerNodePolicyApiError(response.status, response.statusText)
|
||||
}
|
||||
|
||||
const data = partnerNodePolicyResponseSchema.parse(await response.json())
|
||||
return {
|
||||
enforcementEnabled: data.enforcement_enabled,
|
||||
nodes: data.nodes
|
||||
}
|
||||
}
|
||||
@@ -250,6 +250,9 @@ export type BillingStatus =
|
||||
| 'pending_payment'
|
||||
| 'paid'
|
||||
| 'payment_failed'
|
||||
// A Stripe-paused subscription stays `active` on the activity axis; the pause
|
||||
// is a payment-lifecycle fact. Not emitted until cloud#5075 ships.
|
||||
| 'paused'
|
||||
| 'inactive'
|
||||
|
||||
export interface CurrentTeamCreditStop {
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col overflow-hidden rounded-2xl border border-border-default bg-base-background"
|
||||
data-testid="insufficient-credits-member-message"
|
||||
>
|
||||
<div
|
||||
class="flex h-12 items-center gap-2 border-b border-border-default p-4"
|
||||
>
|
||||
<p class="m-0 min-w-0 flex-1 font-inter text-sm text-base-foreground">
|
||||
{{ $t('credits.insufficient.memberTitle') }}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
:aria-label="$t('g.close')"
|
||||
class="flex size-4 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent text-base-foreground"
|
||||
@click="onClose"
|
||||
>
|
||||
<i class="icon-[lucide--x] size-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<p class="m-0 font-inter text-sm text-muted-foreground">
|
||||
{{ $t('credits.insufficient.memberDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end p-4">
|
||||
<Button variant="secondary" size="lg" @click="onClose">
|
||||
{{ $t('credits.insufficient.memberCta') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
|
||||
const { onClose } = defineProps<{
|
||||
onClose: () => void
|
||||
}>()
|
||||
</script>
|
||||
@@ -0,0 +1,178 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import type { SubscriptionInfo } from '@/composables/billing/types'
|
||||
import { i18n } from '@/i18n'
|
||||
import type { BillingContextMockState } from '@/storybook/mocks/useBillingContext'
|
||||
import { setBillingContextMock } from '@/storybook/mocks/useBillingContext'
|
||||
import type { WorkspaceUIMockState } from '@/storybook/mocks/useWorkspaceUI'
|
||||
import { setWorkspaceUIMock } from '@/storybook/mocks/useWorkspaceUI'
|
||||
|
||||
import BillingStatusBanner from './BillingStatusBanner.vue'
|
||||
|
||||
/**
|
||||
* The single billing banner slot for team workspaces (FE-1246), rendered in
|
||||
* priority order: paused > payment declined > out of credits > ending. At most
|
||||
* one state shows at a time. Each story drives the real `deriveBillingBanner`
|
||||
* through the stubbed billing context, so these are the states the backend can
|
||||
* actually emit — not hand-set banner kinds.
|
||||
*
|
||||
* The amber triangle-alert marks action-needed states; the muted circle-alert is
|
||||
* reserved for the informational "plan ends" notice (DES-380 severity rule).
|
||||
*
|
||||
* RUN WITH `DISTRIBUTION=cloud pnpm storybook`. The banner is cloud-only, and
|
||||
* `isCloud` is compile-time, so under a plain `pnpm storybook` every story below
|
||||
* renders empty.
|
||||
*/
|
||||
const meta: Meta<typeof BillingStatusBanner> = {
|
||||
title: 'Platform/Workspace/BillingStatusBanner',
|
||||
component: BillingStatusBanner,
|
||||
parameters: { layout: 'fullscreen' }
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof BillingStatusBanner>
|
||||
|
||||
const RENEWAL_DATE = '2026-08-01T00:00:00Z'
|
||||
const PLAN_END_DATE = '2026-08-01T00:00:00Z'
|
||||
|
||||
const teamSubscription: SubscriptionInfo = {
|
||||
isActive: true,
|
||||
tier: null,
|
||||
duration: 'MONTHLY',
|
||||
planSlug: 'team-monthly',
|
||||
renewalDate: RENEWAL_DATE,
|
||||
endDate: null,
|
||||
isCancelled: false,
|
||||
hasFunds: true
|
||||
}
|
||||
|
||||
const funded = teamSubscription
|
||||
const exhausted: SubscriptionInfo = { ...teamSubscription, hasFunds: false }
|
||||
const cancelled: SubscriptionInfo = {
|
||||
...teamSubscription,
|
||||
isCancelled: true,
|
||||
endDate: PLAN_END_DATE
|
||||
}
|
||||
|
||||
const owner: Partial<WorkspaceUIMockState> = {}
|
||||
const member: Partial<WorkspaceUIMockState> = {
|
||||
canManageSubscription: false,
|
||||
canManageSubscriptionLifecycle: false,
|
||||
canTopUp: false
|
||||
}
|
||||
|
||||
function story(
|
||||
billing: Partial<BillingContextMockState>,
|
||||
workspace: Partial<WorkspaceUIMockState>
|
||||
): Story {
|
||||
return {
|
||||
beforeEach() {
|
||||
// Dates in the copy go through vue-i18n's `d()`, so pin the locale rather
|
||||
// than inherit the developer's.
|
||||
i18n.global.locale.value = 'en'
|
||||
setBillingContextMock({ isTeamPlan: true, ...billing })
|
||||
setWorkspaceUIMock(workspace)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stripe suspended the subscription. The backend folds billing_status into
|
||||
* is_active, so a paused workspace always reports `is_active: false` — the
|
||||
* pairing these stories pin.
|
||||
*/
|
||||
export const PausedOwner: Story = story(
|
||||
{
|
||||
subscription: funded,
|
||||
isActiveSubscription: false,
|
||||
billingStatus: 'paused',
|
||||
subscriptionStatus: 'active'
|
||||
},
|
||||
owner
|
||||
)
|
||||
|
||||
/** Members get an admin-directed notice and no action. */
|
||||
export const PausedMember: Story = story(
|
||||
{
|
||||
subscription: funded,
|
||||
isActiveSubscription: false,
|
||||
billingStatus: 'paused',
|
||||
subscriptionStatus: 'active'
|
||||
},
|
||||
member
|
||||
)
|
||||
|
||||
/**
|
||||
* A failed charge with Stripe still retrying. Owner-only, and `is_active: false`
|
||||
* for the same reason paused is — payment_failed also denies spend.
|
||||
*/
|
||||
export const PaymentDeclined: Story = story(
|
||||
{
|
||||
subscription: funded,
|
||||
isActiveSubscription: false,
|
||||
billingStatus: 'payment_failed',
|
||||
subscriptionStatus: 'active',
|
||||
renewalDate: RENEWAL_DATE
|
||||
},
|
||||
owner
|
||||
)
|
||||
|
||||
/** Payment declined before a renewal date is known. */
|
||||
export const PaymentDeclinedNoDate: Story = story(
|
||||
{
|
||||
subscription: funded,
|
||||
isActiveSubscription: false,
|
||||
billingStatus: 'payment_failed',
|
||||
subscriptionStatus: 'active'
|
||||
},
|
||||
owner
|
||||
)
|
||||
|
||||
/** Shared team credits exhausted. Session-dismissible. */
|
||||
export const OutOfCreditsOwner: Story = story(
|
||||
{
|
||||
subscription: exhausted,
|
||||
isActiveSubscription: true,
|
||||
billingStatus: 'paid',
|
||||
subscriptionStatus: 'active',
|
||||
renewalDate: RENEWAL_DATE
|
||||
},
|
||||
owner
|
||||
)
|
||||
|
||||
/** Members can't top up, so they get contact-admin copy and no Add credits. */
|
||||
export const OutOfCreditsMember: Story = story(
|
||||
{
|
||||
subscription: exhausted,
|
||||
isActiveSubscription: true,
|
||||
billingStatus: 'paid',
|
||||
subscriptionStatus: 'active',
|
||||
renewalDate: RENEWAL_DATE
|
||||
},
|
||||
member
|
||||
)
|
||||
|
||||
/** Cancelled but still active until the period end. Informational. */
|
||||
export const EndingOwner: Story = story(
|
||||
{
|
||||
subscription: cancelled,
|
||||
isActiveSubscription: true,
|
||||
billingStatus: 'paid',
|
||||
subscriptionStatus: 'canceled'
|
||||
},
|
||||
owner
|
||||
)
|
||||
|
||||
/**
|
||||
* Reactivate is lifecycle-gated to the original owner, so a non-original owner
|
||||
* sees the notice read-only.
|
||||
*/
|
||||
export const EndingNonOriginalOwner: Story = story(
|
||||
{
|
||||
subscription: cancelled,
|
||||
isActiveSubscription: true,
|
||||
billingStatus: 'paid',
|
||||
subscriptionStatus: 'canceled'
|
||||
},
|
||||
{ canManageSubscriptionLifecycle: false }
|
||||
)
|
||||
@@ -0,0 +1,317 @@
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { render, screen } from '@testing-library/vue'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { computed } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
|
||||
import type {
|
||||
BillingStatus,
|
||||
WorkspaceType
|
||||
} from '@/platform/workspace/api/workspaceApi'
|
||||
import BillingStatusBanner from '@/platform/workspace/components/dialogs/settings/BillingStatusBanner.vue'
|
||||
|
||||
interface Subscription {
|
||||
hasFunds: boolean
|
||||
isCancelled: boolean
|
||||
endDate: string | null
|
||||
}
|
||||
|
||||
const state = vi.hoisted(() => ({
|
||||
billingControlEnabled: true,
|
||||
isActiveSubscription: true,
|
||||
isTeamPlan: true,
|
||||
billingStatus: 'paid' as string | null,
|
||||
subscription: {
|
||||
hasFunds: true,
|
||||
isCancelled: false,
|
||||
endDate: null
|
||||
} as Subscription | null,
|
||||
renewalDate: null as string | null,
|
||||
workspaceType: 'team' as string,
|
||||
canManageSubscription: true,
|
||||
canManageSubscriptionLifecycle: true,
|
||||
canTopUp: true,
|
||||
showTopUpCreditsDialog: vi.fn(),
|
||||
manageSubscription: vi.fn(),
|
||||
handleResubscribe: vi.fn()
|
||||
}))
|
||||
|
||||
vi.mock('@/platform/distribution/types', () => ({ isCloud: true }))
|
||||
|
||||
vi.mock('@/composables/useFeatureFlags', () => ({
|
||||
useFeatureFlags: () => ({
|
||||
flags: {
|
||||
get billingControlEnabled() {
|
||||
return state.billingControlEnabled
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/composables/billing/useBillingContext', () => ({
|
||||
useBillingContext: () => ({
|
||||
isActiveSubscription: computed(() => state.isActiveSubscription),
|
||||
isTeamPlan: computed(() => state.isTeamPlan),
|
||||
billingStatus: computed(() => state.billingStatus as BillingStatus | null),
|
||||
subscription: computed(() => state.subscription),
|
||||
renewalDate: computed(() => state.renewalDate),
|
||||
manageSubscription: state.manageSubscription
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
|
||||
useWorkspaceUI: () => ({
|
||||
permissions: computed(() => ({
|
||||
canManageSubscription: state.canManageSubscription,
|
||||
canManageSubscriptionLifecycle: state.canManageSubscriptionLifecycle,
|
||||
canTopUp: state.canTopUp
|
||||
})),
|
||||
workspaceType: computed(() => state.workspaceType as WorkspaceType)
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/platform/workspace/composables/useResubscribe', () => ({
|
||||
useResubscribe: () => ({
|
||||
isResubscribing: computed(() => false),
|
||||
handleResubscribe: state.handleResubscribe
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/services/dialogService', () => ({
|
||||
useDialogService: () => ({
|
||||
showTopUpCreditsDialog: state.showTopUpCreditsDialog
|
||||
})
|
||||
}))
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: 'en',
|
||||
messages: {
|
||||
en: {
|
||||
workspacePanel: {
|
||||
billingStatus: {
|
||||
warning: {
|
||||
title: 'Payment declined',
|
||||
body: "Your last payment didn't go through. Your subscription will pause on {date} unless payment is updated.",
|
||||
bodyNoDate:
|
||||
"Your last payment didn't go through. Update payment to avoid a pause."
|
||||
},
|
||||
paused: {
|
||||
title: 'Subscription paused',
|
||||
body: "This workspace's subscription is paused. Update payment to resume.",
|
||||
memberBody:
|
||||
"This workspace's subscription is paused. Your workspace admins need to update the payment method."
|
||||
},
|
||||
outOfCredits: {
|
||||
title: 'Out of credits',
|
||||
body: 'Your team has used all its credits. Add more credits to continue generating or wait until credits refill on {date}.',
|
||||
bodyNoDate:
|
||||
'Your team has used all its credits. Add more credits to continue generating.',
|
||||
memberBody:
|
||||
'Your team has used all its credits. Your workspace admins need to add more credits to continue generating.',
|
||||
addCredits: 'Add credits',
|
||||
dismiss: 'Dismiss'
|
||||
},
|
||||
ending: {
|
||||
title: 'Your team plan ends on {date}',
|
||||
body: 'Members keep full access until then. Reactivate to keep your shared credits and seats.',
|
||||
reactivate: 'Reactivate plan'
|
||||
},
|
||||
updatePayment: 'Update payment'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const globalOptions = {
|
||||
plugins: [i18n],
|
||||
stubs: {
|
||||
Button: {
|
||||
template:
|
||||
'<button v-bind="$attrs" @click="$emit(\'click\')"><slot/></button>',
|
||||
props: ['variant', 'size', 'loading'],
|
||||
emits: ['click']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderBanner() {
|
||||
return render(BillingStatusBanner, { global: globalOptions })
|
||||
}
|
||||
|
||||
function exhausted() {
|
||||
state.subscription = { hasFunds: false, isCancelled: false, endDate: null }
|
||||
}
|
||||
|
||||
// The spend gate folds billing_status into is_active, so the backend never emits
|
||||
// paused alongside an active subscription.
|
||||
function pausedState() {
|
||||
state.billingStatus = 'paused'
|
||||
state.isActiveSubscription = false
|
||||
}
|
||||
|
||||
function paymentFailedState() {
|
||||
state.billingStatus = 'payment_failed'
|
||||
state.isActiveSubscription = false
|
||||
}
|
||||
|
||||
describe('BillingStatusBanner', () => {
|
||||
beforeEach(() => {
|
||||
state.billingControlEnabled = true
|
||||
state.isActiveSubscription = true
|
||||
state.isTeamPlan = true
|
||||
state.billingStatus = 'paid'
|
||||
state.subscription = { hasFunds: true, isCancelled: false, endDate: null }
|
||||
state.renewalDate = null
|
||||
state.workspaceType = 'team'
|
||||
state.canManageSubscription = true
|
||||
state.canManageSubscriptionLifecycle = true
|
||||
state.canTopUp = true
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('renders nothing for a healthy funded team', () => {
|
||||
renderBanner()
|
||||
expect(screen.queryByRole('status')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders nothing when billing control is rolled back, even out of credits', () => {
|
||||
state.billingControlEnabled = false
|
||||
state.subscription = { hasFunds: false, isCancelled: false, endDate: null }
|
||||
renderBanner()
|
||||
expect(screen.queryByRole('status')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows out-of-credits with an Add credits action for owners', async () => {
|
||||
state.subscription = { hasFunds: false, isCancelled: false, endDate: null }
|
||||
renderBanner()
|
||||
|
||||
expect(screen.getByRole('status')).toHaveTextContent('Out of credits')
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Add credits' }))
|
||||
expect(state.showTopUpCreditsDialog).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('shows out-of-credits contact-admin copy without an Add credits action for members', () => {
|
||||
state.subscription = { hasFunds: false, isCancelled: false, endDate: null }
|
||||
state.canManageSubscription = false
|
||||
state.canTopUp = false
|
||||
renderBanner()
|
||||
|
||||
expect(screen.getByRole('status')).toHaveTextContent(
|
||||
'Your workspace admins need to add more credits'
|
||||
)
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'Add credits' })
|
||||
).not.toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('dismisses the out-of-credits banner for the session', async () => {
|
||||
exhausted()
|
||||
renderBanner()
|
||||
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
|
||||
expect(screen.queryByRole('status')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shares one dismiss across instances rather than tracking it per mount', async () => {
|
||||
exhausted()
|
||||
render(
|
||||
{
|
||||
components: { BillingStatusBanner },
|
||||
template: '<div><BillingStatusBanner /><BillingStatusBanner /></div>'
|
||||
},
|
||||
{ global: globalOptions }
|
||||
)
|
||||
|
||||
expect(screen.getAllByRole('status')).toHaveLength(2)
|
||||
await userEvent.click(screen.getAllByRole('button', { name: 'Dismiss' })[0])
|
||||
expect(screen.queryByRole('status')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows the paused banner with Update payment for owners', async () => {
|
||||
pausedState()
|
||||
renderBanner()
|
||||
|
||||
expect(screen.getByRole('status')).toHaveTextContent('Subscription paused')
|
||||
expect(screen.getByRole('status')).toHaveTextContent(
|
||||
'Update payment to resume'
|
||||
)
|
||||
await userEvent.click(
|
||||
screen.getByRole('button', { name: 'Update payment' })
|
||||
)
|
||||
expect(state.manageSubscription).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('shows the paused member notice without an action', () => {
|
||||
pausedState()
|
||||
state.canManageSubscription = false
|
||||
state.canTopUp = false
|
||||
renderBanner()
|
||||
|
||||
expect(screen.getByRole('status')).toHaveTextContent(
|
||||
'Your workspace admins need to update the payment method'
|
||||
)
|
||||
expect(screen.queryByRole('button')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows the payment-declined banner with Update payment for owners', () => {
|
||||
paymentFailedState()
|
||||
state.renewalDate = '2026-08-01T00:00:00Z'
|
||||
renderBanner()
|
||||
|
||||
expect(screen.getByRole('status')).toHaveTextContent('Payment declined')
|
||||
expect(screen.getByRole('status')).toHaveTextContent(/will pause on \S+/)
|
||||
expect(screen.getByRole('status')).not.toHaveTextContent('{date}')
|
||||
expect(
|
||||
screen.getByRole('button', { name: 'Update payment' })
|
||||
).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('falls back to the no-date payment-declined copy when there is no renewal date', () => {
|
||||
paymentFailedState()
|
||||
state.renewalDate = null
|
||||
renderBanner()
|
||||
|
||||
expect(screen.getByRole('status')).toHaveTextContent(
|
||||
'Update payment to avoid a pause'
|
||||
)
|
||||
expect(screen.getByRole('status')).not.toHaveTextContent('will pause on')
|
||||
expect(screen.getByRole('status')).not.toHaveTextContent('{date}')
|
||||
})
|
||||
|
||||
it('shows the ending banner with a Reactivate action', async () => {
|
||||
state.subscription = {
|
||||
hasFunds: true,
|
||||
isCancelled: true,
|
||||
endDate: '2026-08-01T00:00:00Z'
|
||||
}
|
||||
renderBanner()
|
||||
|
||||
expect(screen.getByRole('status')).toHaveTextContent(
|
||||
'Your team plan ends on'
|
||||
)
|
||||
await userEvent.click(
|
||||
screen.getByRole('button', { name: 'Reactivate plan' })
|
||||
)
|
||||
expect(state.handleResubscribe).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('shows the ending banner read-only to a non-original owner (Reactivate is lifecycle-gated)', () => {
|
||||
state.subscription = {
|
||||
hasFunds: true,
|
||||
isCancelled: true,
|
||||
endDate: '2026-08-01T00:00:00Z'
|
||||
}
|
||||
state.canManageSubscriptionLifecycle = false
|
||||
renderBanner()
|
||||
|
||||
expect(screen.getByRole('status')).toHaveTextContent(
|
||||
'Your team plan ends on'
|
||||
)
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'Reactivate plan' })
|
||||
).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div v-if="banner" class="@container">
|
||||
<div
|
||||
role="status"
|
||||
class="flex flex-col gap-3 rounded-2xl border border-interface-stroke/60 bg-base-background p-4 @2xl:flex-row @2xl:items-center @2xl:gap-2"
|
||||
>
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<i
|
||||
:class="
|
||||
cn(
|
||||
'size-4 shrink-0',
|
||||
banner.muted
|
||||
? 'icon-[lucide--circle-alert] text-muted-foreground'
|
||||
: 'icon-[lucide--triangle-alert] text-warning-background'
|
||||
)
|
||||
"
|
||||
/>
|
||||
<span class="text-sm text-base-foreground">{{ banner.title }}</span>
|
||||
</div>
|
||||
<p class="m-0 pl-6 text-sm text-muted-foreground">{{ banner.body }}</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="banner.dismissible || banner.action"
|
||||
class="flex shrink-0 flex-wrap items-center gap-2 pl-6 @2xl:pl-0"
|
||||
>
|
||||
<Button
|
||||
v-if="banner.dismissible"
|
||||
variant="textonly"
|
||||
size="lg"
|
||||
@click="dismiss"
|
||||
>
|
||||
{{ $t('workspacePanel.billingStatus.outOfCredits.dismiss') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-if="banner.action === 'addCredits'"
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
@click="handleAddCredits"
|
||||
>
|
||||
{{ $t('workspacePanel.billingStatus.outOfCredits.addCredits') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="banner.action === 'reactivate'"
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
:loading="isResubscribing"
|
||||
@click="handleResubscribe"
|
||||
>
|
||||
{{ $t('workspacePanel.billingStatus.ending.reactivate') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="banner.action === 'updatePayment'"
|
||||
variant="inverted"
|
||||
size="lg"
|
||||
@click="handleUpdatePayment"
|
||||
>
|
||||
{{ $t('workspacePanel.billingStatus.updatePayment') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@comfyorg/tailwind-utils'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import { useBillingContext } from '@/composables/billing/useBillingContext'
|
||||
import { useBillingBanner } from '@/platform/workspace/composables/useBillingBanner'
|
||||
import { useResubscribe } from '@/platform/workspace/composables/useResubscribe'
|
||||
import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
|
||||
import { useDialogService } from '@/services/dialogService'
|
||||
|
||||
type BannerAction = 'addCredits' | 'reactivate' | 'updatePayment'
|
||||
|
||||
const { t, d } = useI18n()
|
||||
const { renewalDate, subscription, manageSubscription } = useBillingContext()
|
||||
const { permissions } = useWorkspaceUI()
|
||||
const { kind, dismiss } = useBillingBanner()
|
||||
const { isResubscribing, handleResubscribe } = useResubscribe()
|
||||
const dialogService = useDialogService()
|
||||
|
||||
const canManage = computed(() => permissions.value.canManageSubscription)
|
||||
const canManageLifecycle = computed(
|
||||
() => permissions.value.canManageSubscriptionLifecycle
|
||||
)
|
||||
const canTopUp = computed(() => permissions.value.canTopUp)
|
||||
|
||||
const cycleResetDate = computed(() => {
|
||||
const raw = renewalDate.value
|
||||
return raw ? d(new Date(raw), { month: 'short', day: 'numeric' }) : ''
|
||||
})
|
||||
const planEndDate = computed(() => {
|
||||
const raw = subscription.value?.endDate
|
||||
return raw
|
||||
? d(new Date(raw), { year: 'numeric', month: 'long', day: 'numeric' })
|
||||
: ''
|
||||
})
|
||||
|
||||
interface BannerView {
|
||||
muted: boolean
|
||||
title: string
|
||||
body: string
|
||||
action: BannerAction | null
|
||||
dismissible: boolean
|
||||
}
|
||||
|
||||
const banner = computed<BannerView | null>(() => {
|
||||
const bs = 'workspacePanel.billingStatus'
|
||||
switch (kind.value) {
|
||||
case 'paused':
|
||||
return {
|
||||
muted: false,
|
||||
title: t(`${bs}.paused.title`),
|
||||
body: canManage.value
|
||||
? t(`${bs}.paused.body`)
|
||||
: t(`${bs}.paused.memberBody`),
|
||||
action: canManage.value ? 'updatePayment' : null,
|
||||
dismissible: false
|
||||
}
|
||||
case 'paymentFailed':
|
||||
return {
|
||||
muted: false,
|
||||
title: t(`${bs}.warning.title`),
|
||||
body: cycleResetDate.value
|
||||
? t(`${bs}.warning.body`, { date: cycleResetDate.value })
|
||||
: t(`${bs}.warning.bodyNoDate`),
|
||||
action: 'updatePayment',
|
||||
dismissible: false
|
||||
}
|
||||
case 'outOfCredits':
|
||||
return {
|
||||
muted: false,
|
||||
title: t(`${bs}.outOfCredits.title`),
|
||||
body: canTopUp.value
|
||||
? cycleResetDate.value
|
||||
? t(`${bs}.outOfCredits.body`, { date: cycleResetDate.value })
|
||||
: t(`${bs}.outOfCredits.bodyNoDate`)
|
||||
: t(`${bs}.outOfCredits.memberBody`),
|
||||
action: canTopUp.value ? 'addCredits' : null,
|
||||
dismissible: true
|
||||
}
|
||||
case 'ending':
|
||||
return {
|
||||
muted: true,
|
||||
title: t(`${bs}.ending.title`, { date: planEndDate.value }),
|
||||
body: t(`${bs}.ending.body`),
|
||||
action: canManageLifecycle.value ? 'reactivate' : null,
|
||||
dismissible: false
|
||||
}
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
function handleAddCredits() {
|
||||
void dialogService.showTopUpCreditsDialog()
|
||||
}
|
||||
function handleUpdatePayment() {
|
||||
void manageSubscription()
|
||||
}
|
||||
</script>
|
||||
@@ -65,6 +65,16 @@ vi.mock(
|
||||
})
|
||||
)
|
||||
|
||||
vi.mock(
|
||||
'@/platform/workspace/components/dialogs/settings/BillingStatusBanner.vue',
|
||||
() => ({
|
||||
default: {
|
||||
name: 'BillingStatusBanner',
|
||||
template: '<div data-testid="billing-banner" />'
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: 'en',
|
||||
@@ -93,6 +103,25 @@ function renderComponent() {
|
||||
})
|
||||
}
|
||||
|
||||
describe('WorkspacePanelContent billing banner', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockMembers.value = []
|
||||
mockWorkspaceType.value = 'team'
|
||||
})
|
||||
|
||||
it('hosts a single banner slot above the tab content, so it shows on every tab', () => {
|
||||
renderComponent()
|
||||
|
||||
const banner = screen.getByTestId('billing-banner')
|
||||
const planPanel = screen.getByText('workspacePanel.tabs.planCredits')
|
||||
expect(
|
||||
planPanel.compareDocumentPosition(banner) &
|
||||
Node.DOCUMENT_POSITION_FOLLOWING
|
||||
).toBeTruthy()
|
||||
})
|
||||
})
|
||||
|
||||
describe('WorkspacePanelContent members tab label', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
|
||||
@@ -41,6 +41,8 @@
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<BillingStatusBanner class="mt-4" />
|
||||
|
||||
<TabsContent value="plan" class="mt-4">
|
||||
<SubscriptionPanelContentWorkspace />
|
||||
</TabsContent>
|
||||
@@ -58,6 +60,7 @@ import { computed, onMounted, ref } from 'vue'
|
||||
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
|
||||
|
||||
import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfilePic.vue'
|
||||
import BillingStatusBanner from '@/platform/workspace/components/dialogs/settings/BillingStatusBanner.vue'
|
||||
import MembersPanelContent from '@/platform/workspace/components/dialogs/settings/MembersPanelContent.vue'
|
||||
import SubscriptionPanelContentWorkspace from '@/platform/workspace/components/SubscriptionPanelContentWorkspace.vue'
|
||||
import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
|
||||
|
||||
120
src/platform/workspace/composables/deriveBillingBanner.test.ts
Normal file
120
src/platform/workspace/composables/deriveBillingBanner.test.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import type { BillingBannerInputs } from './useBillingBanner'
|
||||
import { deriveBillingBanner } from './useBillingBanner'
|
||||
|
||||
const funded: BillingBannerInputs = {
|
||||
billingControlEnabled: true,
|
||||
isTeamPlan: true,
|
||||
isLoaded: true,
|
||||
isActiveSubscription: true,
|
||||
billingStatus: 'paid',
|
||||
hasFunds: true,
|
||||
isCancelled: false,
|
||||
endDate: null,
|
||||
canManage: true,
|
||||
outOfCreditsDismissed: false
|
||||
}
|
||||
|
||||
// The backend folds billing_status into is_active, so every spend-denying status
|
||||
// arrives paired with is_active=false. Pinning that pairing is what keeps these
|
||||
// cases honest — spreading `funded` instead would assert an input the backend
|
||||
// cannot emit, and pass no matter where the check sits.
|
||||
const paused: Partial<BillingBannerInputs> = {
|
||||
billingStatus: 'paused',
|
||||
isActiveSubscription: false
|
||||
}
|
||||
|
||||
const paymentFailed: Partial<BillingBannerInputs> = {
|
||||
billingStatus: 'payment_failed',
|
||||
isActiveSubscription: false
|
||||
}
|
||||
|
||||
function derive(overrides: Partial<BillingBannerInputs>) {
|
||||
return deriveBillingBanner({ ...funded, ...overrides })
|
||||
}
|
||||
|
||||
describe('deriveBillingBanner', () => {
|
||||
it('shows no banner for a healthy funded team', () => {
|
||||
expect(derive({})).toBeNull()
|
||||
})
|
||||
|
||||
it('shows no banner outside a team plan', () => {
|
||||
expect(derive({ isTeamPlan: false, hasFunds: false })).toBeNull()
|
||||
})
|
||||
|
||||
it('shows no banner when billing control is rolled back, even out of credits', () => {
|
||||
expect(derive({ billingControlEnabled: false, hasFunds: false })).toBeNull()
|
||||
})
|
||||
|
||||
it('shows no banner until the subscription snapshot has loaded', () => {
|
||||
expect(derive({ isLoaded: false, hasFunds: false })).toBeNull()
|
||||
})
|
||||
|
||||
it('surfaces out of credits when the balance is exhausted', () => {
|
||||
expect(derive({ hasFunds: false })).toBe('outOfCredits')
|
||||
})
|
||||
|
||||
it('shows out of credits to members too', () => {
|
||||
expect(derive({ hasFunds: false, canManage: false })).toBe('outOfCredits')
|
||||
})
|
||||
|
||||
it('hides out of credits once dismissed', () => {
|
||||
expect(derive({ hasFunds: false, outOfCreditsDismissed: true })).toBeNull()
|
||||
})
|
||||
|
||||
it('shows payment failed to owners even though the backend reports the plan inactive', () => {
|
||||
expect(derive(paymentFailed)).toBe('paymentFailed')
|
||||
})
|
||||
|
||||
it('prioritizes payment failure over out of credits for owners', () => {
|
||||
expect(derive({ ...paymentFailed, hasFunds: false })).toBe('paymentFailed')
|
||||
})
|
||||
|
||||
it('hides payment failed from members, who get the run-lock modal instead', () => {
|
||||
expect(derive({ ...paymentFailed, canManage: false })).toBeNull()
|
||||
})
|
||||
|
||||
it('prioritizes paused above everything, for owners and members', () => {
|
||||
expect(derive({ ...paused, hasFunds: false })).toBe('paused')
|
||||
expect(derive({ ...paused, canManage: false })).toBe('paused')
|
||||
})
|
||||
|
||||
it('shows paused even though the backend reports the workspace inactive', () => {
|
||||
expect(derive(paused)).toBe('paused')
|
||||
})
|
||||
|
||||
it('surfaces the ending banner for a cancelled-but-active owner', () => {
|
||||
expect(
|
||||
derive({
|
||||
isCancelled: true,
|
||||
endDate: '2026-08-01T00:00:00Z'
|
||||
})
|
||||
).toBe('ending')
|
||||
})
|
||||
|
||||
it('does not show the ending banner until the end date is populated', () => {
|
||||
expect(
|
||||
derive({
|
||||
isCancelled: true,
|
||||
endDate: null
|
||||
})
|
||||
).toBeNull()
|
||||
})
|
||||
|
||||
it('hides the ending banner from members', () => {
|
||||
expect(
|
||||
derive({
|
||||
isCancelled: true,
|
||||
endDate: '2026-08-01T00:00:00Z',
|
||||
canManage: false
|
||||
})
|
||||
).toBeNull()
|
||||
})
|
||||
|
||||
it('shows no banner for an inactive subscription (that is a run-lock modal)', () => {
|
||||
expect(
|
||||
derive({ isActiveSubscription: false, billingStatus: 'inactive' })
|
||||
).toBeNull()
|
||||
})
|
||||
})
|
||||
99
src/platform/workspace/composables/useBillingBanner.test.ts
Normal file
99
src/platform/workspace/composables/useBillingBanner.test.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
const mocks = vi.hoisted(() => ({
|
||||
billing: null as {
|
||||
isActiveSubscription: { value: boolean }
|
||||
isTeamPlan: { value: boolean }
|
||||
billingStatus: { value: string | null }
|
||||
subscription: { value: { hasFunds: boolean } | null }
|
||||
} | null,
|
||||
billingControlEnabled: null as { value: boolean } | null
|
||||
}))
|
||||
|
||||
vi.mock('@/platform/distribution/types', () => ({ isCloud: true }))
|
||||
|
||||
vi.mock('@/composables/useFeatureFlags', async () => {
|
||||
const { ref } = await import('vue')
|
||||
const billingControlEnabled = ref(true)
|
||||
mocks.billingControlEnabled = billingControlEnabled
|
||||
return {
|
||||
useFeatureFlags: () => ({
|
||||
flags: {
|
||||
get billingControlEnabled() {
|
||||
return billingControlEnabled.value
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('@/composables/billing/useBillingContext', async () => {
|
||||
const { ref } = await import('vue')
|
||||
const billing = {
|
||||
isActiveSubscription: ref(true),
|
||||
isTeamPlan: ref(true),
|
||||
billingStatus: ref<string | null>('paid'),
|
||||
subscription: ref<{ hasFunds: boolean } | null>({ hasFunds: true })
|
||||
}
|
||||
mocks.billing = billing
|
||||
return { useBillingContext: () => billing }
|
||||
})
|
||||
|
||||
vi.mock('@/platform/workspace/composables/useWorkspaceUI', async () => {
|
||||
const { computed } = await import('vue')
|
||||
return {
|
||||
useWorkspaceUI: () => ({
|
||||
permissions: computed(() => ({
|
||||
canManageSubscription: true,
|
||||
canManageSubscriptionLifecycle: true,
|
||||
canTopUp: true
|
||||
}))
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
import { useBillingBanner } from './useBillingBanner'
|
||||
|
||||
describe('useBillingBanner', () => {
|
||||
beforeEach(() => {
|
||||
const b = mocks.billing!
|
||||
b.isActiveSubscription.value = true
|
||||
b.isTeamPlan.value = true
|
||||
b.billingStatus.value = 'paid'
|
||||
b.subscription.value = { hasFunds: true }
|
||||
mocks.billingControlEnabled!.value = true
|
||||
})
|
||||
|
||||
it('suppresses the banner entirely when billing control is rolled back', async () => {
|
||||
const b = mocks.billing!
|
||||
const { kind } = useBillingBanner()
|
||||
|
||||
b.subscription.value = { hasFunds: false }
|
||||
await nextTick()
|
||||
expect(kind.value).toBe('outOfCredits')
|
||||
|
||||
mocks.billingControlEnabled!.value = false
|
||||
await nextTick()
|
||||
expect(kind.value).toBeNull()
|
||||
})
|
||||
|
||||
it('re-shows the out-of-credits banner after a top-up and a later exhaustion', async () => {
|
||||
const b = mocks.billing!
|
||||
const { kind, dismiss } = useBillingBanner()
|
||||
|
||||
b.subscription.value = { hasFunds: false }
|
||||
await nextTick()
|
||||
expect(kind.value).toBe('outOfCredits')
|
||||
|
||||
dismiss()
|
||||
await nextTick()
|
||||
expect(kind.value).toBeNull()
|
||||
|
||||
b.subscription.value = { hasFunds: true }
|
||||
await nextTick()
|
||||
b.subscription.value = { hasFunds: false }
|
||||
await nextTick()
|
||||
expect(kind.value).toBe('outOfCredits')
|
||||
})
|
||||
})
|
||||
106
src/platform/workspace/composables/useBillingBanner.ts
Normal file
106
src/platform/workspace/composables/useBillingBanner.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
import { createSharedComposable } from '@vueuse/core'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
import { useBillingContext } from '@/composables/billing/useBillingContext'
|
||||
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
import type { BillingStatus } from '@/platform/workspace/api/workspaceApi'
|
||||
import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
|
||||
|
||||
export type BillingBannerKind =
|
||||
| 'paused'
|
||||
| 'paymentFailed'
|
||||
| 'outOfCredits'
|
||||
| 'ending'
|
||||
|
||||
export interface BillingBannerInputs {
|
||||
billingControlEnabled: boolean
|
||||
isTeamPlan: boolean
|
||||
isLoaded: boolean
|
||||
isActiveSubscription: boolean
|
||||
billingStatus: BillingStatus | null
|
||||
hasFunds: boolean | null
|
||||
isCancelled: boolean
|
||||
endDate: string | null
|
||||
canManage: boolean
|
||||
outOfCreditsDismissed: boolean
|
||||
}
|
||||
|
||||
// The single billing banner slot, in priority order: paused > paymentFailed >
|
||||
// outOfCredits > ending. billingControlEnabled is the FE-1246 kill switch: the
|
||||
// whole banner is behind it so a PostHog rollback hides it for everyone. Then
|
||||
// gated on the team PLAN rather than the workspace type, because personal
|
||||
// workspaces are due to gain team plans (BE-1526) — a workspace-type gate would
|
||||
// then hide the banner from real team subscribers.
|
||||
export function deriveBillingBanner(
|
||||
inputs: BillingBannerInputs
|
||||
): BillingBannerKind | null {
|
||||
if (!inputs.billingControlEnabled || !inputs.isTeamPlan || !inputs.isLoaded) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Both sit above the isActiveSubscription gate because the backend folds
|
||||
// billing_status into is_active: paused and payment_failed each report
|
||||
// is_active=false, so either check would be dead code below it.
|
||||
if (inputs.billingStatus === 'paused') return 'paused'
|
||||
if (inputs.billingStatus === 'payment_failed' && inputs.canManage) {
|
||||
return 'paymentFailed'
|
||||
}
|
||||
|
||||
// Inactive workspaces surface a run-lock modal, not this banner. Members hit
|
||||
// this on payment_failed, which is per design — only billing managers see it.
|
||||
if (!inputs.isActiveSubscription) return null
|
||||
|
||||
if (inputs.hasFunds === false && !inputs.outOfCreditsDismissed) {
|
||||
return 'outOfCredits'
|
||||
}
|
||||
if (inputs.isCancelled && inputs.endDate && inputs.canManage) {
|
||||
return 'ending'
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
function useBillingBannerInternal() {
|
||||
const { isActiveSubscription, billingStatus, subscription, isTeamPlan } =
|
||||
useBillingContext()
|
||||
const { permissions } = useWorkspaceUI()
|
||||
const { flags } = useFeatureFlags()
|
||||
|
||||
const dismissed = ref(false)
|
||||
|
||||
const kind = computed<BillingBannerKind | null>(() => {
|
||||
if (!isCloud) return null
|
||||
return deriveBillingBanner({
|
||||
billingControlEnabled: flags.billingControlEnabled,
|
||||
isTeamPlan: isTeamPlan.value,
|
||||
isLoaded: subscription.value !== null,
|
||||
isActiveSubscription: isActiveSubscription.value,
|
||||
billingStatus: billingStatus.value,
|
||||
hasFunds: subscription.value?.hasFunds ?? null,
|
||||
isCancelled: subscription.value?.isCancelled ?? false,
|
||||
endDate: subscription.value?.endDate ?? null,
|
||||
canManage: permissions.value.canManageSubscription,
|
||||
outOfCreditsDismissed: dismissed.value
|
||||
})
|
||||
})
|
||||
|
||||
// Dismiss silences only the out-of-credits banner, and only for the current
|
||||
// exhaustion episode: reset once the workspace is funded again so a later
|
||||
// exhaustion re-shows. Shared state, so it survives the settings panel
|
||||
// unmounting when the dialog closes.
|
||||
const hasExhaustedFunds = computed(
|
||||
() => subscription.value?.hasFunds === false
|
||||
)
|
||||
watch(hasExhaustedFunds, (exhausted) => {
|
||||
if (!exhausted) dismissed.value = false
|
||||
})
|
||||
|
||||
function dismiss() {
|
||||
dismissed.value = true
|
||||
}
|
||||
|
||||
return { kind, dismiss }
|
||||
}
|
||||
|
||||
export const useBillingBanner = createSharedComposable(useBillingBannerInternal)
|
||||
257
src/platform/workspace/stores/partnerNodeGovernanceStore.test.ts
Normal file
257
src/platform/workspace/stores/partnerNodeGovernanceStore.test.ts
Normal file
@@ -0,0 +1,257 @@
|
||||
import { createTestingPinia } from '@pinia/testing'
|
||||
import { setActivePinia } from 'pinia'
|
||||
import { nextTick } from 'vue'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import type * as PartnerNodePolicyApi from '@/platform/workspace/api/partnerNodePolicyApi'
|
||||
import type { PartnerNodePolicy } from '@/platform/workspace/api/partnerNodePolicyApi'
|
||||
import { PartnerNodePolicyApiError } from '@/platform/workspace/api/partnerNodePolicyApi'
|
||||
import { usePartnerNodeGovernanceStore } from '@/platform/workspace/stores/partnerNodeGovernanceStore'
|
||||
import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
|
||||
import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
|
||||
import { useNodeDefStore } from '@/stores/nodeDefStore'
|
||||
|
||||
const mockGetPartnerNodePolicy = vi.hoisted(() => vi.fn())
|
||||
const mockFlags = vi.hoisted(() => ({
|
||||
teamWorkspacesEnabled: true,
|
||||
partnerNodeGovernanceEnabled: true
|
||||
}))
|
||||
|
||||
vi.mock('@/composables/useFeatureFlags', () => ({
|
||||
useFeatureFlags: () => ({ flags: mockFlags })
|
||||
}))
|
||||
|
||||
vi.mock(
|
||||
'@/platform/workspace/api/partnerNodePolicyApi',
|
||||
async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof PartnerNodePolicyApi>()
|
||||
return {
|
||||
...actual,
|
||||
getPartnerNodePolicy: mockGetPartnerNodePolicy
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function nodeDef(
|
||||
name: string,
|
||||
overrides: Partial<ComfyNodeDef> = {}
|
||||
): ComfyNodeDef {
|
||||
return {
|
||||
name,
|
||||
display_name: `Display ${name}`,
|
||||
category: 'partner/image/Provider',
|
||||
python_module: 'comfy_api_nodes.provider',
|
||||
description: '',
|
||||
input: {},
|
||||
output: [],
|
||||
output_is_list: [],
|
||||
output_name: [],
|
||||
output_node: false,
|
||||
api_node: true,
|
||||
...overrides
|
||||
}
|
||||
}
|
||||
|
||||
function activateWorkspace(id: string, type: 'personal' | 'team' = 'team') {
|
||||
const store = useTeamWorkspaceStore()
|
||||
store.workspaces = [
|
||||
{
|
||||
id,
|
||||
name: id,
|
||||
type,
|
||||
role: 'owner',
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
joined_at: '2026-01-01T00:00:00Z',
|
||||
isSubscribed: false,
|
||||
subscriptionPlan: null,
|
||||
subscriptionTier: null,
|
||||
members: [],
|
||||
pendingInvites: []
|
||||
}
|
||||
]
|
||||
store.activeWorkspaceId = id
|
||||
}
|
||||
|
||||
async function createLoadedStore() {
|
||||
const store = usePartnerNodeGovernanceStore()
|
||||
await vi.waitFor(() => expect(store.status).not.toBe('loading'))
|
||||
return store
|
||||
}
|
||||
|
||||
describe('partnerNodeGovernanceStore', () => {
|
||||
let store: ReturnType<typeof usePartnerNodeGovernanceStore> | undefined
|
||||
|
||||
beforeEach(() => {
|
||||
setActivePinia(createTestingPinia({ stubActions: false }))
|
||||
vi.clearAllMocks()
|
||||
mockFlags.teamWorkspacesEnabled = true
|
||||
mockFlags.partnerNodeGovernanceEnabled = true
|
||||
mockGetPartnerNodePolicy.mockResolvedValue(null)
|
||||
activateWorkspace('workspace-one')
|
||||
useNodeDefStore().updateNodeDefs([
|
||||
nodeDef('AllowedNode'),
|
||||
nodeDef('DisabledNode'),
|
||||
nodeDef('UnreviewedNode'),
|
||||
nodeDef('CoreNode', {
|
||||
api_node: false,
|
||||
category: 'sampling',
|
||||
python_module: 'nodes'
|
||||
})
|
||||
])
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
store?.$dispose()
|
||||
store = undefined
|
||||
})
|
||||
|
||||
it('composes partner-node catalog metadata from object info', async () => {
|
||||
useNodeDefStore().updateNodeDefs([
|
||||
nodeDef('PartnerNode', {
|
||||
display_name: 'Partner Node',
|
||||
category: 'partner/video/Acme'
|
||||
}),
|
||||
nodeDef('CoreNode', { api_node: false })
|
||||
])
|
||||
|
||||
store = await createLoadedStore()
|
||||
|
||||
expect(store.partnerNodes).toEqual([
|
||||
{ id: 'PartnerNode', name: 'Partner Node', provider: 'Acme' }
|
||||
])
|
||||
})
|
||||
|
||||
it('treats 404 as unconfigured and allows every node', async () => {
|
||||
store = await createLoadedStore()
|
||||
|
||||
expect(store.status).toBe('unconfigured')
|
||||
expect(store.isNodeDisabled('AllowedNode')).toBe(false)
|
||||
expect(store.isNodeDisabled('DisabledNode')).toBe(false)
|
||||
})
|
||||
|
||||
it('does not block nodes while enforcement is off', async () => {
|
||||
mockGetPartnerNodePolicy.mockResolvedValue({
|
||||
enforcementEnabled: false,
|
||||
nodes: { AllowedNode: true, DisabledNode: false }
|
||||
} satisfies PartnerNodePolicy)
|
||||
|
||||
store = await createLoadedStore()
|
||||
|
||||
expect(store.isNodeDisabled('AllowedNode')).toBe(false)
|
||||
expect(store.isNodeDisabled('DisabledNode')).toBe(false)
|
||||
})
|
||||
|
||||
it('allows only explicit true rules while enforcement is on', async () => {
|
||||
mockGetPartnerNodePolicy.mockResolvedValue({
|
||||
enforcementEnabled: true,
|
||||
nodes: { AllowedNode: true, DisabledNode: false }
|
||||
} satisfies PartnerNodePolicy)
|
||||
|
||||
store = await createLoadedStore()
|
||||
|
||||
expect(store.isNodeDisabled('AllowedNode')).toBe(false)
|
||||
expect(store.isNodeDisabled('DisabledNode')).toBe(true)
|
||||
expect(store.isNodeDisabled('UnreviewedNode')).toBe(true)
|
||||
expect(store.isNodeDisabled('CoreNode')).toBe(false)
|
||||
})
|
||||
|
||||
it('fails closed for a 503 from an enforcing workspace', async () => {
|
||||
mockGetPartnerNodePolicy.mockRejectedValue(
|
||||
new PartnerNodePolicyApiError(503, 'Service Unavailable')
|
||||
)
|
||||
|
||||
store = await createLoadedStore()
|
||||
|
||||
expect(store.status).toBe('unavailable')
|
||||
expect(store.isNodeDisabled('AllowedNode')).toBe(true)
|
||||
expect(store.isNodeDisabled('CoreNode')).toBe(false)
|
||||
})
|
||||
|
||||
it('stays fail-closed while retrying an unavailable policy', async () => {
|
||||
mockGetPartnerNodePolicy.mockRejectedValueOnce(
|
||||
new PartnerNodePolicyApiError(503, 'Service Unavailable')
|
||||
)
|
||||
store = await createLoadedStore()
|
||||
let rejectRetry!: (error: Error) => void
|
||||
mockGetPartnerNodePolicy.mockReturnValueOnce(
|
||||
new Promise((_, reject) => {
|
||||
rejectRetry = reject
|
||||
})
|
||||
)
|
||||
|
||||
const retry = store.loadPolicy()
|
||||
|
||||
expect(store.status).toBe('unavailable')
|
||||
expect(store.isNodeDisabled('AllowedNode')).toBe(true)
|
||||
rejectRetry(new Error('Network error'))
|
||||
await retry
|
||||
expect(store.status).toBe('unavailable')
|
||||
expect(store.isNodeDisabled('AllowedNode')).toBe(true)
|
||||
})
|
||||
|
||||
it('preserves the last enforcing policy after a generic refresh error', async () => {
|
||||
mockGetPartnerNodePolicy.mockResolvedValue({
|
||||
enforcementEnabled: true,
|
||||
nodes: { AllowedNode: true, DisabledNode: false }
|
||||
} satisfies PartnerNodePolicy)
|
||||
store = await createLoadedStore()
|
||||
mockGetPartnerNodePolicy.mockRejectedValue(new Error('Network error'))
|
||||
|
||||
await store.loadPolicy()
|
||||
|
||||
expect(store.status).toBe('error')
|
||||
expect(store.isNodeDisabled('AllowedNode')).toBe(false)
|
||||
expect(store.isNodeDisabled('DisabledNode')).toBe(true)
|
||||
})
|
||||
|
||||
it('stays inactive when partner-node governance is disabled', async () => {
|
||||
mockFlags.partnerNodeGovernanceEnabled = false
|
||||
|
||||
store = usePartnerNodeGovernanceStore()
|
||||
await nextTick()
|
||||
|
||||
expect(mockGetPartnerNodePolicy).not.toHaveBeenCalled()
|
||||
expect(store.status).toBe('inactive')
|
||||
expect(store.isNodeDisabled('DisabledNode')).toBe(false)
|
||||
})
|
||||
|
||||
it('stays inactive in a personal workspace', async () => {
|
||||
activateWorkspace('personal-workspace', 'personal')
|
||||
|
||||
store = usePartnerNodeGovernanceStore()
|
||||
await nextTick()
|
||||
|
||||
expect(mockGetPartnerNodePolicy).not.toHaveBeenCalled()
|
||||
expect(store.status).toBe('inactive')
|
||||
expect(store.isNodeDisabled('DisabledNode')).toBe(false)
|
||||
})
|
||||
|
||||
it('ignores a stale response after switching workspaces', async () => {
|
||||
let resolveFirst!: (policy: PartnerNodePolicy) => void
|
||||
mockGetPartnerNodePolicy
|
||||
.mockReturnValueOnce(
|
||||
new Promise((resolve) => {
|
||||
resolveFirst = resolve
|
||||
})
|
||||
)
|
||||
.mockResolvedValueOnce({
|
||||
enforcementEnabled: true,
|
||||
nodes: { DisabledNode: true }
|
||||
} satisfies PartnerNodePolicy)
|
||||
store = usePartnerNodeGovernanceStore()
|
||||
await vi.waitFor(() =>
|
||||
expect(mockGetPartnerNodePolicy).toHaveBeenCalledTimes(1)
|
||||
)
|
||||
|
||||
activateWorkspace('workspace-two')
|
||||
await vi.waitFor(() => expect(store?.status).toBe('configured'))
|
||||
resolveFirst({
|
||||
enforcementEnabled: true,
|
||||
nodes: { DisabledNode: false }
|
||||
})
|
||||
await nextTick()
|
||||
|
||||
expect(store.governedWorkspaceId).toBe('workspace-two')
|
||||
expect(store.isNodeDisabled('DisabledNode')).toBe(false)
|
||||
})
|
||||
})
|
||||
139
src/platform/workspace/stores/partnerNodeGovernanceStore.ts
Normal file
139
src/platform/workspace/stores/partnerNodeGovernanceStore.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { computed, ref, shallowRef, watch } from 'vue'
|
||||
|
||||
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
||||
import {
|
||||
getPartnerNodePolicy,
|
||||
PartnerNodePolicyApiError
|
||||
} from '@/platform/workspace/api/partnerNodePolicyApi'
|
||||
import type { PartnerNodePolicy } from '@/platform/workspace/api/partnerNodePolicyApi'
|
||||
import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
|
||||
import { useNodeDefStore } from '@/stores/nodeDefStore'
|
||||
|
||||
export interface PartnerNodeCatalogItem {
|
||||
id: string
|
||||
name: string
|
||||
provider: string
|
||||
}
|
||||
|
||||
export type PartnerNodePolicyStatus =
|
||||
| 'inactive'
|
||||
| 'loading'
|
||||
| 'unconfigured'
|
||||
| 'configured'
|
||||
| 'unavailable'
|
||||
| 'error'
|
||||
|
||||
export const usePartnerNodeGovernanceStore = defineStore(
|
||||
'partnerNodeGovernance',
|
||||
() => {
|
||||
const { flags } = useFeatureFlags()
|
||||
const workspaceStore = useTeamWorkspaceStore()
|
||||
const nodeDefStore = useNodeDefStore()
|
||||
|
||||
const policy = shallowRef<PartnerNodePolicy | null>(null)
|
||||
const policyWorkspaceId = ref<string | null>(null)
|
||||
const status = ref<PartnerNodePolicyStatus>('inactive')
|
||||
const error = shallowRef<Error | null>(null)
|
||||
let loadVersion = 0
|
||||
|
||||
const governedWorkspaceId = computed(() => {
|
||||
const workspace = workspaceStore.activeWorkspace
|
||||
return flags.teamWorkspacesEnabled &&
|
||||
flags.partnerNodeGovernanceEnabled &&
|
||||
workspace?.type === 'team'
|
||||
? workspace.id
|
||||
: null
|
||||
})
|
||||
|
||||
const partnerNodes = computed<PartnerNodeCatalogItem[]>(() =>
|
||||
Object.values(nodeDefStore.nodeDefsByName)
|
||||
.filter((nodeDef) => nodeDef.api_node)
|
||||
.map((nodeDef) => ({
|
||||
id: nodeDef.name,
|
||||
name: nodeDef.display_name || nodeDef.name,
|
||||
provider:
|
||||
nodeDef.category.split('/')[2] ||
|
||||
nodeDef.category ||
|
||||
nodeDef.python_module
|
||||
}))
|
||||
)
|
||||
|
||||
function isNodeDisabled(nodeType: string): boolean {
|
||||
if (!nodeDefStore.nodeDefsByName[nodeType]?.api_node) return false
|
||||
const workspaceId = governedWorkspaceId.value
|
||||
if (!workspaceId || policyWorkspaceId.value !== workspaceId) return false
|
||||
if (status.value === 'unavailable') return true
|
||||
return (
|
||||
policy.value?.enforcementEnabled === true &&
|
||||
policy.value.nodes[nodeType] !== true
|
||||
)
|
||||
}
|
||||
|
||||
async function loadPolicy(): Promise<void> {
|
||||
const workspaceId = governedWorkspaceId.value
|
||||
const version = ++loadVersion
|
||||
if (!workspaceId) {
|
||||
policy.value = null
|
||||
policyWorkspaceId.value = null
|
||||
status.value = 'inactive'
|
||||
error.value = null
|
||||
return
|
||||
}
|
||||
|
||||
const workspaceChanged = policyWorkspaceId.value !== workspaceId
|
||||
if (workspaceChanged) {
|
||||
policy.value = null
|
||||
policyWorkspaceId.value = workspaceId
|
||||
status.value = 'loading'
|
||||
} else if (status.value !== 'unavailable') {
|
||||
status.value = 'loading'
|
||||
}
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const nextPolicy = await getPartnerNodePolicy()
|
||||
if (
|
||||
version !== loadVersion ||
|
||||
governedWorkspaceId.value !== workspaceId
|
||||
) {
|
||||
return
|
||||
}
|
||||
policy.value = nextPolicy
|
||||
status.value = nextPolicy ? 'configured' : 'unconfigured'
|
||||
} catch (loadError) {
|
||||
if (
|
||||
version !== loadVersion ||
|
||||
governedWorkspaceId.value !== workspaceId
|
||||
) {
|
||||
return
|
||||
}
|
||||
error.value =
|
||||
loadError instanceof Error
|
||||
? loadError
|
||||
: new Error('Failed to load partner node policy')
|
||||
if (
|
||||
loadError instanceof PartnerNodePolicyApiError &&
|
||||
loadError.status === 503
|
||||
) {
|
||||
policy.value = null
|
||||
status.value = 'unavailable'
|
||||
return
|
||||
}
|
||||
if (status.value !== 'unavailable') status.value = 'error'
|
||||
}
|
||||
}
|
||||
|
||||
watch(governedWorkspaceId, () => void loadPolicy(), { immediate: true })
|
||||
|
||||
return {
|
||||
policy,
|
||||
status,
|
||||
error,
|
||||
governedWorkspaceId,
|
||||
partnerNodes,
|
||||
isNodeDisabled,
|
||||
loadPolicy
|
||||
}
|
||||
}
|
||||
)
|
||||
@@ -12,7 +12,7 @@ import { useExecutionErrorStore } from '@/stores/executionErrorStore'
|
||||
import { toNodeId } from '@/types/nodeId'
|
||||
|
||||
const billingMock = vi.hoisted(() => ({
|
||||
isActiveSubscription: true
|
||||
canRunWorkflows: true
|
||||
}))
|
||||
|
||||
const overlayMock = vi.hoisted(() => ({
|
||||
@@ -22,7 +22,7 @@ const overlayMock = vi.hoisted(() => ({
|
||||
|
||||
vi.mock('@/composables/billing/useBillingContext', () => ({
|
||||
useBillingContext: () => ({
|
||||
isActiveSubscription: billingMock.isActiveSubscription
|
||||
canRunWorkflows: billingMock.canRunWorkflows
|
||||
})
|
||||
}))
|
||||
|
||||
@@ -77,14 +77,14 @@ const nodeErrors: Record<string, NodeError> = {
|
||||
|
||||
function renderControls({
|
||||
hasError = false,
|
||||
isActiveSubscription = true,
|
||||
canRunWorkflows = true,
|
||||
mobile = false
|
||||
}: {
|
||||
hasError?: boolean
|
||||
isActiveSubscription?: boolean
|
||||
canRunWorkflows?: boolean
|
||||
mobile?: boolean
|
||||
} = {}) {
|
||||
billingMock.isActiveSubscription = isActiveSubscription
|
||||
billingMock.canRunWorkflows = canRunWorkflows
|
||||
|
||||
const pinia = createTestingPinia({
|
||||
createSpy: vi.fn,
|
||||
@@ -120,7 +120,7 @@ function renderControls({
|
||||
describe('LinearControls', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
billingMock.isActiveSubscription = true
|
||||
billingMock.canRunWorkflows = true
|
||||
overlayMock.overlayMessage = 'KSampler is missing a required input: model'
|
||||
overlayMock.overlayTitle = 'Required input missing'
|
||||
})
|
||||
@@ -187,7 +187,7 @@ describe('LinearControls', () => {
|
||||
({ mobile }) => {
|
||||
renderControls({
|
||||
hasError: true,
|
||||
isActiveSubscription: false,
|
||||
canRunWorkflows: false,
|
||||
mobile
|
||||
})
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
|
||||
import Popover from '@/components/ui/Popover.vue'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import { useBillingContext } from '@/composables/billing/useBillingContext'
|
||||
import FreeTierQuota from '@/platform/cloud/subscription/components/FreeTierQuota.vue'
|
||||
import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
@@ -28,7 +29,7 @@ const { t } = useI18n()
|
||||
const commandStore = useCommandStore()
|
||||
const { batchCount } = storeToRefs(useQueueSettingsStore())
|
||||
const settingStore = useSettingStore()
|
||||
const { isActiveSubscription } = useBillingContext()
|
||||
const { canRunWorkflows } = useBillingContext()
|
||||
const workflowStore = useWorkflowStore()
|
||||
const { isBuilderMode } = useAppMode()
|
||||
const appModeStore = useAppModeStore()
|
||||
@@ -54,7 +55,7 @@ const linearRunButtonTestId = 'linear-run-button'
|
||||
const showRunErrorWarning = computed(
|
||||
() =>
|
||||
hasAnyError.value &&
|
||||
toValue(isActiveSubscription) &&
|
||||
toValue(canRunWorkflows) &&
|
||||
toValue(overlayMessage).trim().length > 0
|
||||
)
|
||||
|
||||
@@ -152,10 +153,7 @@ function handleDragDrop() {
|
||||
class="border-t border-node-component-border p-4 pb-6"
|
||||
>
|
||||
<LinearRunErrorWarning v-if="showRunErrorWarning" />
|
||||
<SubscribeToRunButton
|
||||
v-if="!isActiveSubscription"
|
||||
class="mt-4 w-full"
|
||||
/>
|
||||
<SubscribeToRunButton v-if="!canRunWorkflows" class="mt-4 w-full" />
|
||||
<div v-else class="mt-4 flex">
|
||||
<PartnerNodesList mobile />
|
||||
<Popover side="top" @open-auto-focus.prevent>
|
||||
@@ -210,10 +208,7 @@ function handleDragDrop() {
|
||||
:max="settingStore.get('Comfy.QueueButton.BatchCountLimit')"
|
||||
class="h-7 min-w-40"
|
||||
/>
|
||||
<SubscribeToRunButton
|
||||
v-if="!isActiveSubscription"
|
||||
class="mt-4 w-full"
|
||||
/>
|
||||
<SubscribeToRunButton v-if="!canRunWorkflows" class="mt-4 w-full" />
|
||||
<Button
|
||||
v-else
|
||||
variant="primary"
|
||||
@@ -229,6 +224,7 @@ function handleDragDrop() {
|
||||
<i aria-hidden="true" class="icon-[lucide--play]" />
|
||||
{{ t('menu.run') }}
|
||||
</Button>
|
||||
<FreeTierQuota />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,33 +4,17 @@ import {
|
||||
CollapsibleRoot,
|
||||
CollapsibleTrigger
|
||||
} from 'reka-ui'
|
||||
import { computed, toValue } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import Popover from '@/components/ui/Popover.vue'
|
||||
import { usePriceBadge } from '@/composables/node/usePriceBadge'
|
||||
import { useCreditsBadgesInGraph } from '@/composables/node/usePriceBadge'
|
||||
import PartnerNodeItem from '@/renderer/extensions/linearMode/PartnerNodeItem.vue'
|
||||
import { trackNodePrice } from '@/renderer/extensions/vueNodes/composables/usePartitionedBadges'
|
||||
import { app } from '@/scripts/app'
|
||||
import { mapAllNodes } from '@/utils/graphTraversalUtil'
|
||||
|
||||
defineProps<{ mobile?: boolean }>()
|
||||
|
||||
const { isCreditsBadge } = usePriceBadge()
|
||||
const creditsBadges = useCreditsBadgesInGraph()
|
||||
const { t } = useI18n()
|
||||
|
||||
const creditsBadges = computed(() =>
|
||||
mapAllNodes(app.graph, (node) => {
|
||||
if (node.isSubgraphNode()) return
|
||||
|
||||
const priceBadge = node.badges.find(isCreditsBadge)
|
||||
if (!priceBadge) return
|
||||
|
||||
trackNodePrice(node)
|
||||
return [node.title, toValue(priceBadge).text, node.id] as const
|
||||
})
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<Popover v-if="mobile && creditsBadges.length" side="top">
|
||||
|
||||
@@ -24,6 +24,7 @@ import { snapPoint } from '@/lib/litegraph/src/measure'
|
||||
import type { Vector2 } from '@/lib/litegraph/src/litegraph'
|
||||
import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
|
||||
import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
|
||||
import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
@@ -1813,6 +1814,7 @@ export class ComfyApp {
|
||||
isPartialExecution
|
||||
})
|
||||
}
|
||||
useFreeTierQuota().trackRun()
|
||||
this.canvas.draw(true, true)
|
||||
await this.ui.queue.update()
|
||||
}
|
||||
|
||||
123
src/services/dialogService.topUpCredits.test.ts
Normal file
123
src/services/dialogService.topUpCredits.test.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* showTopUpCreditsDialog must route team members (who cannot top up) to the
|
||||
* read-only contact-admin notice instead of the purchase dialog, while
|
||||
* owners/personal/legacy users keep the purchase flow.
|
||||
*/
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
const showDialog = vi.hoisted(() => vi.fn())
|
||||
const closeDialog = vi.hoisted(() => vi.fn())
|
||||
const state = vi.hoisted(() => ({
|
||||
isActiveSubscription: true,
|
||||
isFreeTier: false,
|
||||
type: 'workspace' as 'workspace' | 'legacy',
|
||||
canTopUp: true
|
||||
}))
|
||||
|
||||
vi.mock('@/stores/dialogStore', () => ({
|
||||
useDialogStore: () => ({ showDialog, closeDialog })
|
||||
}))
|
||||
|
||||
vi.mock('@/i18n', () => ({
|
||||
t: (key: string) => key
|
||||
}))
|
||||
|
||||
vi.mock('@/platform/telemetry', () => ({
|
||||
useTelemetry: () => ({ trackEvent: vi.fn() })
|
||||
}))
|
||||
|
||||
vi.mock('@/platform/distribution/types', () => ({
|
||||
isCloud: true
|
||||
}))
|
||||
|
||||
vi.mock('@/composables/billing/useBillingContext', () => ({
|
||||
useBillingContext: () => ({
|
||||
isActiveSubscription: { value: state.isActiveSubscription },
|
||||
isFreeTier: { value: state.isFreeTier },
|
||||
type: { value: state.type }
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
|
||||
useWorkspaceUI: () => ({
|
||||
permissions: { value: { canTopUp: state.canTopUp } }
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/platform/updates/common/toastStore', () => ({
|
||||
useToastStore: () => ({ add: vi.fn() })
|
||||
}))
|
||||
|
||||
const showSubscriptionDialog = vi.hoisted(() => vi.fn())
|
||||
|
||||
vi.mock(
|
||||
'@/platform/cloud/subscription/composables/useSubscriptionDialog',
|
||||
() => ({
|
||||
useSubscriptionDialog: () => ({ show: showSubscriptionDialog })
|
||||
})
|
||||
)
|
||||
|
||||
import { useDialogService } from '@/services/dialogService'
|
||||
|
||||
describe('showTopUpCreditsDialog', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
state.isActiveSubscription = true
|
||||
state.isFreeTier = false
|
||||
state.type = 'workspace'
|
||||
state.canTopUp = true
|
||||
})
|
||||
|
||||
it('shows the purchase dialog to users who can top up', async () => {
|
||||
await useDialogService().showTopUpCreditsDialog({
|
||||
isInsufficientCredits: true
|
||||
})
|
||||
|
||||
const [args] = showDialog.mock.calls[0]
|
||||
expect(args.key).toBe('top-up-credits')
|
||||
})
|
||||
|
||||
it('shows the contact-admin notice to team members instead of the purchase dialog', async () => {
|
||||
state.canTopUp = false
|
||||
|
||||
await useDialogService().showTopUpCreditsDialog({
|
||||
isInsufficientCredits: true
|
||||
})
|
||||
|
||||
const [args] = showDialog.mock.calls[0]
|
||||
expect(args.key).toBe('insufficient-credits-member')
|
||||
// The member notice draws its own header + close button, so it must open
|
||||
// headless or Reka wraps it in duplicate chrome.
|
||||
expect(args.dialogComponentProps.headless).toBe(true)
|
||||
expect(args.dialogComponentProps.renderer).toBe('reka')
|
||||
|
||||
args.props.onClose()
|
||||
expect(closeDialog).toHaveBeenCalledWith({
|
||||
key: 'insufficient-credits-member'
|
||||
})
|
||||
})
|
||||
|
||||
it('ignores workspace permissions on legacy billing', async () => {
|
||||
state.type = 'legacy'
|
||||
state.canTopUp = false
|
||||
|
||||
await useDialogService().showTopUpCreditsDialog()
|
||||
|
||||
const [args] = showDialog.mock.calls[0]
|
||||
expect(args.key).toBe('top-up-credits')
|
||||
})
|
||||
|
||||
it('routes a member of an inactive team to the subscription-required flow, not the credits notice', async () => {
|
||||
state.isActiveSubscription = false
|
||||
state.canTopUp = false
|
||||
|
||||
await useDialogService().showTopUpCreditsDialog({
|
||||
isInsufficientCredits: true
|
||||
})
|
||||
|
||||
expect(showSubscriptionDialog).toHaveBeenCalledWith({
|
||||
reason: 'out_of_credits'
|
||||
})
|
||||
expect(showDialog).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
@@ -5,7 +5,9 @@ import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationD
|
||||
import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
|
||||
import PromptDialogContent from '@/components/dialog/content/PromptDialogContent.vue'
|
||||
import TopUpCreditsDialogContentLegacy from '@/components/dialog/content/TopUpCreditsDialogContentLegacy.vue'
|
||||
import InsufficientCreditsMemberDialog from '@/platform/workspace/components/InsufficientCreditsMemberDialog.vue'
|
||||
import TopUpCreditsDialogContentWorkspace from '@/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue'
|
||||
import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
|
||||
import { t } from '@/i18n'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
@@ -339,6 +341,28 @@ export const useDialogService = () => {
|
||||
return
|
||||
}
|
||||
|
||||
// Members can't top up a team workspace, so they get a read-only
|
||||
// "ask your workspace admins" notice instead of the purchase dialog.
|
||||
if (
|
||||
type.value === 'workspace' &&
|
||||
!useWorkspaceUI().permissions.value.canTopUp
|
||||
) {
|
||||
return dialogStore.showDialog({
|
||||
key: 'insufficient-credits-member',
|
||||
component: InsufficientCreditsMemberDialog,
|
||||
props: {
|
||||
onClose: () =>
|
||||
dialogStore.closeDialog({ key: 'insufficient-credits-member' })
|
||||
},
|
||||
dialogComponentProps: {
|
||||
renderer: 'reka',
|
||||
headless: true,
|
||||
contentClass:
|
||||
'w-[min(360px,95vw)] max-w-[min(360px,95vw)] sm:max-w-[min(360px,95vw)] border-0 bg-transparent shadow-none'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const component =
|
||||
type.value === 'workspace'
|
||||
? TopUpCreditsDialogContentWorkspace
|
||||
|
||||
@@ -2,14 +2,42 @@ import { computed, ref } from 'vue'
|
||||
|
||||
import type { BillingContext } from '@/composables/billing/types'
|
||||
|
||||
type Subscription = BillingContext['subscription']['value']
|
||||
|
||||
/** The billing state a story wants the stub to report. */
|
||||
export interface BillingContextMockState {
|
||||
subscription: Subscription
|
||||
isActiveSubscription: boolean
|
||||
isTeamPlan: boolean
|
||||
billingStatus: BillingContext['billingStatus']['value']
|
||||
subscriptionStatus: BillingContext['subscriptionStatus']['value']
|
||||
renewalDate: string | null
|
||||
}
|
||||
|
||||
const defaultState: BillingContextMockState = {
|
||||
subscription: null,
|
||||
isActiveSubscription: false,
|
||||
isTeamPlan: false,
|
||||
billingStatus: null,
|
||||
subscriptionStatus: null,
|
||||
renewalDate: null
|
||||
}
|
||||
|
||||
const state = ref<BillingContextMockState>({ ...defaultState })
|
||||
|
||||
/** Drives the stub from a story's `beforeEach`. */
|
||||
export function setBillingContextMock(next: Partial<BillingContextMockState>) {
|
||||
state.value = { ...defaultState, ...next }
|
||||
}
|
||||
|
||||
/**
|
||||
* Storybook mock for `useBillingContext`.
|
||||
*
|
||||
* The real facade lazily instantiates the legacy billing adapter, which pulls
|
||||
* in Firebase auth (`setPersistence`) and crashes in the Storybook environment
|
||||
* (no Firebase). This static stub lets presentational billing components — e.g.
|
||||
* UnifiedPricingTable — render against their `TIER_PRICING` / DES-197 fallbacks
|
||||
* without any network or auth.
|
||||
* (no Firebase). This stub lets billing components — e.g. UnifiedPricingTable,
|
||||
* BillingStatusBanner — render without any network or auth. It defaults to the
|
||||
* unsubscribed state; call `setBillingContextMock` to drive a specific one.
|
||||
*
|
||||
* Typed against `BillingContext` so the stub stays in lockstep with the real
|
||||
* composable's return shape: drifted or removed keys fail to compile.
|
||||
@@ -18,7 +46,7 @@ export function useBillingContext(): BillingContext {
|
||||
return {
|
||||
type: computed(() => 'legacy' as const),
|
||||
isInitialized: ref(true),
|
||||
subscription: computed(() => null),
|
||||
subscription: computed(() => state.value.subscription),
|
||||
balance: computed(() => null),
|
||||
plans: computed(() => []),
|
||||
currentPlanSlug: computed(() => null),
|
||||
@@ -26,13 +54,15 @@ export function useBillingContext(): BillingContext {
|
||||
currentTeamCreditStop: computed(() => null),
|
||||
isLoading: ref(false),
|
||||
error: ref<string | null>(null),
|
||||
isActiveSubscription: computed(() => false),
|
||||
isActiveSubscription: computed(() => state.value.isActiveSubscription),
|
||||
canRunWorkflows: computed(() => state.value.isActiveSubscription),
|
||||
isFreeTier: computed(() => false),
|
||||
isLegacyTeamPlan: computed(() => false),
|
||||
billingStatus: computed(() => null),
|
||||
subscriptionStatus: computed(() => null),
|
||||
isTeamPlan: computed(() => state.value.isTeamPlan),
|
||||
billingStatus: computed(() => state.value.billingStatus),
|
||||
subscriptionStatus: computed(() => state.value.subscriptionStatus),
|
||||
tier: computed(() => null),
|
||||
renewalDate: computed(() => null),
|
||||
renewalDate: computed(() => state.value.renewalDate),
|
||||
getMaxSeats: (tierKey: string) => ({ creator: 5, pro: 20 })[tierKey] ?? 1,
|
||||
initialize: async () => {},
|
||||
fetchStatus: async () => {},
|
||||
|
||||
@@ -26,14 +26,14 @@ export enum ServerFeatureFlag {
|
||||
COMFYHUB_PROFILE_GATE_ENABLED = 'comfyhub_profile_gate_enabled',
|
||||
SHOW_SIGNIN_BUTTON = 'show_signin_button',
|
||||
UNIFIED_CLOUD_AUTH = 'unified_cloud_auth',
|
||||
CONSOLIDATED_BILLING_ENABLED = 'consolidated_billing_enabled'
|
||||
BILLING_CONTROL_ENABLED = 'billing_control_enabled'
|
||||
}
|
||||
|
||||
export function useFeatureFlags() {
|
||||
return {
|
||||
flags: {
|
||||
teamWorkspacesEnabled: true,
|
||||
consolidatedBillingEnabled: true
|
||||
billingControlEnabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
45
src/storybook/mocks/useWorkspaceUI.ts
Normal file
45
src/storybook/mocks/useWorkspaceUI.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import type { WorkspaceType } from '@/platform/workspace/api/workspaceApi'
|
||||
|
||||
/** The workspace role/permission state a story wants the stub to report. */
|
||||
export interface WorkspaceUIMockState {
|
||||
workspaceType: WorkspaceType
|
||||
canManageSubscription: boolean
|
||||
canManageSubscriptionLifecycle: boolean
|
||||
canTopUp: boolean
|
||||
}
|
||||
|
||||
const defaultState: WorkspaceUIMockState = {
|
||||
workspaceType: 'team',
|
||||
canManageSubscription: true,
|
||||
canManageSubscriptionLifecycle: true,
|
||||
canTopUp: true
|
||||
}
|
||||
|
||||
const state = ref<WorkspaceUIMockState>({ ...defaultState })
|
||||
|
||||
/** Drives the stub from a story's `beforeEach`. */
|
||||
export function setWorkspaceUIMock(next: Partial<WorkspaceUIMockState>) {
|
||||
state.value = { ...defaultState, ...next }
|
||||
}
|
||||
|
||||
/**
|
||||
* Storybook mock for `useWorkspaceUI`.
|
||||
*
|
||||
* The real composable derives permissions from `useCurrentUser` (Firebase auth)
|
||||
* and the team workspace store, neither of which is available in Storybook. This
|
||||
* stub exposes only the role surface the billing banner reads; add keys here as
|
||||
* other stories need them.
|
||||
*/
|
||||
export function useWorkspaceUI() {
|
||||
return {
|
||||
workspaceType: computed(() => state.value.workspaceType),
|
||||
permissions: computed(() => ({
|
||||
canManageSubscription: state.value.canManageSubscription,
|
||||
canManageSubscriptionLifecycle:
|
||||
state.value.canManageSubscriptionLifecycle,
|
||||
canTopUp: state.value.canTopUp
|
||||
}))
|
||||
}
|
||||
}
|
||||
@@ -126,7 +126,7 @@ describe('useManagerState', () => {
|
||||
})
|
||||
|
||||
describe('managerUIState property', () => {
|
||||
it('should return DISABLED state when no manager flags are present', () => {
|
||||
it('should return DISABLED state when --enable-manager is NOT present', () => {
|
||||
systemStatsStore.$patch({
|
||||
systemStats: systemStatsFixture(['python', 'main.py']),
|
||||
isInitialized: true
|
||||
@@ -141,6 +141,7 @@ describe('useManagerState', () => {
|
||||
systemStats: systemStatsFixture([
|
||||
'python',
|
||||
'main.py',
|
||||
'--enable-manager',
|
||||
'--enable-manager-legacy-ui'
|
||||
]),
|
||||
isInitialized: true
|
||||
|
||||
@@ -67,14 +67,22 @@ export function useManagerState() {
|
||||
'extension.manager.supports_csrf_post'
|
||||
)
|
||||
|
||||
const argv = systemStats.value?.system?.argv
|
||||
if (argv?.includes('--enable-manager-legacy-ui')) {
|
||||
return ManagerUIState.LEGACY_UI
|
||||
}
|
||||
if (!argv?.includes('--enable-manager')) {
|
||||
// Check command line args first (highest priority)
|
||||
// --enable-manager flag enables the manager (opposite of old --disable-manager)
|
||||
const hasEnableManager =
|
||||
systemStats.value?.system?.argv?.includes('--enable-manager')
|
||||
|
||||
// If --enable-manager is NOT present, manager is disabled
|
||||
if (!hasEnableManager) {
|
||||
return ManagerUIState.DISABLED
|
||||
}
|
||||
|
||||
if (
|
||||
systemStats.value?.system?.argv?.includes('--enable-manager-legacy-ui')
|
||||
) {
|
||||
return ManagerUIState.LEGACY_UI
|
||||
}
|
||||
|
||||
// Server exposes v4 but is missing the CSRF-hardened POST endpoints
|
||||
// (Manager < 4.2.1). Treat as INCOMPATIBLE — hide manager UI and
|
||||
// prompt user to upgrade. csrf_post is an independent axis from v4.
|
||||
|
||||
Reference in New Issue
Block a user