Feat: Separate Subscription management and Upgrade options (#7419)

## 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

@@ -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": {

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 {

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,