subscription page

Author: jtydhr88

public/assets/images/cloud-subscription.webm

@@ -14,7 +14,8 @@
           )
         "
       />
-      <ComfyQueueButton />
+      <SubscribeToRun v-if="!activeSubscription" />
+      <ComfyQueueButton v-else />
     </div>
   </Panel>
 </template>
@@ -30,14 +31,48 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
-import type { Ref } from 'vue'
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import type { Component, Ref } from 'vue'
+import {
+  computed,
+  defineAsyncComponent,
+  inject,
+  nextTick,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
 
+import { isCloud } from '@/platform/distribution/types'
 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

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

@@ -1772,6 +1772,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",
@@ -1908,6 +1910,34 @@
     "added": "Added",
     "accountInitialized": "Account initialized"
   },
+  "subscription": {
+    "title": "Subscription",
+    "comfyCloud": "Comfy Cloud",
+    "beta": "BETA",
+    "perMonth": "/ 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-center gap-2">
+      <i class="pi pi-check text-sm" />
+      <span class="text-sm">
+        {{ $t('subscription.benefits.benefit1') }}
+      </span>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <i class="pi pi-check 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>