feat: handling subscription tier button link parameter

lint-staged.config.mjs

@@ -0,0 +1,23 @@
+import path from 'node:path'
+
+export default {
+  './**/*.js': (stagedFiles) => formatAndEslint(stagedFiles),
+
+  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
+    ...formatAndEslint(stagedFiles),
+    'pnpm typecheck'
+  ]
+}
+
+function formatAndEslint(fileNames) {
+  // Convert absolute paths to relative paths for better ESLint resolution
+  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
+  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
+  return [
+    `pnpm exec prettier --cache --write ${joinedPaths}`,
+    `pnpm exec oxlint --fix ${joinedPaths}`,
+    `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
+  ]
+}
+
+

src/composables/auth/useFirebaseAuthActions.ts

@@ -104,9 +104,9 @@ export const useFirebaseAuthActions = () => {
   }, reportError)
 
   const accessBillingPortal = wrapWithErrorHandlingAsync<
-    [targetTier?: BillingPortalTargetTier],
+    [targetTier?: BillingPortalTargetTier, openInNewTab?: boolean],
     void
-  >(async (targetTier) => {
+  >(async (targetTier, openInNewTab = true) => {
     const response = await authStore.accessBillingPortal(targetTier)
     if (!response.billing_portal_url) {
       throw new Error(
@@ -115,7 +115,11 @@ export const useFirebaseAuthActions = () => {
         })
       )
     }
-    window.open(response.billing_portal_url, '_blank')
+    if (openInNewTab) {
+      window.open(response.billing_portal_url, '_blank')
+    } else {
+      globalThis.location.href = response.billing_portal_url
+    }
   }, reportError)
 
   const fetchBalance = wrapWithErrorHandlingAsync(async () => {

src/locales/en/main.json

@@ -2129,6 +2129,7 @@
     "renderErrorState": "Render Error State"
   },
   "cloudOnboarding": {
+    "skipToCloudApp": "Skip to the cloud app",
     "survey": {
       "title": "Cloud Survey",
       "placeholder": "Survey questions placeholder",

src/platform/cloud/onboarding/CloudLoginView.vue

@@ -84,19 +84,20 @@ import { useRoute, useRouter } from 'vue-router'
 import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import CloudSignInForm from '@/platform/cloud/onboarding/components/CloudSignInForm.vue'
+import { getSafePreviousFullPath } from '@/platform/cloud/onboarding/utils/previousFullPath'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { SignInData } from '@/schemas/signInSchema'
 
 const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const authActions = useFirebaseAuthActions()
-const isSecureContext = window.isSecureContext
+const isSecureContext = globalThis.isSecureContext
 const authError = ref('')
 const toastStore = useToastStore()
 
-const navigateToSignup = () => {
-  void router.push({ name: 'cloud-signup', query: route.query })
+const navigateToSignup = async () => {
+  await router.push({ name: 'cloud-signup', query: route.query })
 }
 
 const onSuccess = async () => {
@@ -105,6 +106,13 @@ const onSuccess = async () => {
     summary: 'Login Completed',
     life: 2000
   })
+
+  const previousFullPath = getSafePreviousFullPath(route.query)
+  if (previousFullPath) {
+    await router.replace(previousFullPath)
+    return
+  }
+
   await router.push({ name: 'cloud-user-check' })
 }
 

src/platform/cloud/onboarding/CloudSignupView.vue

@@ -100,6 +100,7 @@ import { useRoute, useRouter } from 'vue-router'
 import SignUpForm from '@/components/dialog/content/signin/SignUpForm.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { getSafePreviousFullPath } from '@/platform/cloud/onboarding/utils/previousFullPath'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useToastStore } from '@/platform/updates/common/toastStore'
@@ -110,13 +111,13 @@ const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const authActions = useFirebaseAuthActions()
-const isSecureContext = window.isSecureContext
+const isSecureContext = globalThis.isSecureContext
 const authError = ref('')
 const userIsInChina = ref(false)
 const toastStore = useToastStore()
 
-const navigateToLogin = () => {
-  void router.push({ name: 'cloud-login', query: route.query })
+const navigateToLogin = async () => {
+  await router.push({ name: 'cloud-login', query: route.query })
 }
 
 const onSuccess = async () => {
@@ -125,7 +126,14 @@ const onSuccess = async () => {
     summary: 'Sign up Completed',
     life: 2000
   })
-  // Direct redirect to main app - email verification removed
+
+  const previousFullPath = getSafePreviousFullPath(route.query)
+  if (previousFullPath) {
+    await router.replace(previousFullPath)
+    return
+  }
+
+  // Default redirect to the normal onboarding flow
   await router.push({ path: '/', query: route.query })
 }
 

src/platform/cloud/onboarding/CloudSubscriptionRedirectView.test.ts

@@ -0,0 +1,162 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import CloudSubscriptionRedirectView from './CloudSubscriptionRedirectView.vue'
+
+const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+// Router mocks
+let mockQuery: Record<string, unknown> = {}
+const mockRouterPush = vi.fn()
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    query: mockQuery
+  }),
+  useRouter: () => ({
+    push: mockRouterPush
+  })
+}))
+
+// Firebase / subscription mocks
+const authActionMocks = vi.hoisted(() => ({
+  reportError: vi.fn(),
+  accessBillingPortal: vi.fn()
+}))
+
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: () => authActionMocks
+}))
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    wrapWithErrorHandlingAsync:
+      <T extends (...args: never[]) => unknown>(fn: T) =>
+      (...args: Parameters<T>) =>
+        fn(...args)
+  })
+}))
+
+const subscriptionMocks = vi.hoisted(() => ({
+  isActiveSubscription: { value: false },
+  isInitialized: { value: true }
+}))
+
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: () => subscriptionMocks
+}))
+
+// Avoid real network / isCloud behavior
+const mockPerformSubscriptionCheckout = vi.fn()
+vi.mock('@/platform/cloud/subscription/utils/subscriptionCheckoutUtil', () => ({
+  performSubscriptionCheckout: (...args: unknown[]) =>
+    mockPerformSubscriptionCheckout(...args)
+}))
+
+const createI18nInstance = () =>
+  createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        cloudOnboarding: {
+          skipToCloudApp: 'Skip to the cloud app'
+        },
+        g: {
+          comfyOrgLogoAlt: 'Comfy org logo'
+        },
+        subscription: {
+          subscribeTo: 'Subscribe to {plan}',
+          tiers: {
+            standard: { name: 'Standard' },
+            creator: { name: 'Creator' },
+            pro: { name: 'Pro' }
+          }
+        }
+      }
+    }
+  })
+
+const mountView = async (query: Record<string, unknown>) => {
+  mockQuery = query
+
+  const wrapper = mount(CloudSubscriptionRedirectView, {
+    global: {
+      plugins: [createI18nInstance()]
+    }
+  })
+
+  await flushPromises()
+
+  return { wrapper }
+}
+
+describe('CloudSubscriptionRedirectView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockQuery = {}
+    subscriptionMocks.isActiveSubscription.value = false
+    subscriptionMocks.isInitialized.value = true
+  })
+
+  test('redirects to home when subscriptionType is missing', async () => {
+    await mountView({})
+
+    expect(mockRouterPush).toHaveBeenCalledWith('/')
+  })
+
+  test('redirects to home when subscriptionType is invalid', async () => {
+    await mountView({ tier: 'invalid' })
+
+    expect(mockRouterPush).toHaveBeenCalledWith('/')
+  })
+
+  test('shows subscription copy when subscriptionType is valid', async () => {
+    const { wrapper } = await mountView({ tier: 'creator' })
+
+    // Should not redirect to home
+    expect(mockRouterPush).not.toHaveBeenCalledWith('/')
+
+    // Shows copy under logo
+    expect(wrapper.text()).toContain('Subscribe to Creator')
+
+    // Triggers checkout flow
+    expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
+      'creator',
+      'monthly',
+      false
+    )
+
+    // Shows loading affordances
+    expect(wrapper.findComponent({ name: 'ProgressSpinner' }).exists()).toBe(
+      true
+    )
+    const skipLink = wrapper.get('a[href="/"]')
+    expect(skipLink.text()).toContain('Skip to the cloud app')
+  })
+
+  test('opens billing portal when subscription is already active', async () => {
+    subscriptionMocks.isActiveSubscription.value = true
+
+    await mountView({ tier: 'creator' })
+
+    expect(mockRouterPush).not.toHaveBeenCalledWith('/')
+    expect(authActionMocks.accessBillingPortal).toHaveBeenCalledTimes(1)
+    expect(mockPerformSubscriptionCheckout).not.toHaveBeenCalled()
+  })
+
+  test('uses first value when subscriptionType is an array', async () => {
+    const { wrapper } = await mountView({
+      tier: ['creator', 'pro']
+    })
+
+    expect(mockRouterPush).not.toHaveBeenCalledWith('/')
+    expect(wrapper.text()).toContain('Subscribe to Creator')
+    expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
+      'creator',
+      'monthly',
+      false
+    )
+  })
+})