From 1aa5b262b0f43891b49b65791fdefaaa98fefdd6 Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Fri, 20 Sep 2024 19:55:33 +0800
Subject: [PATCH] fix(console): fix PlanUsage not displayed for enterprise plan
 w/o subscription (#6611)

* fix(console): fix PlanUsage not displayed for enterprise plan w/o subscription

* fix(console): do not show next billing hint for enterprise plan

* fix(console): add comments
---
 .../console/src/components/BillInfo/index.tsx | 36 +++++++++++--------
 .../src/components/PlanUsage/index.tsx        |  6 +++-
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/console/src/components/BillInfo/index.tsx b/packages/console/src/components/BillInfo/index.tsx
index de2a7242c..6d453cf40 100644
--- a/packages/console/src/components/BillInfo/index.tsx
+++ b/packages/console/src/components/BillInfo/index.tsx
@@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import Tip from '@/assets/icons/tip.svg?react';
 import { addOnPricingExplanationLink } from '@/consts';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
@@ -22,6 +23,9 @@ function BillInfo({ cost, isManagePaymentVisible }: Props) {
   const { currentTenantId } = useContext(TenantsContext);
   const { visitManagePaymentPage } = useSubscribe();
   const [isLoading, setIsLoading] = useState(false);
+  const {
+    currentSubscription: { isEnterprisePlan },
+  } = useContext(SubscriptionDataContext);
 
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -38,21 +42,23 @@ function BillInfo({ cost, isManagePaymentVisible }: Props) {
             </ToggleTip>
           )}
         </div>
-        <div className={styles.description}>
-          <Trans
-            components={{
-              a: (
-                <TextLink
-                  className={styles.articleLink}
-                  href={addOnPricingExplanationLink}
-                  targetBlank="noopener"
-                />
-              ),
-            }}
-          >
-            {t('subscription.next_bill_hint')}
-          </Trans>
-        </div>
+        {!isEnterprisePlan && (
+          <div className={styles.description}>
+            <Trans
+              components={{
+                a: (
+                  <TextLink
+                    className={styles.articleLink}
+                    href={addOnPricingExplanationLink}
+                    targetBlank="noopener"
+                  />
+                ),
+              }}
+            >
+              {t('subscription.next_bill_hint')}
+            </Trans>
+          </div>
+        )}
       </div>
       {isManagePaymentVisible && (
         <Button
diff --git a/packages/console/src/components/PlanUsage/index.tsx b/packages/console/src/components/PlanUsage/index.tsx
index 388a4e372..ade281ae8 100644
--- a/packages/console/src/components/PlanUsage/index.tsx
+++ b/packages/console/src/components/PlanUsage/index.tsx
@@ -83,7 +83,11 @@ function PlanUsage({ periodicUsage: rawPeriodicUsage }: Props) {
     .filter(
       (key) =>
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        isAddOnAvailable || (onlyShowPeriodicUsage && (key === 'mauLimit' || key === 'tokenLimit'))
+        isAddOnAvailable ||
+        // TODO: design a flow for enterprise tenants onboarding.
+        // Show all usages for Enterprise plan since some of the enterprise tenants does not have Stripe subscription, as a result, the `isAddOnAvailable` will be undefined in this case, even if we will deprecate `isAddOnAvailable` soon, the plan usage will not be automatically fixed for these enterprise tenants.
+        isEnterprisePlan ||
+        (onlyShowPeriodicUsage && (key === 'mauLimit' || key === 'tokenLimit'))
     )
     .map((key) => ({
       usage: getUsageByKey(key, { periodicUsage, countBasedUsage: currentSubscriptionUsage }),