[backport cloud/1.36] feat: local/legacy settings dialog fix (#8004)

Backport of #7990 to `cloud/1.36`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8004-backport-cloud-1-36-feat-local-legacy-settings-dialog-fix-2e76d73d3650814398aff135890ee1cb)
by [Unito](https://www.unito.io)

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>

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)
 

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(
+const showCustomPricingTable = computed(() => isSubscriptionEnabled())
-  () => isCloud && window.__CONFIG__?.subscription_required
-)
 
 const POLL_INTERVAL_MS = 3000
 const MAX_POLL_ATTEMPTS = 3

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,