From 0647f5b37a255edf2c8b49848f0b3d90bd9a83e0 Mon Sep 17 00:00:00 2001
From: Lulu <anlulu.dev@yahoo.com>
Date: Mon, 8 Jun 2026 13:51:10 +0800
Subject: [PATCH] feat(stage): hide flux purchase UI for Steam builds via
 VITE_DISABLE_FLUX_PURCHASE (#1912)

---
 .../stage-pages/src/pages/settings/flux.vue   | 14 ++++---
 .../providers/chat/official-provider.vue      |  3 ++
 .../official-provider-speech-streaming.vue    |  3 ++
 .../speech/official-provider-speech.vue       |  3 ++
 packages/stage-shared/src/env-vars.ts         |  4 ++
 .../scenarios/hologram/promo-banner.ts        | 42 +++++++++++--------
 vite-env.d.ts                                 |  1 +
 7 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/packages/stage-pages/src/pages/settings/flux.vue b/packages/stage-pages/src/pages/settings/flux.vue
index 5344d3e7f..d8d8676e3 100644
--- a/packages/stage-pages/src/pages/settings/flux.vue
+++ b/packages/stage-pages/src/pages/settings/flux.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isStageTamagotchi } from '@proj-airi/stage-shared'
+import { isFluxPurchaseDisabled, isStageTamagotchi } from '@proj-airi/stage-shared'
 import { client } from '@proj-airi/stage-ui/composables/api'
 import { useAnalytics } from '@proj-airi/stage-ui/composables/use-analytics'
 import { useAuthStore } from '@proj-airi/stage-ui/stores/auth'
@@ -17,6 +17,8 @@ const authStore = useAuthStore()
 const { credits } = storeToRefs(authStore)
 const { trackPricingViewed, trackPlanSelected, trackCheckoutStarted } = useAnalytics()
 
+const fluxPurchaseDisabled = isFluxPurchaseDisabled()
+
 // On desktop, checkout happens in the external system browser (see handleBuy), so
 // the app never receives the success_url redirect that web/mobile use to refresh.
 // Re-pull the FLUX balance whenever the window regains focus; the balance source
