make "require subscription" toggleable in build (#6144)

## Summary

Adds build time feature flags system starting with a flag that indicates
whether subscription is required to use the app. This is only used on
cloud.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6144-make-require-subscription-toggleable-in-build-2916d73d3650813bb140c5e96bcce1ce)
by [Unito](https://www.unito.io)

global.d.ts

@@ -5,6 +5,11 @@ declare const __ALGOLIA_APP_ID__: string
 declare const __ALGOLIA_API_KEY__: string
 declare const __USE_PROD_CONFIG__: boolean
 
+type BuildFeatureFlags = {
+  REQUIRE_SUBSCRIPTION: boolean
+}
+declare const __BUILD_FLAGS__: BuildFeatureFlags
+
 interface Navigator {
   /**
    * Used by the electron API.  This is a WICG non-standard API, but is guaranteed to exist in Electron.

src/components/actionbar/ComfyRunButton/index.ts

@@ -2,6 +2,6 @@ import { defineAsyncComponent } from 'vue'
 
 import { isCloud } from '@/platform/distribution/types'
 
-export default isCloud
+export default isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION
   ? defineAsyncComponent(() => import('./CloudRunButtonWrapper.vue'))
   : defineAsyncComponent(() => import('./ComfyQueueButton.vue'))

src/extensions/core/index.ts

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

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -26,7 +26,7 @@ interface CloudSubscriptionStatusResponse {
 const subscriptionStatus = ref<CloudSubscriptionStatusResponse | null>(null)
 
 const isActiveSubscription = computed(() => {
-  if (!isCloud) return true
+  if (!isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION) return true
 
   return subscriptionStatus.value?.is_active ?? false
 })

src/platform/settings/composables/useSettingUI.ts

@@ -80,21 +80,22 @@ export function useSettingUI(
     )
   }
 
-  const subscriptionPanel: SettingPanelItem | null = !isCloud
-    ? null
-    : {
-        node: {
-          key: 'subscription',
-          label: 'PlanCredits',
-          children: []
-        },
-        component: defineAsyncComponent(
-          () =>
-            import(
-              '@/platform/cloud/subscription/components/SubscriptionPanel.vue'
-            )
-        )
-      }
+  const subscriptionPanel: SettingPanelItem | null =
+    !isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION
+      ? null
+      : {
+          node: {
+            key: 'subscription',
+            label: 'PlanCredits',
+            children: []
+          },
+          component: defineAsyncComponent(
+            () =>
+              import(
+                '@/platform/cloud/subscription/components/SubscriptionPanel.vue'
+              )
+          )
+        }
 
   const userPanel: SettingPanelItem = {
     node: {
@@ -148,7 +149,9 @@ export function useSettingUI(
       keybindingPanel,
       extensionPanel,
       ...(isElectron() ? [serverConfigPanel] : []),
-      ...(isCloud && subscriptionPanel ? [subscriptionPanel] : [])
+      ...(isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION && subscriptionPanel
+        ? [subscriptionPanel]
+        : [])
     ].filter((panel) => panel.component)
   )
 
@@ -180,10 +183,16 @@ export function useSettingUI(
       label: 'Account',
       children: [
         userPanel.node,
-        ...(isLoggedIn.value && isCloud && subscriptionPanel
+        ...(isLoggedIn.value &&
+        isCloud &&
+        __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION &&
+        subscriptionPanel
           ? [subscriptionPanel.node]
           : []),
-        ...(isLoggedIn.value && !isCloud ? [creditsPanel.node] : [])
+        ...(isLoggedIn.value &&
+        !(isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION)
+          ? [creditsPanel.node]
+          : [])
       ].map(translateCategory)
     },
     // Normal settings stored in the settingStore

src/services/dialogService.ts

@@ -488,7 +488,7 @@ export const useDialogService = () => {
   }
 
   function showSubscriptionRequiredDialog() {
-    if (!isCloud) {
+    if (!isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION) {
       return
     }
 

vite.config.mts

@@ -32,6 +32,10 @@ const DISTRIBUTION = (process.env.DISTRIBUTION || 'localhost') as
   | 'localhost'
   | 'cloud'
 
+const BUILD_FLAGS = {
+  REQUIRE_SUBSCRIPTION: process.env.REQUIRE_SUBSCRIPTION === 'true'
+}
+
 export default defineConfig({
   base: '',
   server: {
@@ -267,7 +271,8 @@ export default defineConfig({
     __ALGOLIA_APP_ID__: JSON.stringify(process.env.ALGOLIA_APP_ID || ''),
     __ALGOLIA_API_KEY__: JSON.stringify(process.env.ALGOLIA_API_KEY || ''),
     __USE_PROD_CONFIG__: process.env.USE_PROD_CONFIG === 'true',
-    __DISTRIBUTION__: JSON.stringify(DISTRIBUTION)
+    __DISTRIBUTION__: JSON.stringify(DISTRIBUTION),
+    __BUILD_FLAGS__: JSON.stringify(BUILD_FLAGS)
   },
 
   resolve: {

vitest.setup.ts

@@ -9,6 +9,9 @@ globalThis.__ALGOLIA_APP_ID__ = ''
 globalThis.__ALGOLIA_API_KEY__ = ''
 globalThis.__USE_PROD_CONFIG__ = false
 globalThis.__DISTRIBUTION__ = 'localhost'
+globalThis.__BUILD_FLAGS__ = {
+  REQUIRE_SUBSCRIPTION: true
+}
 
 // Mock Worker for extendable-media-recorder
 globalThis.Worker = vi.fn().mockImplementation(() => ({