feat: add frontend subscription success recovery

src/composables/auth/useAuthActions.ts

@@ -117,7 +117,7 @@ export const useAuthActions = () => {
 
   const accessBillingPortal = wrapWithErrorHandlingAsync<
     [targetTier?: BillingPortalTargetTier, openInNewTab?: boolean],
-    void
+    boolean
   >(async (targetTier, openInNewTab = true) => {
     const response = await authStore.accessBillingPortal(targetTier)
     if (!response.billing_portal_url) {
@@ -128,10 +128,11 @@ export const useAuthActions = () => {
       )
     }
     if (openInNewTab) {
-      window.open(response.billing_portal_url, '_blank')
-    } else {
-      globalThis.location.href = response.billing_portal_url
+      return window.open(response.billing_portal_url, '_blank') !== null
     }
+
+    globalThis.location.href = response.billing_portal_url
+    return true
   }, reportError)
 
   const fetchBalance = wrapWithErrorHandlingAsync(async () => {

src/platform/cloud/subscription/components/PricingTable.test.ts

@@ -7,11 +7,21 @@ import { createI18n } from 'vue-i18n'
 
 import PricingTable from '@/platform/cloud/subscription/components/PricingTable.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY } from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
 
 async function flushPromises() {
   await new Promise((r) => setTimeout(r, 0))
 }
 
+function createDeferredPromise<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((res) => {
+    resolve = res
+  })
+
+  return { promise, resolve }
+}
+
 const mockIsActiveSubscription = ref(false)
 const mockSubscriptionTier = ref<
   'STANDARD' | 'CREATOR' | 'PRO' | 'FOUNDERS_EDITION' | null
@@ -25,6 +35,35 @@ const mockGetAuthHeader = vi.fn(() =>
   Promise.resolve({ Authorization: 'Bearer test-token' })
 )
 const mockGetCheckoutAttribution = vi.hoisted(() => vi.fn(() => ({})))
+const mockLocalStorage = vi.hoisted(() => {
+  const store = new Map<string, string>()
+
+  return {
+    getItem: vi.fn((key: string) => store.get(key) ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store.set(key, value)
+    }),
+    removeItem: vi.fn((key: string) => {
+      store.delete(key)
+    }),
+    clear: vi.fn(() => {
+      store.clear()
+    }),
+    __reset: () => {
+      store.clear()
+    }
+  }
+})
+
+Object.defineProperty(window, 'localStorage', {
+  value: mockLocalStorage,
+  writable: true
+})
+
+Object.defineProperty(globalThis, 'localStorage', {
+  value: mockLocalStorage,
+  writable: true
+})
 
 vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   useSubscription: () => ({
@@ -148,7 +187,20 @@ function renderComponent() {
       },
       stubs: {
         SelectButton: {
-          template: '<div><slot /></div>',
+          template: `
+            <div>
+              <button
+                v-for="option in options"
+                :key="option.value"
+                type="button"
+                @click="$emit('update:modelValue', option.value)"
+              >
+                <slot name="option" :option="option">
+                  {{ option.label }}
+                </slot>
+              </button>
+            </div>
+          `,
           props: ['modelValue', 'options'],
           emits: ['update:modelValue']
         },
@@ -167,7 +219,10 @@ describe('PricingTable', () => {
     mockSubscriptionTier.value = null
     mockIsYearlySubscription.value = false
     mockUserId.value = 'user-123'
+    mockAccessBillingPortal.mockReset()
+    mockAccessBillingPortal.mockResolvedValue(true)
     mockTrackBeginCheckout.mockReset()
+    mockLocalStorage.__reset()
     vi.mocked(global.fetch).mockResolvedValue({
       ok: true,
       json: async () => ({ checkout_url: 'https://checkout.stripe.com/test' })
@@ -217,6 +272,66 @@ describe('PricingTable', () => {
       expect(mockAccessBillingPortal).toHaveBeenCalledWith('pro-yearly')
     })
 
+    it('records the plan snapshot that was actually opened', async () => {
+      mockIsActiveSubscription.value = true
+      mockSubscriptionTier.value = 'STANDARD'
+
+      const portalOpen = createDeferredPromise<boolean>()
+      mockAccessBillingPortal.mockReturnValueOnce(portalOpen.promise)
+
+      renderComponent()
+      await flushPromises()
+
+      const creatorButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Creator'))
+
+      await userEvent.click(creatorButton!)
+      await flushPromises()
+
+      const monthlyToggle = screen.getByRole('button', { name: 'Monthly' })
+      await userEvent.click(monthlyToggle)
+      await flushPromises()
+
+      portalOpen.resolve(true)
+      await flushPromises()
+
+      expect(mockAccessBillingPortal).toHaveBeenCalledWith('creator-yearly')
+      expect(
+        JSON.parse(
+          window.localStorage.getItem(
+            PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY
+          ) ?? '{}'
+        )
+      ).toMatchObject({
+        tier: 'creator',
+        cycle: 'yearly',
+        checkout_type: 'change',
+        previous_tier: 'standard',
+        previous_cycle: 'monthly'
+      })
+    })
+
+    it('does not record a pending upgrade when the billing portal does not open', async () => {
+      mockIsActiveSubscription.value = true
+      mockSubscriptionTier.value = 'STANDARD'
+      mockAccessBillingPortal.mockResolvedValueOnce(false)
+
+      renderComponent()
+      await flushPromises()
+
+      const creatorButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Creator'))
+
+      await userEvent.click(creatorButton!)
+      await flushPromises()
+
+      expect(
+        window.localStorage.getItem(PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY)
+      ).toBeNull()
+    })
+
     it('should use the latest userId value when it changes after mount', async () => {
       mockIsActiveSubscription.value = true
       mockSubscriptionTier.value = 'STANDARD'

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

@@ -274,6 +274,7 @@ import type {
   TierKey,
   TierPricing
 } from '@/platform/cloud/subscription/constants/tierPricing'
+import { recordPendingSubscriptionCheckoutAttempt } from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
 import { performSubscriptionCheckout } from '@/platform/cloud/subscription/utils/subscriptionCheckoutUtil'
 import { isPlanDowngrade } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
@@ -449,37 +450,52 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
 
     try {
       if (hasPaidSubscription.value) {
+        const targetPlan = {
+          tierKey,
+          billingCycle: currentBillingCycle.value
+        } as const
+        const previousPlan = currentPlanDescriptor.value
         const checkoutAttribution = await getCheckoutAttributionForCloud()
         if (userId.value) {
           telemetry?.trackBeginCheckout({
             user_id: userId.value,
-            tier: tierKey,
-            cycle: currentBillingCycle.value,
+            tier: targetPlan.tierKey,
+            cycle: targetPlan.billingCycle,
             checkout_type: 'change',
             ...checkoutAttribution,
-            ...(currentTierKey.value
-              ? { previous_tier: currentTierKey.value }
-              : {})
+            ...(previousPlan ? { previous_tier: previousPlan.tierKey } : {})
           })
         }
         // Pass the target tier to create a deep link to subscription update confirmation
-        const checkoutTier = getCheckoutTier(tierKey, currentBillingCycle.value)
-        const targetPlan = {
-          tierKey,
-          billingCycle: currentBillingCycle.value
-        }
+        const checkoutTier = getCheckoutTier(
+          targetPlan.tierKey,
+          targetPlan.billingCycle
+        )
         const downgrade =
-          currentPlanDescriptor.value &&
+          previousPlan &&
           isPlanDowngrade({
-            current: currentPlanDescriptor.value,
+            current: previousPlan,
             target: targetPlan
           })
 
         if (downgrade) {
           // TODO(COMFY-StripeProration): Remove once backend checkout creation mirrors portal proration ("change at billing end")
           await accessBillingPortal()
         } else {
-          await accessBillingPortal(checkoutTier)
+          const didOpenPortal = await accessBillingPortal(checkoutTier)
+          if (!didOpenPortal) {
+            return
+          }
+
+          recordPendingSubscriptionCheckoutAttempt({
+            tier: targetPlan.tierKey,
+            cycle: targetPlan.billingCycle,
+            checkout_type: 'change',
+            ...(previousPlan ? { previous_tier: previousPlan.tierKey } : {}),
+            ...(previousPlan
+              ? { previous_cycle: previousPlan.billingCycle }
+              : {})
+          })
         }
       } else {
         await performSubscriptionCheckout(

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

@@ -145,7 +145,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
 import Button from '@/components/ui/button/Button.vue'
@@ -169,7 +169,7 @@ const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()
 
-const { fetchStatus, isActiveSubscription } = useBillingContext()
+const { isActiveSubscription } = useBillingContext()
 
 const isSubscriptionEnabled = (): boolean =>
   Boolean(isCloud && window.__CONFIG__?.subscription_required)
@@ -190,69 +190,10 @@ const telemetry = useTelemetry()
 // Always show custom pricing table for cloud subscriptions
 const showCustomPricingTable = computed(() => isSubscriptionEnabled())
 
-const POLL_INTERVAL_MS = 3000
-const MAX_POLL_ATTEMPTS = 3
-let pollInterval: number | null = null
-let pollAttempts = 0
-
-const stopPolling = () => {
-  if (pollInterval) {
-    clearInterval(pollInterval)
-    pollInterval = null
-  }
-}
-
-const startPolling = () => {
-  stopPolling()
-  pollAttempts = 0
-
-  const poll = async () => {
-    try {
-      await fetchStatus()
-      pollAttempts++
-
-      if (pollAttempts >= MAX_POLL_ATTEMPTS) {
-        stopPolling()
-      }
-    } catch (error) {
-      console.error(
-        '[SubscriptionDialog] Failed to poll subscription status',
-        error
-      )
-      stopPolling()
-    }
-  }
-
-  void poll()
-  pollInterval = window.setInterval(() => {
-    void poll()
-  }, POLL_INTERVAL_MS)
-}
-
-const handleWindowFocus = () => {
-  if (showCustomPricingTable.value) {
-    startPolling()
-  }
-}
-
-watch(
-  showCustomPricingTable,
-  (enabled) => {
-    if (enabled) {
-      window.addEventListener('focus', handleWindowFocus)
-    } else {
-      window.removeEventListener('focus', handleWindowFocus)
-      stopPolling()
-    }
-  },
-  { immediate: true }
-)
-
 watch(
   () => isActiveSubscription.value,
   (isActive) => {
     if (isActive && showCustomPricingTable.value) {
-      telemetry?.trackMonthlySubscriptionSucceeded()
       emit('close', true)
     }
   }
@@ -263,7 +204,6 @@ const handleSubscribed = () => {
 }
 
 const handleChooseTeam = () => {
-  stopPolling()
   if (onChooseTeam) {
     onChooseTeam()
   } else {
@@ -272,7 +212,6 @@ const handleChooseTeam = () => {
 }
 
 const handleClose = () => {
-  stopPolling()
   onClose()
 }
 
@@ -293,11 +232,6 @@ const handleViewEnterprise = () => {
   })
   window.open('https://www.comfy.org/cloud/enterprise', '_blank')
 }
-
-onBeforeUnmount(() => {
-  stopPolling()
-  window.removeEventListener('focus', handleWindowFocus)
-})
 </script>
 
 <style scoped>