subscription page

Author: jtydhr88

public/assets/images/cloud-subscription.webm

@@ -34,7 +34,8 @@
             )
           "
         />
-        <ComfyQueueButton />
+        <SubscribeToRun v-if="!activeSubscription" />
+        <ComfyQueueButton v-else />
       </div>
     </Panel>
   </div>
@@ -49,14 +50,48 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
-
+import type { Component } from 'vue'
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
+
+import { isCloud } from '@/platform/distribution/types'
 import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
+const activeSubscription = ref(false)
+const SubscribeToRun: Component | null = isCloud
+  ? defineAsyncComponent(
+      () =>
+        import(
+          '../../platform/cloud/subscription/components/SubscribeToRun.vue'
+        )
+    )
+  : null
+
+if (isCloud) {
+  void import('@/platform/cloud/subscription/composables/useSubscription').then(
+    ({ useSubscription }) => {
+      const { isActiveSubscription } = useSubscription()
+      watch(
+        isActiveSubscription,
+        (value) => {
+          activeSubscription.value = value
+        },
+        { immediate: true }
+      )
+    }
+  )
+}
+
 const settingsStore = useSettingStore()
 
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))

src/components/actionbar/ComfyActionbar.vue

@@ -1,20 +1,39 @@
 <template>
-  <div class="flex items-center gap-2 bg-comfy-menu-secondary px-3">
+  <div
+    class="flex items-center gap-2 bg-comfy-menu-secondary"
+    :class="[{ 'flex-row-reverse': reverseOrder }, noPadding ? '' : 'px-3']"
+  >
     <div
       v-if="badge.label"
       class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
+      :class="labelClass"
     >
       {{ badge.label }}
     </div>
-    <div class="font-inter text-sm font-extrabold text-slate-100">
+    <div
+      class="font-inter text-sm font-extrabold text-slate-100"
+      :class="textClass"
+    >
       {{ badge.text }}
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import type { TopbarBadge } from '@/types/comfy'
 
-defineProps<{
-  badge: TopbarBadge
-}>()
+withDefaults(
+  defineProps<{
+    badge: TopbarBadge
+    reverseOrder?: boolean
+    noPadding?: boolean
+    labelClass?: string
+    textClass?: string
+  }>(),
+  {
+    reverseOrder: false,
+    noPadding: false,
+    labelClass: '',
+    textClass: ''
+  }
+)
 </script>

src/components/topbar/TopbarBadge.vue

@@ -4,6 +4,10 @@
       v-for="badge in topbarBadgeStore.badges"
       :key="badge.text"
       :badge
+      :reverse-order="reverseOrder"
+      :no-padding="noPadding"
+      :label-class="labelClass"
+      :text-class="textClass"
     />
   </div>
 </template>
@@ -13,5 +17,20 @@ import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
 
 import TopbarBadge from './TopbarBadge.vue'
 
+withDefaults(
+  defineProps<{
+    reverseOrder?: boolean
+    noPadding?: boolean
+    labelClass?: string
+    textClass?: string
+  }>(),
+  {
+    reverseOrder: false,
+    noPadding: false,
+    labelClass: '',
+    textClass: ''
+  }
+)
+
 const topbarBadgeStore = useTopbarBadgeStore()
 </script>

src/components/topbar/TopbarBadges.vue

@@ -157,6 +157,7 @@ export const useFirebaseAuthActions = () => {
     signUpWithEmail,
     updatePassword,
     deleteAccount,
-    accessError
+    accessError,
+    reportError
   }
 }

src/composables/auth/useFirebaseAuthActions.ts

@@ -0,0 +1,27 @@
+import { watch } from 'vue'
+
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
+import { useExtensionService } from '@/services/extensionService'
+
+useExtensionService().registerExtension({
+  name: 'Comfy.CloudSubscription',
+
+  setup: isCloud
+    ? async () => {
+        const { isLoggedIn } = useCurrentUser()
+        const { requireActiveSubscription } = useSubscription()
+
+        const checkSubscriptionStatus = () => {
+          if (!isLoggedIn.value) return
+
+          void requireActiveSubscription()
+        }
+
+        watch(() => isLoggedIn.value, checkSubscriptionStatus, {
+          immediate: true
+        })
+      }
+    : undefined
+})

