From 13fbcec5b39229561ea36cf599cd5754b5dbfba8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 26 Nov 2024 14:20:59 +0000
Subject: [PATCH] chore: adapt billing page to custom billing scenarios

---
 .../BillingInformation/BillingInformation.tsx | 36 +++++++++++++------
 frontend/src/interfaces/instance.ts           |  1 +
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx b/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
index 09eb4a3f7e23..2a8a9dbab550 100644
--- a/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
+++ b/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
@@ -46,26 +46,40 @@ export const BillingInformation = () => {
 
     const plan = `${instanceStatus.plan}${isPAYG ? ' Pay-as-You-Go' : ''}`;
     const inactive = instanceStatus.state !== InstanceState.ACTIVE;
+    const { isCustomBilling } = instanceStatus;
 
     return (
         <Grid item xs={12} md={5}>
             <StyledInfoBox>
                 <StyledTitle variant='body1'>Billing information</StyledTitle>
                 <ConditionallyRender
-                    condition={inactive}
+                    condition={Boolean(isCustomBilling)}
                     show={
-                        <StyledAlert severity='warning'>
-                            In order to <strong>Upgrade trial</strong> you need
-                            to provide us your billing information.
-                        </StyledAlert>
+                        <StyledInfoLabel>
+                            Your billing is managed by Unleash
+                        </StyledInfoLabel>
+                    }
+                    elseShow={
+                        <>
+                            <ConditionallyRender
+                                condition={inactive}
+                                show={
+                                    <StyledAlert severity='warning'>
+                                        In order to{' '}
+                                        <strong>Upgrade trial</strong> you need
+                                        to provide us your billing information.
+                                    </StyledAlert>
+                                }
+                            />
+                            <BillingInformationButton update={!inactive} />
+                            <StyledInfoLabel>
+                                {inactive
+                                    ? 'Once we have received your billing information we will upgrade your trial within 1 business day'
+                                    : 'Update your credit card and business information and change which email address we send invoices to'}
+                            </StyledInfoLabel>
+                        </>
                     }
                 />
-                <BillingInformationButton update={!inactive} />
-                <StyledInfoLabel>
-                    {inactive
-                        ? 'Once we have received your billing information we will upgrade your trial within 1 business day'
-                        : 'Update your credit card and business information and change which email address we send invoices to'}
-                </StyledInfoLabel>
                 <StyledDivider />
                 <StyledInfoLabel>
                     <a
diff --git a/frontend/src/interfaces/instance.ts b/frontend/src/interfaces/instance.ts
index 5580f2fd2c3c..5a03e1e91be0 100644
--- a/frontend/src/interfaces/instance.ts
+++ b/frontend/src/interfaces/instance.ts
@@ -7,6 +7,7 @@ export interface IInstanceStatus {
     state?: InstanceState;
     seats?: number;
     minSeats?: number;
+    isCustomBilling?: boolean;
 }
 
 export enum InstanceState {