feat: add ever-present upgrade button for free-tier users (#9315)

## Summary Add persistent upgrade CTAs for free-tier users: a topbar button and "Upgrade to add credits" replacing "Add Credits" in popovers and settings panels. ## Changes - **What**: - New `TopbarSubscribeButton` component in both GraphCanvas and LinearView topbars, visible only to free-tier users - Profile popover (legacy + workspace): free-tier users see "Upgrade to add credits" instead of "Add Credits", linking directly to the pricing table - Manage Plan settings (legacy + workspace): same replacement — free-tier users see "Upgrade to add credits" instead of "Add Credits" - Paid-tier users retain the original "Add Credits" behavior in all locations - All upgrade buttons go directly to the pricing table (one-step flow) ## Review Focus - The `isFreeTier` conditional gating on the buttons — ensure free-tier users see upgrade CTAs and paid users see normal Add Credits - Layout in Manage Plan panels uses `flex flex-col gap-3` to stack the upgrade button below the usage history link instead of side-by-side ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9315-feat-add-ever-present-upgrade-button-for-free-tier-users-3166d73d365081228cdfe6a67fec6aec) by [Unito](https://www.unito.io)
2026-03-05 05:00:03 +00:00 · 2026-02-28 23:07:12 -05:00
parent 7c8a548798
commit 589f58f916
12 changed files with 118 additions and 30 deletions
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -634,6 +634,10 @@
  }
 }

