mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 12:42:01 +00:00
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)
This commit is contained in:
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user