From 8d907166621548637eecb2a4935c4cfca19d3318 Mon Sep 17 00:00:00 2001
From: Luke Mino-Altherr <luke@comfy.org>
Date: Thu, 4 Dec 2025 18:01:10 -0800
Subject: [PATCH] [demo] Add feature flag support to CloudRunButtonWrapper

- Wrap SubscribeToRunButton with FeatureFlaggedRunButton for cloud users
- Enable experimental button variants for cloud subscription flow
- Maintains existing behavior: ComfyQueueButton (with subscription) or SubscribeToRunButton (without)
---
 .../ComfyRunButton/CloudRunButtonWrapper.vue  | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 frontend/posthog-feature-flag-demo/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue

diff --git a/frontend/posthog-feature-flag-demo/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue b/frontend/posthog-feature-flag-demo/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue
new file mode 100644
index 000000000..4f231bb10
--- /dev/null
+++ b/frontend/posthog-feature-flag-demo/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue
@@ -0,0 +1,56 @@
+<template>
+  <!-- If user has active subscription, show ComfyQueueButton (which already has FeatureFlaggedRunButton) -->
+  <ComfyQueueButton v-if="isActiveSubscription" />
+
+  <!-- If subscription required but not active, wrap SubscribeToRunButton with feature flag -->
+  <FeatureFlaggedRunButton
+    v-else
+    flag-key="demo-run-button-experiment"
+    :on-click="handleSubscribeClick"
+  >
+    <template #control>
+      <!-- SubscribeToRunButton handles its own click (shows subscription dialog) -->
+      <SubscribeToRunButton />
+    </template>
+  </FeatureFlaggedRunButton>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+import ComfyQueueButton from './ComfyQueueButton.vue'
+import FeatureFlaggedRunButton from './FeatureFlaggedRunButton.vue'
+import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
+
+// Get subscription status - replace with actual subscription store/composable
+const isActiveSubscription = computed(() => {
+  // TODO: Replace with actual subscription check
+  // Example: return useSubscriptionStore().isActiveSubscription
+  // For now, this would typically come from a store or composable
+  return false
+})
+
+const commandStore = useCommandStore()
+
+// Handle click for experimental button when SubscribeToRunButton is shown
+// For experimental variants, trigger queue prompt (same as ComfyQueueButton)
+// For control, SubscribeToRunButton handles its own click (shows subscription dialog)
+const handleSubscribeClick = async (e: Event) => {
+  // If this is called from the experimental button, trigger queue prompt
+  // If called from SubscribeToRunButton (control), it will handle its own logic
+  const isShiftPressed = 'shiftKey' in e && e.shiftKey
+  const commandId = isShiftPressed
+    ? 'Comfy.QueuePromptFront'
+    : 'Comfy.QueuePrompt'
+
+  await commandStore.execute(commandId, {
+    metadata: {
+      subscribe_to_run: false,
+      trigger_source: 'button'
+    }
+  })
+}
+</script>
+