remove topup list if on hacker plan

app/javascript/dashboard/routes/dashboard/settings/billing-v2/IndexV2.vue

@@ -12,6 +12,7 @@ import CreditGrants from './components/CreditGrants.vue';
 import PricingPlans from './components/PricingPlans.vue';
 import TopupOptions from './components/TopupOptions.vue';
 import BillingHeader from '../billing/components/BillingHeader.vue';
+import BillingCard from '../billing/components/BillingCard.vue';
 import ButtonV4 from 'next/button/Button.vue';
 
 const router = useRouter();
@@ -33,6 +34,15 @@ const isLoading = computed(() => {
   );
 });
 
+const canUseTopup = computed(() => {
+  const planName = currentAccount.value?.custom_attributes?.plan_name;
+  // Block topup if no plan or on Hacker plan
+  if (!planName || planName.toLowerCase() === 'hacker') {
+    return false;
+  }
+  return true;
+});
+
 const handleInitialLoad = async () => {
   // If self-hosted, redirect to dashboard
   if (!isOnChatwootCloud.value) {
@@ -112,11 +122,25 @@ onMounted(handleInitialLoad);
 
         <!-- Top-up Options -->
         <TopupOptions
+          v-if="canUseTopup"
           :options="v2BillingData.topupOptions"
           :is-loading="v2BillingUIFlags.isFetchingTopupOptions"
           :is-processing="v2BillingUIFlags.isTopupInProcess"
         />
 
+        <!-- Upgrade Notice for Hacker Plan -->
+        <BillingCard
+          v-else
+          :title="$t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.TITLE')"
+          :description="$t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.UPGRADE_REQUIRED')"
+        >
+          <div class="px-5 pb-5">
+            <p class="text-sm text-n-600">
+              {{ $t('BILLING_SETTINGS_V2.TOPUP_OPTIONS.UPGRADE_MESSAGE') }}
+            </p>
+          </div>
+        </BillingCard>
+
         <!-- Credit History -->
         <CreditGrants
           :grants="v2BillingData.creditGrants"

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -26,6 +26,7 @@ const {
 } = useCaptain();
 
 const uiFlags = useMapGetter('accounts/getUIFlags');
+const isStripeBillingV2Enabled = useMapGetter('globalConfig/isStripeBillingV2Enabled');
 const store = useStore();
 
 const BILLING_REFRESH_ATTEMPTED = 'billing_refresh_attempted';
@@ -113,6 +114,10 @@ const onClickBillingPortal = () => {
   store.dispatch('accounts/checkout');
 };
 
+const onClickV2BillingPortal = () => {
+  router.push({ name: 'billing_settings_v2_index' });
+};
+
 const onToggleChatWindow = () => {
   if (window.$chatwoot) {
     window.$chatwoot.toggle();
@@ -144,6 +149,18 @@ onMounted(handleBillingPageLogic);
     <template #body>
       <section class="grid gap-4">
         <BillingCard
+          v-if="isStripeBillingV2Enabled"
+          :title="$t('BILLING_SETTINGS.V2_BILLING_PORTAL.TITLE')"
+          :description="$t('BILLING_SETTINGS.V2_BILLING_PORTAL.DESCRIPTION')"
+        >
+          <template #action>
+            <ButtonV4 sm solid blue @click="onClickV2BillingPortal">
+              {{ $t('BILLING_SETTINGS.V2_BILLING_PORTAL.BUTTON_TXT') }}
+            </ButtonV4>
+          </template>
+        </BillingCard>
+        <BillingCard
+          v-else
           :title="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.TITLE')"
           :description="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.DESCRIPTION')"
         >