From f2aea9c8234907fef1a4f8ac2a0aba765ca02547 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sat, 1 Nov 2025 02:40:17 -0700
Subject: [PATCH] fix: Display appropriate title for unsubscribed state (#6396)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Fixes misleading title display in unsubscribed state of the
SubscriptionPanel.

### Changes Made

- **Conditional Title Logic**: Added state-aware title display in
`SubscriptionPanel.vue`
- **New Translation Key**: Added `subscription.titleUnsubscribed` →
"Subscribe to Comfy Cloud"
- **Prevents Confusion**: Eliminates "account created" or other
inappropriate messages showing as titles

### Behavior

- **Subscribed Users**: See "Subscription" (existing behavior)
- **Unsubscribed Users**: See "Subscribe to Comfy Cloud" (new, clearer
messaging)

### Testing

- ✅ All existing SubscriptionPanel tests pass
- ✅ TypeScript compilation successful
- ✅ Linting passes
- ✅ Follows translation patterns

### Context

This addresses the UX issue discovered on testcloud.comfy.org where
unsubscribed users were seeing misleading title text instead of clear
subscription prompts.

🤖 Generated with [Claude Code](https://claude.ai/code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6396-fix-Display-appropriate-title-for-unsubscribed-state-29c6d73d3650818a8136f6a99e312651)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/locales/en/main.json                                    | 1 +
 .../cloud/subscription/components/SubscriptionPanel.vue     | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 59728f162..11cbfa380 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1655,6 +1655,7 @@
   },
   "subscription": {
     "title": "Subscription",
+    "titleUnsubscribed": "Subscribe to Comfy Cloud",
     "comfyCloud": "Comfy Cloud",
     "beta": "BETA",
     "perMonth": "USD / month",
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index 7e81c5ac1..47346d21e 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -3,7 +3,11 @@
     <div class="flex h-full flex-col gap-6">
       <div class="flex items-baseline gap-2">
         <span class="text-2xl font-inter font-semibold leading-tight">
-          {{ $t('subscription.title') }}
+          {{
+            isActiveSubscription
+              ? $t('subscription.title')
+              : $t('subscription.titleUnsubscribed')
+          }}
         </span>
         <CloudBadge
           reverse-order