mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
feat: local/legacy settings dialog fix (#7990)
## Summary Fix the issue where local/desktop users would top up and then see the settings homepage dialog instead of the credits tab. ## Changes - **What**: useSubscription.ts, TopUpCreditsDialogContent.vue, SubscriptionRequiredDialogContent.vue - **Breaking**: <!-- Any breaking changes (if none, remove this line) --> - **Dependencies**: <!-- New dependencies (if none, remove this line) --> ## Screenshots (if applicable) Showing this screen after topping up on local/desktop: <img width="789" height="752" alt="image" src="https://github.com/user-attachments/assets/ea92b30b-5c3b-412a-acbe-1b0893621e53" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7990-feat-local-legacy-settings-dialog-fix-2e76d73d365081c7b1e1f96a24745e7b) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -158,6 +158,7 @@ import Button from '@/components/ui/button/Button.vue'
|
||||
import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
|
||||
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
|
||||
import { useExternalLink } from '@/composables/useExternalLink'
|
||||
import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
|
||||
import { useDialogService } from '@/services/dialogService'
|
||||
@@ -175,6 +176,7 @@ const dialogService = useDialogService()
|
||||
const telemetry = useTelemetry()
|
||||
const toast = useToast()
|
||||
const { buildDocsUrl, docsPaths } = useExternalLink()
|
||||
const { isSubscriptionEnabled } = useSubscription()
|
||||
|
||||
// Constants
|
||||
const PRESET_AMOUNTS = [10, 25, 50, 100]
|
||||
@@ -252,9 +254,11 @@ async function handleBuy() {
|
||||
telemetry?.trackApiCreditTopupButtonPurchaseClicked(payAmount.value)
|
||||
await authActions.purchaseCredits(payAmount.value)
|
||||
|
||||
// Close top-up dialog (keep tracking) and open subscription panel to show updated credits
|
||||
// Close top-up dialog (keep tracking) and open credits panel to show updated balance
|
||||
handleClose(false)
|
||||
dialogService.showSettingsDialog('subscription')
|
||||
dialogService.showSettingsDialog(
|
||||
isSubscriptionEnabled() ? 'subscription' : 'credits'
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('Purchase failed:', error)
|
||||
|
||||
|
||||
@@ -128,7 +128,6 @@ import PricingTable from '@/platform/cloud/subscription/components/PricingTable.
|
||||
import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
|
||||
import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
|
||||
import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
import { useCommandStore } from '@/stores/commandStore'
|
||||
|
||||
@@ -140,7 +139,8 @@ const emit = defineEmits<{
|
||||
close: [subscribed: boolean]
|
||||
}>()
|
||||
|
||||
const { fetchStatus, isActiveSubscription } = useSubscription()
|
||||
const { fetchStatus, isActiveSubscription, isSubscriptionEnabled } =
|
||||
useSubscription()
|
||||
|
||||
// Legacy price for non-tier flow with locale-aware formatting
|
||||
const formattedMonthlyPrice = new Intl.NumberFormat(
|
||||
@@ -156,9 +156,7 @@ const commandStore = useCommandStore()
|
||||
const telemetry = useTelemetry()
|
||||
|
||||
// Always show custom pricing table for cloud subscriptions
|
||||
const showCustomPricingTable = computed(
|
||||
() => isCloud && window.__CONFIG__?.subscription_required
|
||||
)
|
||||
const showCustomPricingTable = computed(() => isSubscriptionEnabled())
|
||||
|
||||
const POLL_INTERVAL_MS = 3000
|
||||
const MAX_POLL_ATTEMPTS = 3
|
||||
|
||||
@@ -121,7 +121,11 @@ function useSubscriptionInternal() {
|
||||
void showSubscriptionRequiredDialog()
|
||||
}
|
||||
|
||||
const shouldWatchCancellation = (): boolean =>
|
||||
/**
|
||||
* Whether cloud subscription mode is enabled (cloud distribution with subscription_required config).
|
||||
* Use to determine which UI to show (SubscriptionPanel vs LegacyCreditsPanel).
|
||||
*/
|
||||
const isSubscriptionEnabled = (): boolean =>
|
||||
Boolean(isCloud && window.__CONFIG__?.subscription_required)
|
||||
|
||||
const { startCancellationWatcher, stopCancellationWatcher } =
|
||||
@@ -130,7 +134,7 @@ function useSubscriptionInternal() {
|
||||
isActiveSubscription: isSubscribedOrIsNotCloud,
|
||||
subscriptionStatus,
|
||||
telemetry,
|
||||
shouldWatchCancellation
|
||||
shouldWatchCancellation: isSubscriptionEnabled
|
||||
})
|
||||
|
||||
const manageSubscription = async () => {
|
||||
@@ -249,6 +253,9 @@ function useSubscriptionInternal() {
|
||||
subscriptionTierName,
|
||||
subscriptionStatus,
|
||||
|
||||
// Utilities
|
||||
isSubscriptionEnabled,
|
||||
|
||||
// Actions
|
||||
subscribe,
|
||||
fetchStatus,
|
||||
|
||||
Reference in New Issue
Block a user