diff --git a/src/components/dialog/content/TopUpCreditsDialogContent.vue b/src/components/dialog/content/TopUpCreditsDialogContent.vue index 4867e7a39..51c29aaf5 100644 --- a/src/components/dialog/content/TopUpCreditsDialogContent.vue +++ b/src/components/dialog/content/TopUpCreditsDialogContent.vue @@ -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) diff --git a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue index 61f432c37..4e61d8e8f 100644 --- a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue +++ b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue @@ -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 diff --git a/src/platform/cloud/subscription/composables/useSubscription.ts b/src/platform/cloud/subscription/composables/useSubscription.ts index 816e5afbf..bb5a3b6c0 100644 --- a/src/platform/cloud/subscription/composables/useSubscription.ts +++ b/src/platform/cloud/subscription/composables/useSubscription.ts @@ -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,