feat(settings): prototype plans-in-settings section for local Plan & Credits

Author: comfydesigner

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

@@ -1,25 +1,52 @@
 <template>
-  <div class="credits-container flex h-full flex-col gap-4">
-    <div>
+  <div
+    :class="
+      cn(
+        'credits-container flex flex-col gap-4',
+        embedded ? 'shrink-0' : 'h-full'
+      )
+    "
+  >
+    <div v-if="!embedded">
       <h2 class="mb-2 text-2xl font-bold">
         {{ $t('credits.credits') }}
       </h2>
       <Divider />
     </div>
 
-    <CreditsTile />
+    <div v-if="embedded" class="rounded-2xl border border-interface-stroke p-6">
+      <div class="mb-4 flex items-center justify-between">
+        <h3 class="m-0 text-base font-semibold">
+          {{ $t('credits.workspaceCredits') }}
+        </h3>
+        <Button
+          variant="secondary"
+          size="lg"
+          @click="handleCreditsHistoryClick"
+        >
+          {{ $t('subscription.manageBilling') }}
+        </Button>
+      </div>
+      <CreditsTile class="max-w-md" />
+    </div>
+    <CreditsTile v-else />
 
-    <div class="flex items-center justify-between">
+    <div v-if="!embedded" class="flex items-center justify-between">
       <h3 class="m-0">{{ $t('credits.activity') }}</h3>
       <Button variant="muted-textonly" @click="handleCreditsHistoryClick">
         <i class="pi pi-arrow-up-right" />
         {{ $t('credits.invoiceHistory') }}
       </Button>
     </div>
 
-    <UsageLogsTable ref="usageLogsTableRef" />
+    <UsageLogsTable v-if="!embedded" ref="usageLogsTableRef" />
 
-    <div class="flex flex-row gap-2">
+    <SubscriptionFooterLinks
+      v-if="embedded && showFooterLinks"
+      class="mt-auto"
+      :show-invoice-history="false"
+    />
+    <div v-else-if="!embedded" class="flex flex-row gap-2">
       <Button variant="muted-textonly" @click="handleFaqClick">
         <i class="pi pi-question-circle" />
         {{ $t('credits.faqs') }}
@@ -38,17 +65,24 @@
 
 <script setup lang="ts">
 import Divider from 'primevue/divider'
+import { cn } from '@comfyorg/tailwind-utils'
 import { ref, watch } from 'vue'
 
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import Button from '@/components/ui/button/Button.vue'
+import SubscriptionFooterLinks from '@/platform/cloud/subscription/components/SubscriptionFooterLinks.vue'
 import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import CreditsTile from '@/platform/cloud/subscription/components/CreditsTile.vue'
 import { useTelemetry } from '@/platform/telemetry'
 import { useAuthStore } from '@/stores/authStore'
 import { useCommandStore } from '@/stores/commandStore'
 
+const { embedded = false, showFooterLinks = true } = defineProps<{
+  embedded?: boolean
+  showFooterLinks?: boolean
+}>()
+
 const { buildDocsUrl, docsPaths } = useExternalLink()
 const authStore = useAuthStore()
 const authActions = useAuthActions()

src/locales/en/main.json

@@ -2623,8 +2623,46 @@
     },
     "personalDataConsentRequired": "You must agree to the processing of your personal data."
   },
