refactor(console): update tenant subscription page (#8121)

simeng-li · web-flow · commit b7966d59df91 · 2025-12-24T11:52:19.000+08:00
* refactor(console): update tenant subscription page

update tenant subscription settings page

* refactor(console): remove duplicate hook statement

remove duplicate hook statement
diff --git a/packages/console/src/components/PlanUsage/PlanUsageCard/index.tsx b/packages/console/src/components/PlanUsage/PlanUsageCard/index.tsx
@@ -98,6 +98,7 @@ export type Props = {
   readonly usageAddOnSku?: LogtoSkuResponse;
 };
 
+// eslint-disable-next-line complexity
 function PlanUsageCard({
   usage,
   quota,
@@ -112,7 +113,7 @@ function PlanUsageCard({
 }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
-    currentSubscription: { planId, isEnterprisePlan },
+    currentSubscription: { planId, isEnterprisePlan, quotaScope },
   } = useContext(SubscriptionDataContext);
 
   const isPaidTenant = isPaidPlan(planId, isEnterprisePlan);
@@ -175,7 +176,11 @@ function PlanUsageCard({
                   className={classNames(
                     styles.usageTip,
                     // Hide usage tip for free plan users.
-                    (!isPaidTenant || basicQuota === undefined || isQuotaNoticeHidden) &&
+                    (!isPaidTenant ||
+                      // Hide usage tip for shared enterprise subscription tenants.
+                      quotaScope === 'shared' ||
+                      basicQuota === undefined ||
+                      isQuotaNoticeHidden) &&
                       styles.hidden
                   )}
                 />
@@ -225,8 +230,8 @@ function PlanUsageCard({
               forKey={`subscription.usage.${usage ? 'status_active' : 'status_inactive'}`}
             />
           </Tag>
-          {/* Only show the quota notice for enterprise plan. */}
-          {quota !== undefined && isEnterprisePlan && (
+          {/* Only show the quota notice for enterprise plan with non-shared quota scope */}
+          {quota !== undefined && isEnterprisePlan && quotaScope !== 'shared' && (
             <div className={styles.usageTip}>
               {/* Consider the type of quota is number, null or boolean, the following statement covers all cases. */}
               {(() => {
diff --git a/packages/console/src/hooks/use-console-routes/routes/tenant-settings.tsx b/packages/console/src/hooks/use-console-routes/routes/tenant-settings.tsx
@@ -4,6 +4,7 @@ import { Navigate, type RouteObject } from 'react-router-dom';
 import { safeLazy } from 'react-safe-lazy';
 
 import { TenantSettingsTabs } from '@/consts';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
 import NotFound from '@/pages/NotFound';
@@ -25,6 +26,9 @@ const Subscription = safeLazy(async () => import('@/pages/TenantSettings/Subscri
 
 export const useTenantSettings = () => {
   const { isDevTenant } = useContext(TenantsContext);
+  const {
+    currentSubscription: { quotaScope },
+  } = useContext(SubscriptionDataContext);
   const {
     access: { canInviteMember, canManageTenant },
   } = useCurrentTenantScopes();
@@ -57,11 +61,16 @@ export const useTenantSettings = () => {
         !isDevTenant &&
           canManageTenant && [
             { path: TenantSettingsTabs.Subscription, element: <Subscription /> },
-            { path: TenantSettingsTabs.BillingHistory, element: <BillingHistory /> },
+            ...condArray(
+              // Hide the billing history page if the tenant is associated with a shared enterprise subscription
+              quotaScope !== 'shared' && [
+                { path: TenantSettingsTabs.BillingHistory, element: <BillingHistory /> },
+              ]
+            ),
           ]
       ),
     }),
-    [canInviteMember, canManageTenant, isDevTenant]
+    [canInviteMember, canManageTenant, isDevTenant, quotaScope]
   );
 
   return tenantSettings;
diff --git a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx
@@ -24,7 +24,7 @@ type Props = {
 function CurrentPlan({ periodicUsage, usageAddOnSkus }: Props) {
   const {
     currentSku: { unitPrice },
-    currentSubscription: { upcomingInvoice, isEnterprisePlan, planId },
+    currentSubscription: { upcomingInvoice, isEnterprisePlan, planId, quotaScope },
   } = useContext(SubscriptionDataContext);
 
   /**
@@ -53,21 +53,29 @@ function CurrentPlan({ periodicUsage, usageAddOnSkus }: Props) {
       <FormField title="subscription.plan_usage">
         <PlanUsage periodicUsage={periodicUsage} usageAddOnSkus={usageAddOnSkus} />
       </FormField>
-      <FormField title="subscription.next_bill">
-        <BillInfo
-          cost={upcomingCost}
-          isManagePaymentVisible={isPaidPlan(planId, isEnterprisePlan)}
-        />
-      </FormField>
-      {isPaidPlan(planId, isEnterprisePlan) && !isEnterprisePlan && (
-        <AddOnUsageChangesNotification className={styles.notification} />
+      {/* Only show usageExceed and payment info if the subscription quota scope is dedicated */}
+      {quotaScope === 'dedicated' && (
+        <>
+          <FormField title="subscription.next_bill">
+            <BillInfo
+              cost={upcomingCost}
+              isManagePaymentVisible={isPaidPlan(planId, isEnterprisePlan)}
+            />
+          </FormField>
+          {isPaidPlan(planId, isEnterprisePlan) && !isEnterprisePlan && (
+            <AddOnUsageChangesNotification className={styles.notification} />
+          )}
+          <TokenLimitExceededNotification
+            periodicUsage={periodicUsage}
+            className={styles.notification}
+          />
+          <MauLimitExceedNotification
+            periodicUsage={periodicUsage}
+            className={styles.notification}
+          />
+          <PaymentOverdueNotification className={styles.notification} />
+        </>
       )}
-      <TokenLimitExceededNotification
-        periodicUsage={periodicUsage}
-        className={styles.notification}
-      />
-      <MauLimitExceedNotification periodicUsage={periodicUsage} className={styles.notification} />
-      <PaymentOverdueNotification className={styles.notification} />
     </FormCard>
   );
 }
diff --git a/packages/console/src/pages/TenantSettings/Subscription/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/index.tsx
@@ -1,5 +1,5 @@
 import { type ResponseError } from '@withtyped/client';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import useSWR from 'swr';
 
 import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
@@ -8,6 +8,7 @@ import PageMeta from '@/components/PageMeta';
 import { isCloud } from '@/consts/env';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { TenantsContext } from '@/contexts/TenantsProvider';
+import useAvailableRegions from '@/hooks/use-available-regions';
 import { pickupFeaturedLogtoSkus } from '@/utils/subscription';
 
 import Skeleton from '../components/Skeleton';
@@ -21,7 +22,10 @@ function Subscription() {
   const cloudApi = useCloudApi();
   const { logtoSkus, currentSku, onCurrentSubscriptionUpdated } =
     useContext(SubscriptionDataContext);
-  const { currentTenantId, updateTenant } = useContext(TenantsContext);
+
+  const { currentTenant, currentTenantId, updateTenant } = useContext(TenantsContext);
+
+  const regions = useAvailableRegions();
 
   const reservedSkus = pickupFeaturedLogtoSkus(logtoSkus);
 
@@ -43,6 +47,15 @@ function Subscription() {
     })
   );
 
+  const isPrivateRegionTenant = useMemo(() => {
+    if (!currentTenant) {
+      return false;
+    }
+
+    const region = regions.getRegionByName(currentTenant.regionName);
+    return region ? region.isPrivate : false;
+  }, [currentTenant, regions]);
+
   const isLoading =
     (!periodicUsage && !periodicUsageError) || (!usageAddOnSkus && !usageAddOnSkusError);
 
@@ -71,19 +84,24 @@ function Subscription() {
     <div className={styles.container}>
       <PageMeta titleKey={['tenants.tabs.subscription', 'tenants.title']} />
       <CurrentPlan periodicUsage={periodicUsage} usageAddOnSkus={usageAddOnSkus} />
-      <ConsoleEmbeddedPricing />
-      <SwitchPlanActionBar
-        currentSkuId={currentSku.id}
-        logtoSkus={reservedSkus}
-        onSubscriptionUpdated={async () => {
-          /**
-           * The upcoming billing info is calculated based on the current subscription usage,
-           * and the usage is based on the current subscription plan,
-           * need to manually trigger the usage update while the subscription plan is changed.
-           */
-          onCurrentSubscriptionUpdated();
-        }}
-      />
+      {/* Hide pricing table for private regions */}
+      {!isPrivateRegionTenant && (
+        <>
+          <ConsoleEmbeddedPricing />
+          <SwitchPlanActionBar
+            currentSkuId={currentSku.id}
+            logtoSkus={reservedSkus}
+            onSubscriptionUpdated={async () => {
+              /**
+               * The upcoming billing info is calculated based on the current subscription usage,
+               * and the usage is based on the current subscription plan,
+               * need to manually trigger the usage update while the subscription plan is changed.
+               */
+              onCurrentSubscriptionUpdated();
+            }}
+          />
+        </>
+      )}
     </div>
   );
 }
diff --git a/packages/console/src/pages/TenantSettings/index.tsx b/packages/console/src/pages/TenantSettings/index.tsx
@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import { logtoCloud, TenantSettingsTabs } from '@/consts';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import CardTitle from '@/ds-components/CardTitle';
 import DynamicT from '@/ds-components/DynamicT';
@@ -13,6 +14,9 @@ import styles from './index.module.scss';
 
 function TenantSettings() {
   const { isDevTenant } = useContext(TenantsContext);
+  const {
+    currentSubscription: { quotaScope },
+  } = useContext(SubscriptionDataContext);
   const {
     access: { canManageTenant },
   } = useCurrentTenantScopes();
@@ -41,9 +45,12 @@ function TenantSettings() {
             <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Subscription}`}>
               <DynamicT forKey="tenants.tabs.subscription" />
             </TabNavItem>
-            <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.BillingHistory}`}>
-              <DynamicT forKey="tenants.tabs.billing_history" />
-            </TabNavItem>
+            {/* Hide the billing management and invoice pages if the tenant is associated with a shared enterprise subscription */}
+            {quotaScope !== 'shared' && (
+              <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.BillingHistory}`}>
+                <DynamicT forKey="tenants.tabs.billing_history" />
+              </TabNavItem>
+            )}
           </>
         )}
       </TabNav>