@@ -230,13 +232,15 @@ async function fetchPackages() {
 }
 
 onMounted(async () => {
-  Promise.allSettled([fetchPackages(), authStore.updateCredits(), fetchStats(), fetchAuditHistory()])
+  Promise.allSettled([authStore.updateCredits(), fetchStats(), fetchAuditHistory(), ...(fluxPurchaseDisabled ? [] : [fetchPackages()])])
 
   // PostHog funnel step 1: pricing surface view. Today this is an in-app
   // settings page (already-authenticated users); when we add a public
   // pricing landing page the surface label changes but the event stays the
   // same, so the funnel definition in PostHog doesn't need re-wiring.
-  trackPricingViewed('settings_flux', 'one_time')
+  if (!fluxPurchaseDisabled) {
+    trackPricingViewed('settings_flux', 'one_time')
+  }
 
   if (route.query.success === 'true') {
     message.value = { type: 'success', text: t('settings.pages.flux.checkout.success') }
@@ -316,13 +320,13 @@ async function handleBuy(stripePriceId: string) {
             {{ formatNumber(credits) }}
           </h2>
           <p text="sm neutral-500">
-            {{ t('settings.pages.flux.description') }}
+            {{ t(fluxPurchaseDisabled ? 'settings.pages.account.fluxBalance' : 'settings.pages.flux.description') }}
           </p>
         </div>
       </div>
     </div>
 
-    <div flex="~ col gap-4">
+    <div v-if="!fluxPurchaseDisabled" flex="~ col gap-4">
       <!-- Currency selector -->
       <div v-if="currencyOptions.length > 1" flex="~ justify-start sm:justify-end">
         <SelectTab
diff --git a/packages/stage-pages/src/pages/settings/providers/chat/official-provider.vue b/packages/stage-pages/src/pages/settings/providers/chat/official-provider.vue
index 9248d2c60..8178e1cd5 100644
--- a/packages/stage-pages/src/pages/settings/providers/chat/official-provider.vue
+++ b/packages/stage-pages/src/pages/settings/providers/chat/official-provider.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isFluxPurchaseDisabled } from '@proj-airi/stage-shared'
 import {
   ProviderSettingsContainer,
   ProviderSettingsLayout,
@@ -18,6 +19,7 @@ const { isAuthenticated, credits, needsLogin } = storeToRefs(authStore)
 
 const providerId = 'official-provider'
 const providerMetadata = providersStore.getProviderMetadata(providerId)
+const fluxPurchaseDisabled = isFluxPurchaseDisabled()
 
 function handleLogin() {
   needsLogin.value = true
@@ -62,6 +64,7 @@ function handleLogin() {
               </span>
             </div>
             <button
+              v-if="!fluxPurchaseDisabled"
               type="button"
               class="rounded-full bg-primary-500/10 px-6 py-2 text-sm text-primary-600 font-semibold transition-all dark:bg-primary-400/10 hover:bg-primary-500 dark:text-primary-400 hover:text-white dark:hover:bg-primary-400 dark:hover:text-neutral-900"
               @click="router.push('/settings/flux')"
diff --git a/packages/stage-pages/src/pages/settings/providers/speech/official-provider-speech-streaming.vue b/packages/stage-pages/src/pages/settings/providers/speech/official-provider-speech-streaming.vue
index 97b192d63..98529f6f9 100644
--- a/packages/stage-pages/src/pages/settings/providers/speech/official-provider-speech-streaming.vue
+++ b/packages/stage-pages/src/pages/settings/providers/speech/official-provider-speech-streaming.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isFluxPurchaseDisabled } from '@proj-airi/stage-shared'
 import {
   ProviderSettingsContainer,
   ProviderSettingsLayout,
@@ -23,6 +24,7 @@ const { isAuthenticated, credits, needsLogin } = storeToRefs(authStore)
 
 const providerId = 'official-provider-speech-streaming'
 const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
+const fluxPurchaseDisabled = isFluxPurchaseDisabled()
 
 const providerConfig = computed(() => providersStore.getProviderConfig(providerId))
 
@@ -149,6 +151,7 @@ function handleLogin() {
               </span>
             </div>
             <button
+              v-if="!fluxPurchaseDisabled"
               type="button"
               class="rounded-full bg-primary-500/10 px-6 py-2 text-sm text-primary-600 font-semibold transition-all dark:bg-primary-400/10 hover:bg-primary-500 dark:text-primary-400 hover:text-white dark:hover:bg-primary-400 dark:hover:text-neutral-900"
               @click="router.push('/settings/flux')"
diff --git a/packages/stage-pages/src/pages/settings/providers/speech/official-provider-speech.vue b/packages/stage-pages/src/pages/settings/providers/speech/official-provider-speech.vue
index b8135fe46..29b90749e 100644
--- a/packages/stage-pages/src/pages/settings/providers/speech/official-provider-speech.vue
+++ b/packages/stage-pages/src/pages/settings/providers/speech/official-provider-speech.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isFluxPurchaseDisabled } from '@proj-airi/stage-shared'
 import {
   ProviderSettingsContainer,
   ProviderSettingsLayout,
@@ -18,6 +19,7 @@ const { isAuthenticated, credits, needsLogin } = storeToRefs(authStore)
 
 const providerId = 'official-provider-speech'
 const providerMetadata = providersStore.getProviderMetadata(providerId)
+const fluxPurchaseDisabled = isFluxPurchaseDisabled()
 
 function handleLogin() {
   needsLogin.value = true
@@ -62,6 +64,7 @@ function handleLogin() {
               </span>
             </div>
             <button
+              v-if="!fluxPurchaseDisabled"
               type="button"
               class="rounded-full bg-primary-500/10 px-6 py-2 text-sm text-primary-600 font-semibold transition-all dark:bg-primary-400/10 hover:bg-primary-500 dark:text-primary-400 hover:text-white dark:hover:bg-primary-400 dark:hover:text-neutral-900"
               @click="router.push('/settings/flux')"
diff --git a/packages/stage-shared/src/env-vars.ts b/packages/stage-shared/src/env-vars.ts
index dd856c57b..894c64024 100644
--- a/packages/stage-shared/src/env-vars.ts
+++ b/packages/stage-shared/src/env-vars.ts
@@ -8,3 +8,7 @@ export function isEnvTruthy(value: string | undefined | null): boolean {
     return false
   return /^(?:1|true|t|yes|y|on)$/i.test(value.trim())
 }
+
+export function isFluxPurchaseDisabled(): boolean {
+  return isEnvTruthy(import.meta.env.VITE_DISABLE_FLUX_PURCHASE)
+}
diff --git a/packages/stage-ui/src/components/scenarios/hologram/promo-banner.ts b/packages/stage-ui/src/components/scenarios/hologram/promo-banner.ts
index 07add2225..d526949ee 100644
--- a/packages/stage-ui/src/components/scenarios/hologram/promo-banner.ts
+++ b/packages/stage-ui/src/components/scenarios/hologram/promo-banner.ts
@@ -1,3 +1,5 @@
+import { isFluxPurchaseDisabled } from '@proj-airi/stage-shared'
+
 import factorioPoster from '../../../assets/factorio-simple.png'
 import onboardingPoster from '../../../assets/onboarding.avif'
 
@@ -49,24 +51,28 @@ export const promoBannerVisuals: PromoBannerVisual[] = [
     fallbackIconClass: 'text-cyan-100',
     fallbackClass: 'from-cyan-300/25 via-sky-300/14 to-blue-400/20',
   },
-  {
-    key: 'spring',
-    image: '',
-    action: { type: 'route', to: '/settings/flux' },
-    accentClass: 'from-amber-400/30 via-orange-300/18 to-transparent',
-    fallbackIcon: 'i-solar:gift-bold-duotone',
-    fallbackIconClass: 'text-white/88',
-    fallbackClass: 'from-amber-300/25 via-rose-300/14 to-fuchsia-400/20',
-  },
-  {
-    key: 'coupon',
-    image: '',
-    action: { type: 'route', to: '/settings/flux' },
-    accentClass: 'from-emerald-400/28 via-teal-300/16 to-transparent',
-    fallbackIcon: 'i-solar:ticket-sale-bold-duotone',
-    fallbackIconClass: 'text-emerald-100',
-    fallbackClass: 'from-emerald-300/24 via-cyan-300/12 to-teal-400/18',
-  },
+  ...(isFluxPurchaseDisabled()
+    ? []
+    : [
+      {
+        key: 'spring',
+        image: '',
+        action: { type: 'route', to: '/settings/flux' },
+        accentClass: 'from-amber-400/30 via-orange-300/18 to-transparent',
+        fallbackIcon: 'i-solar:gift-bold-duotone',
+        fallbackIconClass: 'text-white/88',
+        fallbackClass: 'from-amber-300/25 via-rose-300/14 to-fuchsia-400/20',
+      },
+      {
+        key: 'coupon',
+        image: '',
+        action: { type: 'route', to: '/settings/flux' },
+        accentClass: 'from-emerald-400/28 via-teal-300/16 to-transparent',
+        fallbackIcon: 'i-solar:ticket-sale-bold-duotone',
+        fallbackIconClass: 'text-emerald-100',
+        fallbackClass: 'from-emerald-300/24 via-cyan-300/12 to-teal-400/18',
+      },
+    ] satisfies PromoBannerVisual[]),
   {
     key: 'home',
     image: '',
diff --git a/vite-env.d.ts b/vite-env.d.ts
index 012bcde28..6a644979e 100644
--- a/vite-env.d.ts
+++ b/vite-env.d.ts
@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
+  readonly VITE_DISABLE_FLUX_PURCHASE?: string
   readonly VITE_ENABLE_POSTHOG?: string
   readonly VITE_POSTHOG_PROJECT_KEY_WEB?: string
   readonly VITE_POSTHOG_PROJECT_KEY_DESKTOP?: string