refactor: start on removing FF for subscription tiers (#7596)

## Summary

Refactor: remove FF for subscription tier, remove legacy code for non
subscription tier logic.
 
## Review Focus

Preexisting cloud functionality impact.

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7596-refactor-start-on-removing-FF-for-subscription-tiers-2cc6d73d3650816bac3aef893e4f37cd)
by [Unito](https://www.unito.io)

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- New Credits Design (default) -->
-  <div v-if="useNewDesign" class="flex w-112 flex-col gap-8 p-8">
+  <div class="flex w-112 flex-col gap-8 p-8">
     <!-- Header -->
     <div class="flex flex-col gap-4">
       <h1 class="text-2xl font-semibold text-base-foreground m-0">
@@ -66,91 +65,32 @@
       @click="handleBuy"
     />
   </div>
-
-  <!-- Legacy Design -->
-  <div v-else class="flex w-96 flex-col gap-10 p-2">
-    <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
-      <h1 class="my-0 text-2xl leading-normal font-medium">
-        {{ $t('credits.topUp.insufficientTitle') }}
-      </h1>
-      <p class="my-0 text-base">
-        {{ $t('credits.topUp.insufficientMessage') }}
-      </p>
-    </div>
-
-    <!-- Balance Section -->
-    <div class="flex items-center justify-between">
-      <div class="flex w-full flex-col gap-2">
-        <div class="text-base text-muted">
-          {{ $t('credits.yourCreditBalance') }}
-        </div>
-        <div class="flex w-full items-center justify-between">
-          <UserCredit text-class="text-2xl" />
-          <Button
-            outlined
-            severity="secondary"
-            :label="$t('credits.topUp.seeDetails')"
-            icon="pi pi-arrow-up-right"
-            @click="handleSeeDetails"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Amount Input Section -->
-    <div class="flex flex-col gap-2">
-      <span class="text-sm text-muted"
-        >{{ $t('credits.topUp.quickPurchase') }}:</span
-      >
-      <div class="grid grid-cols-[2fr_1fr] gap-2">
-        <LegacyCreditTopUpOption
-          v-for="amount in amountOptions"
-          :key="amount"
-          :amount="amount"
-          :preselected="amount === preselectedAmountOption"
-        />
-
-        <LegacyCreditTopUpOption :amount="100" :preselected="false" editable />
-      </div>
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { creditsToUsd } from '@/base/credits/comfyCredits'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 
 import CreditTopUpOption from './credit/CreditTopUpOption.vue'
-import LegacyCreditTopUpOption from './credit/LegacyCreditTopUpOption.vue'
 
 interface CreditOption {
   credits: number
   description: string
 }
 
-const {
-  isInsufficientCredits = false,
-  amountOptions = [5, 10, 20, 50],
-  preselectedAmountOption = 10
-} = defineProps<{
+const { isInsufficientCredits = false } = defineProps<{
   isInsufficientCredits?: boolean
-  amountOptions?: number[]
-  preselectedAmountOption?: number
 }>()
 
-const { flags } = useFeatureFlags()
 const { formattedRenewalDate } = useSubscription()
-// Use feature flag to determine design - defaults to true (new design)
-const useNewDesign = computed(() => flags.subscriptionTiersEnabled)
 
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
@@ -202,8 +142,4 @@ const handleBuy = async () => {
     loading.value = false
   }
 }
-
-const handleSeeDetails = async () => {
-  await authActions.accessBillingPortal()
-}
 </script>

src/components/dialog/content/credit/LegacyCreditTopUpOption.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="flex items-center gap-2">
-    <Tag
-      severity="secondary"
-      icon="pi pi-wallet"
-      rounded
-      class="p-1 text-amber-400"
-    />
-    <div v-if="editable" class="flex items-center gap-2">
-      <InputNumber
-        v-model="customAmount"
-        :min="1"
-        :max="1000"
-        :step="1"
-        show-buttons
-        :allow-empty="false"
-        :highlight-on-focus="true"
-        prefix="$"
-        pt:pc-input-text:root="w-28"
-        @blur="
-          (e: InputNumberBlurEvent) =>
-            (customAmount = clampUsd(Number(e.value)))
-        "
-        @input="
-          (e: InputNumberInputEvent) =>
-            (customAmount = clampUsd(Number(e.value)))
-        "
-      />
-      <span class="text-xs text-muted">{{ formattedCredits }}</span>
-    </div>
-    <div v-else class="flex flex-col leading-tight">
-      <span class="text-xl font-semibold">{{ formattedCredits }}</span>
-      <span class="text-xs text-muted">{{ formattedUsd }}</span>
-    </div>
-  </div>
-  <ProgressSpinner v-if="loading" class="h-8 w-8" />
-  <Button
-    v-else
-    :severity="preselected ? 'primary' : 'secondary'"
-    :outlined="!preselected"
-    :label="$t('credits.topUp.buyNow')"
-    @click="handleBuyNow"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import InputNumber from 'primevue/inputnumber'
-import type {
-  InputNumberBlurEvent,
-  InputNumberInputEvent
-} from 'primevue/inputnumber'
-import ProgressSpinner from 'primevue/progressspinner'
-import Tag from 'primevue/tag'
-import { computed, onBeforeUnmount, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  clampUsd,
-  formatCreditsFromUsd,
-  formatUsd
-} from '@/base/credits/comfyCredits'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useTelemetry } from '@/platform/telemetry'
-
-const authActions = useFirebaseAuthActions()
-const telemetry = useTelemetry()
-
-const {
-  amount,
-  preselected,
-  editable = false
-} = defineProps<{
-  amount: number
-  preselected: boolean
-  editable?: boolean
-}>()
-
-const customAmount = ref(amount)
-const didClickBuyNow = ref(false)
-const loading = ref(false)
-const { t, locale } = useI18n()
-
-const displayUsdAmount = computed(() =>
-  editable ? clampUsd(Number(customAmount.value)) : clampUsd(amount)
-)
-
-const formattedCredits = computed(
-  () =>
-    `${formatCreditsFromUsd({
-      usd: displayUsdAmount.value,
-      locale: locale.value
-    })} ${t('credits.credits')}`
-)
-
-const formattedUsd = computed(
-  () => `$${formatUsd({ value: displayUsdAmount.value, locale: locale.value })}`
-)
-
-const handleBuyNow = async () => {
-  const creditAmount = displayUsdAmount.value
-  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
-
-  loading.value = true
-  try {
-    await authActions.purchaseCredits(creditAmount)
-    didClickBuyNow.value = true
-  } finally {
-    loading.value = false
-  }
-}
-
-onBeforeUnmount(() => {
-  if (didClickBuyNow.value) {
-    // If clicked buy now, then returned back to the dialog and closed, fetch the balance
-    void authActions.fetchBalance()
-  }
-})
-</script>