src/extensions/core/cloudSubscription.ts

@@ -26,4 +26,5 @@ import './widgetInputs'
 
 if (isCloud) {
   import('./cloudBadge')
+  import('./cloudSubscription')
 }

src/extensions/core/index.ts

@@ -1774,6 +1774,8 @@
     "failedToInitiateCreditPurchase": "Failed to initiate credit purchase: {error}",
     "failedToAccessBillingPortal": "Failed to access billing portal: {error}",
     "failedToPurchaseCredits": "Failed to purchase credits: {error}",
+    "failedToFetchSubscription": "Failed to fetch subscription status: {error}",
+    "failedToInitiateSubscription": "Failed to initiate subscription: {error}",
     "unauthorizedDomain": "Your domain {domain} is not authorized to use this service. Please contact {email} to add your domain to the whitelist.",
     "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
     "nothingSelected": "Nothing selected",
@@ -1914,6 +1916,34 @@
     "added": "Added",
     "accountInitialized": "Account initialized"
   },
+  "subscription": {
+    "title": "Subscription",
+    "comfyCloud": "Comfy Cloud",
+    "beta": "BETA",
+    "perMonth": "USD / month",
+    "renewsDate": "Renews {date}",
+    "manageSubscription": "Manage subscription",
+    "apiNodesBalance": "\"API Nodes\" Credit Balance",
+    "apiNodesDescription": "For running commercial/proprietary models",
+    "totalCredits": "Total credits",
+    "viewUsageHistory": "View usage history",
+    "addApiCredits": "Add API credits",
+    "yourPlanIncludes": "Your plan includes:",
+    "viewMoreDetails": "View more details",
+    "learnMore": "Learn more",
+    "messageSupport": "Message support",
+    "invoiceHistory": "Invoice history",
+    "benefits": {
+      "benefit1": "$10 in monthly credits for API models — top up when needed",
+      "benefit2": "Up to 30 min runtime per job"
+    },
+    "required": {
+        "title": "Subscribe to",
+      "waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
+      "subscribe": "Subscribe"
+    },
+    "subscribeToRun": "Subscribe to Run"
+  },
   "userSettings": {
     "title": "User Settings",
     "name": "Name",

src/locales/en/main.json

@@ -0,0 +1,23 @@
+<template>
+  <Button
+    v-tooltip.bottom="{
+      value: $t('subscription.subscribeToRun'),
+      showDelay: 600
+    }"
+    class="subscribe-to-run-button"
+    :label="$t('subscription.subscribeToRun')"
+    icon="pi pi-lock"
+    severity="primary"
+    size="small"
+    data-testid="subscribe-to-run-button"
+    @click="showSubscriptionDialog"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+
+const { showSubscriptionDialog } = useSubscription()
+</script>

src/platform/cloud/subscription/components/SubscribeToRun.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-start gap-2">
+      <i class="pi pi-check mt-1 text-sm" />
+      <span class="text-sm">
+        {{ $t('subscription.benefits.benefit1') }}
+      </span>
+    </div>
+
+    <div class="flex items-start gap-2">
+      <i class="pi pi-check mt-1 text-sm" />
+      <span class="text-sm">
+        {{ $t('subscription.benefits.benefit2') }}
+      </span>
+    </div>
+
+    <Button
+      :label="$t('subscription.viewMoreDetails')"
+      text
+      icon="pi pi-external-link"
+      icon-pos="left"
+      size="small"
+      class="self-start !p-0 text-sm hover:!bg-transparent [&]:!text-[inherit]"
+      @click="handleViewMoreDetails"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+const handleViewMoreDetails = () => {
+  window.open('https://www.comfy.org/cloud', '_blank')
+}
+</script>