From e83d92975ce9913d6a5731c36d722c2c5bbcee7e Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Wed, 15 Oct 2025 13:32:51 +0300
Subject: [PATCH] fix: now showing either payg or consumption (#10803)

1. Make it show either payg or consumption.
2. Add paid tag.
---
 .../component/admin/billing/BillingInfo/BillingInfo.tsx    | 7 +++----
 .../BillingInvoices/BillingInvoice/BillingInvoice.tsx      | 3 +++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/admin/billing/BillingInfo/BillingInfo.tsx b/frontend/src/component/admin/billing/BillingInfo/BillingInfo.tsx
index ff271e9a6e..19c882239f 100644
--- a/frontend/src/component/admin/billing/BillingInfo/BillingInfo.tsx
+++ b/frontend/src/component/admin/billing/BillingInfo/BillingInfo.tsx
@@ -79,7 +79,6 @@ export const BillingInfo: FC<BillingInfoProps> = () => {
     }
 
     const isPAYG = billing === 'pay-as-you-go';
-    const plan = `${instanceStatus.plan}${isPAYG ? ' Pay-as-You-Go' : ''}`;
     const isEnterpriseConsumption = billing === 'enterprise-consumption';
     const inactive = instanceStatus.state !== InstanceState.ACTIVE;
     const { isCustomBilling } = instanceStatus;
@@ -101,9 +100,9 @@ export const BillingInfo: FC<BillingInfoProps> = () => {
             <StyledRow>
                 <StyledItemTitle>Current plan</StyledItemTitle>{' '}
                 <StyledItemValue>
-                    {plan}
-                    {isPAYG || isEnterpriseConsumption ? ' Pay-as-You-Go' : ''}
-                    {isEnterpriseConsumption ? ' Consumption' : ''}
+                    {isPAYG && isEnterpriseConsumption
+                        ? 'Consumption'
+                        : 'Pay-as-You-Go'}
                 </StyledItemValue>
             </StyledRow>
             <StyledRow>
diff --git a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx
index 2a89e0308f..a114a99261 100644
--- a/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx
+++ b/frontend/src/component/admin/billing/BillingInvoices/BillingInvoice/BillingInvoice.tsx
@@ -145,6 +145,9 @@ export const BillingInvoice = ({
                     {status === 'invoiced' ? (
                         <Badge color='success'>Invoiced</Badge>
                     ) : null}
+                    {status === 'paid' ? (
+                        <Badge color='success'>Paid</Badge>
+                    ) : null}
                     <Typography variant='body1' sx={{ fontWeight: 700 }}>
                         {formatCurrency(totalAmount, currency)}
                     </Typography>