+  "settingsPlans": {
+    "title": "Plans",
+    "subtitle": "Plans run on Comfy Cloud and their credits work on this install too.",
+    "personal": "Personal",
+    "teams": "Teams",
+    "billedYearlyToggle": "Billed yearly",
+    "billedYearlyTotal": "{total} billed yearly",
+    "billedMonthly": "Billed monthly",
+    "creditsAYear": "{credits} credits a year",
+    "creditsAMonth": "{credits} credits a month",
+    "perDollar": "{credits} per dollar",
+    "whatsIncluded": "What's included:",
+    "everythingInPlus": "Everything in {tier}, plus:",
+    "choosePlan": "Choose {tier}",
+    "teamTitle": "Team Plan",
+    "teamSubtitle": "Choose your own monthly credit subscription. Get a larger discount with a larger credit subscription.",
+    "creditsPerMonth": "{credits} credits per month",
+    "subscribeTeamYearly": "Subscribe to Team Yearly",
+    "subscribeTeam": "Subscribe to Team",
+    "detailsTitle": "Details",
+    "everythingInProPlus": "Everything in Pro, plus:",
+    "perkInviteMembers": "Invite team members",
+    "perkConcurrentRuns": "Members can run workflows concurrently",
+    "perkSharedCreditPool": "Shared credit pool for all members",
+    "perkRolePermissions": "Role-based permissions",
+    "comingSoonLabel": "Coming soon:",
+    "comingSharedWorkflows": "Shared workflows & assets",
+    "comingProjects": "Projects",
+    "enterpriseLabel": "Enterprise",
+    "enterpriseCopy": "Need more members? Looking for more flexibility or custom features?",
+    "contactUs": "Contact us",
+    "checkoutCaption": "Checkout happens right here: payment details handled securely by Stripe. Prefer no plan? Keep topping up, anytime.",
+    "benefitRuntimeStandard": "30 minute max workflow runtime",
+    "benefitAddCredits": "Add more credits anytime",
+    "benefitImportModels": "Import your own models",
+    "benefitRuntimePro": "Longer workflow runtime (up to 1 hr)"
+  },
   "credits": {
     "activity": "Activity",
+    "workspaceCredits": "Workspace credits",
     "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.",

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

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flex items-center justify-between border-t border-interface-stroke pt-3"
-  >
+  <div class="flex items-center justify-between pt-3 pb-6">
     <div class="flex gap-2">
       <Button
         variant="muted-textonly"

src/platform/workspace/components/dialogs/settings/PlanCreditsPanelContent.test.ts

@@ -8,12 +8,29 @@ import enMessages from '@/locales/en/main.json'
 
 import PlanCreditsPanelContent from './PlanCreditsPanelContent.vue'
 
+const mockDistribution = vi.hoisted(() => ({ cloud: true }))
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockDistribution.cloud
+  }
+}))
+
 const refreshSpy = vi.hoisted(() => vi.fn(() => Promise.resolve()))
 
 const stubs = {
   SubscriptionPanelContentWorkspace: {
     template: '<div data-testid="credits-body" />'
   },
+  CreditsPanel: {
+    props: ['embedded'],
+    template: '<div data-testid="legacy-credits-body" />'
+  },
+  SettingsPlansSection: {
+    template: '<div data-testid="plans-section" />'
+  },
+  SubscriptionFooterLinks: {
+    template: '<div data-testid="footer-links" />'
+  },
   UsageLogsTable: {
     template: '<div data-testid="usage-logs" />',
     methods: {
@@ -22,7 +39,8 @@ const stubs = {
   }
 }
 
-function renderPanel() {
+function renderPanel({ cloud = true } = {}) {
+  mockDistribution.cloud = cloud
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -40,7 +58,16 @@ describe('PlanCreditsPanelContent', () => {
     expect(screen.queryByTestId('usage-logs')).toBeNull()
   })
 
+  it('shows the embedded credits body and plans section on local', () => {
+    renderPanel({ cloud: false })
+    expect(screen.getByTestId('legacy-credits-body')).toBeTruthy()
+    expect(screen.getByTestId('plans-section')).toBeTruthy()
+    expect(screen.getByTestId('footer-links')).toBeTruthy()
+    expect(screen.queryByTestId('credits-body')).toBeNull()
+  })
+
   it('loads the usage log on the Activity tab', async () => {
+    refreshSpy.mockClear()
     renderPanel()
 
     await userEvent.click(screen.getByRole('button', { name: 'Activity' }))
@@ -51,6 +78,7 @@ describe('PlanCreditsPanelContent', () => {
 
   it('reports usage-log refresh failures', async () => {
     const error = new Error('refresh failed')
+    refreshSpy.mockClear()
     refreshSpy.mockRejectedValueOnce(error)
     const consoleError = vi
       .spyOn(console, 'error')

src/platform/workspace/components/dialogs/settings/PlanCreditsPanelContent.vue

@@ -16,32 +16,63 @@
       </div>
     </div>
 
-    <SubscriptionPanelContentWorkspace v-if="activeView === 'overview'" />
-    <UsageLogsTable v-else ref="usageLogsTable" />
+    <template v-if="activeView === 'overview'">
+      <SubscriptionPanelContentWorkspace v-if="isCloud" />
+      <div v-else class="flex min-h-0 flex-1 flex-col gap-8 overflow-y-auto">
+        <CreditsPanel embedded :show-footer-links="false" />
+        <SettingsPlansSection />
+        <SubscriptionFooterLinks
+          class="shrink-0"
+          :show-invoice-history="false"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <UsageLogsTable ref="usageLogsTable" />
+      <div class="flex items-center pt-3 pb-6">
+        <Button
+          variant="muted-textonly"
+          class="text-xs text-text-secondary"
+          @click="openFullActivity"
+        >
+          {{ $t('workspacePanel.activity.fullActivity') }}
+          <i class="pi pi-external-link text-xs text-text-secondary" />
+        </Button>
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import CreditsPanel from '@/components/dialog/content/setting/CreditsPanel.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
+import SubscriptionFooterLinks from '@/platform/cloud/subscription/components/SubscriptionFooterLinks.vue'
+import { isCloud } from '@/platform/distribution/types'
 import SubscriptionPanelContentWorkspace from '@/platform/workspace/components/SubscriptionPanelContentWorkspace.vue'
+import SettingsPlansSection from '@/platform/workspace/components/dialogs/settings/SettingsPlansSection.vue'
 
 type View = 'overview' | 'activity'
 
 const { t } = useI18n()
 
-// The owner-only Invoices tab is added by FE-1245, which owns the
-// next-invoice banner + Stripe portal link that fill it.
 const tabs = computed<{ key: View; label: string }[]>(() => [
   { key: 'overview', label: t('workspacePanel.planCredits.tabs.overview') },
   { key: 'activity', label: t('workspacePanel.planCredits.tabs.activity') }
 ])
 
 const activeView = ref<View>('overview')
 
+const fullActivityUrl = `${getComfyPlatformBaseUrl()}/profile/usage`
+
+function openFullActivity() {
+  window.open(fullActivityUrl, '_blank', 'noopener,noreferrer')
+}
+
 const usageLogsTable = useTemplateRef('usageLogsTable')
 watch(usageLogsTable, (table) => {
   table?.refresh().catch((error) => {