From 3e97225ff6666ea9c40c1c1fba81f7d366fcfe00 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Fri, 12 Dec 2025 14:40:07 -0800
Subject: [PATCH] Feat: Separate Subscription management and Upgrade options
 (#7419)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Manage Subscription vs Upgrade Plan

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7419-Feat-Separate-Subscription-management-and-Upgrade-options-2c76d73d36508191a16dd3a25817826f)
by [Unito](https://www.unito.io)
---
 src/locales/en/main.json                      |  1 +
 .../components/SubscriptionPanel.vue          | 26 +++++++++++++++++--
 .../components/SubscriptionPanel.test.ts      |  8 ++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 58107e929..8e7041fa5 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2012,6 +2012,7 @@
     "videoEstimateHelp": "What is this?",
     "videoEstimateExplanation": "These estimates are based on the Wan Fun Control template for 5-second videos.",
     "videoEstimateTryTemplate": "Try the Wan Fun Control template →",
+    "upgradePlan": "Upgrade Plan",
     "upgradeTo": "Upgrade to {plan}",
     "changeTo": "Change to {plan}",
     "credits": {
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index c09029fca..49fbb103c 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -18,7 +18,7 @@
       <div class="grow overflow-auto">
         <div class="rounded-2xl border border-interface-stroke p-6">
           <div>
-            <div class="flex items-center justify-between">
+            <div class="flex items-center justify-between gap-2">
               <div class="flex flex-col gap-2">
                 <div class="text-sm font-bold text-text-primary">
                   {{ subscriptionTierName }}
@@ -49,11 +49,30 @@
                   </template>
                 </div>
               </div>
+
               <Button
                 v-if="isActiveSubscription"
                 :label="$t('subscription.manageSubscription')"
                 severity="secondary"
-                class="bg-interface-menu-component-surface-selected"
+                class="ml-auto bg-interface-menu-component-surface-selected"
+                :pt="{
+                  root: {
+                    style: 'border-radius: 8px; padding: 8px 16px;'
+                  },
+                  label: {
+                    class: 'text-sm font-normal text-text-primary'
+                  }
+                }"
+                @click="
+                  async () => {
+                    await authActions.accessBillingPortal()
+                  }
+                "
+              />
+              <Button
+                v-if="isActiveSubscription"
+                :label="$t('subscription.upgradePlan')"
+                severity="primary"
                 :pt="{
                   root: {
                     style: 'border-radius: 8px; padding: 8px 16px;'
@@ -64,6 +83,7 @@
                 }"
                 @click="showSubscriptionDialog"
               />
+
               <SubscribeButton
                 v-else
                 :label="$t('subscription.subscribeNow')"
@@ -334,6 +354,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
@@ -358,6 +379,7 @@ type TierKey = (typeof TIER_TO_I18N_KEY)[SubscriptionTier]
 const DEFAULT_TIER_KEY: TierKey = 'standard'
 
 const { buildDocsUrl } = useExternalLink()
+const authActions = useFirebaseAuthActions()
 const { t } = useI18n()
 
 const {
diff --git a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
index 03db5fad2..2c6f9c04a 100644
--- a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
@@ -75,6 +75,14 @@ vi.mock(
   })
 )
 
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: vi.fn(() => ({
+    authActions: vi.fn(() => ({
+      accessBillingPortal: vi.fn()
+    }))
+  }))
+}))
+
 // Create i18n instance for testing
 const i18n = createI18n({
   legacy: false,