From adb1d200ea44ebcea122e934c9d367dd72bbb289 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Fri, 17 Oct 2025 14:11:19 +0300
Subject: [PATCH] feat: only show detailed billing for consumption and payg
 (#10825)

---
 frontend/src/component/admin/billing/Billing.tsx         | 9 ++++++++-
 .../component/admin/billing/BillingInfo/BillingInfo.tsx  | 5 +----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/admin/billing/Billing.tsx b/frontend/src/component/admin/billing/Billing.tsx
index 2329f1ef25..65eef2c621 100644
--- a/frontend/src/component/admin/billing/Billing.tsx
+++ b/frontend/src/component/admin/billing/Billing.tsx
@@ -11,6 +11,7 @@ import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { BillingInvoices } from './BillingInvoices/BillingInvoices.tsx';
 import { BillingInfo } from './BillingInfo/BillingInfo.tsx';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig.ts';
 
 const StyledHeader = styled(Typography)(({ theme }) => ({
     fontSize: theme.fontSizes.mainHeader,
@@ -32,6 +33,12 @@ export const Billing = () => {
         useInstanceStatus();
     const { invoices } = useInvoices();
     const trafficBillingDisplay = useUiFlag('trafficBillingDisplay');
+    const {
+        uiConfig: { billing },
+    } = useUiConfig();
+
+    const eligibleForDetailedBilling =
+        billing === 'pay-as-you-go' || billing === 'enterprise-consumption';
 
     useEffect(() => {
         const hardRefresh = async () => {
@@ -41,7 +48,7 @@ export const Billing = () => {
         hardRefresh();
     }, [refetchInstanceStatus, refresh]);
 
-    if (trafficBillingDisplay) {
+    if (trafficBillingDisplay && eligibleForDetailedBilling) {
         return (
             <Box
                 sx={(theme) => ({
diff --git a/frontend/src/component/admin/billing/BillingInfo/BillingInfo.tsx b/frontend/src/component/admin/billing/BillingInfo/BillingInfo.tsx
index 0c2af873c9..8f03e5e851 100644
--- a/frontend/src/component/admin/billing/BillingInfo/BillingInfo.tsx
+++ b/frontend/src/component/admin/billing/BillingInfo/BillingInfo.tsx
@@ -80,7 +80,6 @@ export const BillingInfo: FC<BillingInfoProps> = () => {
     }
 
     const isPAYG = billing === 'pay-as-you-go';
-    const isEnterpriseConsumption = billing === 'enterprise-consumption';
     const inactive = instanceStatus.state !== InstanceState.ACTIVE;
     const { isCustomBilling } = instanceStatus;
 
@@ -102,9 +101,7 @@ export const BillingInfo: FC<BillingInfoProps> = () => {
             <StyledRow>
                 <StyledItemTitle>Current plan</StyledItemTitle>{' '}
                 <StyledItemValue>
-                    {isPAYG && isEnterpriseConsumption
-                        ? 'Consumption'
-                        : 'Pay-as-You-Go'}
+                    {isPAYG ? 'Pay-as-You-Go' : 'Consumption'}
                 </StyledItemValue>
             </StyledRow>
             <StyledRow>