+@utility bg-subscription-gradient {
+  background: var(--color-subscription-button-gradient);
+}
+
@utility highlight {
  background-color: color-mix(in srgb, currentColor 20%, transparent);
  font-weight: 700;
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -18,6 +18,7 @@
        >
          <WorkflowTabs />
          <TopbarBadges />
+          <TopbarSubscribeButton />
        </div>
      </div>
    </template>
@@ -140,6 +141,7 @@ import NodePropertiesPanel from '@/components/rightSidePanel/RightSidePanel.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
--- a/src/components/topbar/CurrentUserPopoverLegacy.vue
+++ b/src/components/topbar/CurrentUserPopoverLegacy.vue
@@ -46,6 +46,16 @@
        class="icon-[lucide--circle-help] cursor-help text-base text-muted-foreground mr-auto"
      />
      <Button
+        v-if="isFreeTier"
+        variant="gradient"
+        size="sm"
+        data-testid="upgrade-to-add-credits-button"
+        @click="handleUpgradeToAddCredits"
+      >
+        {{ $t('subscription.upgradeToAddCredits') }}
+      </Button>
+      <Button
+        v-else
        variant="secondary"
        size="sm"
        class="text-base-foreground"
@@ -61,7 +71,7 @@
        :fluid="false"
        :label="$t('subscription.subscribeToComfyCloud')"
        size="sm"
-        variant="gradient"
+        button-variant="gradient"
        @subscribed="handleSubscribed"
      />
    </div>
@@ -170,6 +180,7 @@ const settingsDialog = useSettingsDialog()
 const dialogService = useDialogService()
 const {
  isActiveSubscription,
+  isFreeTier,
  subscriptionTierName,
  subscriptionTier,
  fetchStatus
@@ -237,6 +248,11 @@ const handleOpenPartnerNodesInfo = () => {
  emit('close')
 }

+const handleUpgradeToAddCredits = () => {
+  subscriptionDialog.showPricingTable()
+  emit('close')
+}
+
 const handleLogout = async () => {
  await handleSignOut()
  emit('close')
--- a/src/components/topbar/TopbarSubscribeButton.vue
+++ b/src/components/topbar/TopbarSubscribeButton.vue
@@ -0,0 +1,25 @@
+<template>
+  <Button
+    v-if="isFreeTier"
+    class="mr-2 shrink-0 whitespace-nowrap"
+    variant="gradient"
+    size="sm"
+    data-testid="topbar-subscribe-button"
+    @click="handleClick"
+  >
+    {{ $t('subscription.subscribeForMore') }}
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+
+const { isFreeTier } = useBillingContext()
+const subscriptionDialog = useSubscriptionDialog()
+
+function handleClick() {
+  subscriptionDialog.showPricingTable()
+}
+</script>
--- a/src/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -19,7 +19,9 @@ export const buttonVariants = cva({
        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover',
      'destructive-textonly':
        'text-destructive-background bg-transparent hover:bg-destructive-background/10',
-      'overlay-white': 'bg-white text-gray-600 hover:bg-white/90'
+      'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
+      gradient:
+        'bg-subscription-gradient text-white border-transparent hover:opacity-90'
    },
    size: {
      sm: 'h-6 rounded-sm px-2 py-1 text-xs',
@@ -47,7 +49,8 @@ const variants = [
  'textonly',
  'muted-textonly',
  'destructive-textonly',
-  'overlay-white'
+  'overlay-white',
+  'gradient'
 ] as const satisfies Array<ButtonVariants['variant']>
 const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
  ButtonVariants['size']
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2292,6 +2292,8 @@
    },
    "subscribeToRun": "Subscribe",
    "subscribeToRunFull": "Subscribe to Run",
+    "subscribeForMore": "Upgrade",
+    "upgradeToAddCredits": "Upgrade to add credits",
    "subscribeNow": "Subscribe Now",
    "subscribeToComfyCloud": "Subscribe to Comfy Cloud",
    "workspaceNotSubscribed": "This workspace is not on a subscription",
--- a/src/platform/cloud/subscription/components/SubscribeButton.vue
+++ b/src/platform/cloud/subscription/components/SubscribeButton.vue
@@ -2,15 +2,7 @@
  <Button
    :size
    :disabled="disabled"
-    variant="primary"
-    :style="
-      variant === 'gradient'
-        ? {
-            background: 'var(--color-subscription-button-gradient)',
-            color: 'var(--color-white)'
-          }
-        : undefined
-    "
+    :variant="buttonVariant === 'gradient' ? 'gradient' : 'primary'"
    :class="cn('font-bold', fluid && 'w-full')"
    @click="handleSubscribe"
  >
@@ -31,13 +23,13 @@ import { cn } from '@/utils/tailwindUtil'
 const {
  size = 'lg',
  fluid = true,
-  variant = 'default',
+  buttonVariant = 'default',
  label,
  disabled = false
 } = defineProps<{
  label?: string
  size?: 'sm' | 'lg'
-  variant?: 'default' | 'gradient'
+  buttonVariant?: 'default' | 'gradient'
  fluid?: boolean
  disabled?: boolean
 }>()
--- a/src/platform/cloud/subscription/components/SubscribeToRun.vue
+++ b/src/platform/cloud/subscription/components/SubscribeToRun.vue
@@ -5,13 +5,8 @@
      showDelay: 600
    }"
    class="subscribe-to-run-button whitespace-nowrap"
-    variant="primary"
+    variant="gradient"
    size="sm"
-    :style="{
-      background: 'var(--color-subscription-button-gradient)',
-      color: 'var(--color-white)',
-      borderColor: 'transparent'
-    }"
    data-testid="subscribe-to-run-button"
    @click="handleSubscribeToRun"
  >
--- a/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
@@ -130,17 +130,25 @@
                </tbody>
              </table>

-              <div class="flex items-center justify-between">
+              <div class="flex flex-col gap-3">
                <a
                  href="https://platform.comfy.org/profile/usage"
                  target="_blank"
                  rel="noopener noreferrer"
-                  class="text-sm underline text-center text-muted"
+                  class="text-sm underline text-muted"
                >
                  {{ $t('subscription.viewUsageHistory') }}
                </a>
                <Button
-                  v-if="isActiveSubscription"
+                  v-if="isActiveSubscription && isFreeTier"
+                  variant="gradient"
+                  class="p-2 min-h-8 rounded-lg text-sm font-normal w-full"
+                  @click="handleUpgradeToAddCredits"
+                >
+                  {{ $t('subscription.upgradeToAddCredits') }}
+                </Button>
+                <Button
+                  v-else-if="isActiveSubscription"
                  variant="secondary"
                  class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
                  @click="handleAddApiCredits"
@@ -234,7 +242,8 @@ const {
  isYearlySubscription
 } = useSubscription()

-const { show: showSubscriptionDialog } = useSubscriptionDialog()
+const { show: showSubscriptionDialog, showPricingTable } =
+  useSubscriptionDialog()

 const tierKey = computed(() => {
  const tier = subscriptionTier.value
@@ -296,6 +305,10 @@ const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =

 const { handleAddApiCredits, handleRefresh } = useSubscriptionActions()

+function handleUpgradeToAddCredits() {
+  showPricingTable()
+}
+
 // Focus-based polling: refresh balance when user returns from Stripe checkout
 const PENDING_TOPUP_KEY = 'pending_topup_timestamp'
 const TOPUP_EXPIRY_MS = 5 * 60 * 1000 // 5 minutes
--- a/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
+++ b/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
@@ -72,9 +72,19 @@
        v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
        class="icon-[lucide--circle-help] mr-auto cursor-help text-base text-muted-foreground"
      />
-      <!-- Add Credits (subscribed + personal or workspace owner only) -->
+      <!-- Upgrade to add credits (free tier) -->
      <Button
-        v-if="isActiveSubscription && permissions.canTopUp"
+        v-if="isActiveSubscription && permissions.canTopUp && isFreeTier"
+        variant="gradient"
+        size="sm"
+        data-testid="upgrade-to-add-credits-button"
+        @click="handleUpgradeToAddCredits"
+      >
+        {{ $t('subscription.upgradeToAddCredits') }}
+      </Button>
+      <!-- Add Credits (subscribed + personal or workspace owner only, paid tier) -->
+      <Button
+        v-else-if="isActiveSubscription && permissions.canTopUp"
        variant="secondary"
        size="sm"
        class="text-base-foreground"
@@ -93,7 +103,7 @@
            : $t('workspaceSwitcher.subscribe')
        "
        size="sm"
-        variant="gradient"
+        button-variant="gradient"
      />
      <Button
        v-if="showSubscribeAction && !isPersonalWorkspace"
@@ -242,8 +252,14 @@ const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
  useCurrentUser()
 const settingsDialog = useSettingsDialog()
 const dialogService = useDialogService()
-const { isActiveSubscription, subscription, balance, isLoading, fetchBalance } =
-  useBillingContext()
+const {
+  isActiveSubscription,
+  isFreeTier,
+  subscription,
+  balance,
+  isLoading,
+  fetchBalance
+} = useBillingContext()

 const isCancelled = computed(() => subscription.value?.isCancelled ?? false)
 const subscriptionDialog = useSubscriptionDialog()
@@ -310,6 +326,11 @@ const handleOpenPlanAndCreditsSettings = () => {
  emit('close')
 }

+const handleUpgradeToAddCredits = () => {
+  subscriptionDialog.showPricingTable()
+  emit('close')
+}
+
 const handleTopUp = () => {
  // Track purchase credits entry from avatar popover
  useTelemetry()?.trackAddApiCreditButtonClicked()
--- a/src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue
@@ -252,9 +252,18 @@
                    !showZeroState &&
                    permissions.canTopUp
                  "
-                  class="flex items-center justify-between"
+                  class="flex flex-col gap-3"
                >
                  <Button
+                    v-if="isFreeTierPlan"
+                    variant="gradient"
+                    class="p-2 min-h-8 rounded-lg text-sm font-normal w-full"
+                    @click="handleUpgradeToAddCredits"
+                  >
+                    {{ $t('subscription.upgradeToAddCredits') }}
+                  </Button>
+                  <Button
+                    v-else
                    variant="secondary"
                    class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
                    @click="handleAddApiCredits"
@@ -464,6 +473,10 @@ function handleSubscribeWorkspace() {
 function handleUpgrade() {
  isFreeTierPlan.value ? showPricingTable() : showSubscriptionDialog()
 }
+
+function handleUpgradeToAddCredits() {
+  showPricingTable()
+}
 const subscriptionTier = computed(() => subscription.value?.tier ?? null)
 const isYearlySubscription = computed(
  () => subscription.value?.duration === 'ANNUAL'
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -11,6 +11,7 @@ import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import TypeformPopoverButton from '@/components/ui/TypeformPopoverButton.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -82,6 +83,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
      <div class="flex h-full items-center">
        <WorkflowTabs />
        <TopbarBadges />
+        <TopbarSubscribeButton />
      </div>
    </div>
    <div