fix: fix enterprise console issues (#6578)

* fix: fix enterprise console issues

* fix: exclude 0 quota in plan usage card

* fix: fix skuName and do not show sku ID for enterprise plan

packages/console/src/components/PlanUsage/index.tsx

@@ -42,11 +42,6 @@ const getUsageByKey = (
     return periodicUsage[key];
   }
 
-  // Show enabled status for organization feature.
-  if (key === 'organizationsLimit') {
-    return countBasedUsage[key] > 0;
-  }
-
   return countBasedUsage[key];
 };
 
@@ -101,7 +96,11 @@ function PlanUsage({ periodicUsage: rawPeriodicUsage }: Props) {
         }
       ),
       ...cond(
-        (key === 'tokenLimit' || key === 'mauLimit') && { quota: currentSubscriptionQuota[key] }
+        (key === 'tokenLimit' || key === 'mauLimit' || key === 'organizationsLimit') &&
+          // Do not show `xxx / 0` in displaying usage.
+          currentSubscriptionQuota[key] !== 0 && {
+            quota: currentSubscriptionQuota[key],
+          }
       ),
       // Hide usage tip for Enterprise plan.
       isUsageTipHidden: isEnterprisePlan,

packages/console/src/components/SkuName/index.tsx

@@ -1,6 +1,9 @@
+import { ReservedPlanId } from '@logto/schemas';
 import { type TFuncKey } from 'i18next';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { ReservedSkuId } from '@/types/subscriptions';
 
 const registeredSkuIdNamePhraseMap: Record<
@@ -19,8 +22,13 @@ type Props = {
   readonly skuId: string;
 };
 
-function SkuName({ skuId }: Props) {
+function SkuName({ skuId: rawSkuId }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.subscription' });
+  const {
+    currentSubscription: { isEnterprisePlan },
+  } = useContext(SubscriptionDataContext);
+  const skuId = isEnterprisePlan ? ReservedPlanId.Enterprise : rawSkuId;
+
   const skuNamePhrase = registeredSkuIdNamePhraseMap[skuId];
 
   /**

packages/console/src/pages/Mfa/MfaForm/index.tsx

@@ -1,4 +1,4 @@
-import { MfaFactor, MfaPolicy, ReservedPlanId, type SignInExperience } from '@logto/schemas';
+import { MfaFactor, MfaPolicy, type SignInExperience } from '@logto/schemas';
 import { useContext, useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -18,6 +18,7 @@ import Switch from '@/ds-components/Switch';
 import useApi from '@/hooks/use-api';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import { trySubmitSafe } from '@/utils/form';
+import { isPaidPlan } from '@/utils/subscription';
 
 import { type MfaConfigForm, type MfaConfig } from '../types';
 
@@ -34,12 +35,12 @@ type Props = {
 
 function MfaForm({ data, onMfaUpdated }: Props) {
   const {
-    currentSubscription: { planId },
+    currentSubscription: { planId, isEnterprisePlan },
     currentSubscriptionQuota,
     mutateSubscriptionQuotaAndUsages,
   } = useContext(SubscriptionDataContext);
   const isMfaDisabled =
-    isCloud && !currentSubscriptionQuota.mfaEnabled && planId !== ReservedPlanId.Pro;
+    isCloud && !currentSubscriptionQuota.mfaEnabled && !isPaidPlan(planId, isEnterprisePlan);
 
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { getDocumentationUrl } = useDocumentationUrl();

packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.module.scss

@@ -13,3 +13,7 @@
     color: var(--color-text-secondary);
   }
 }
+
+.notification {
+  margin-top: _.unit(3);
+}

packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx

@@ -122,8 +122,8 @@ function SwitchPlanActionBar({ onSubscriptionUpdated, currentSkuId, logtoSkus }:
         const isCurrentSku = currentSkuId === skuId;
         const isDowngrade = isDowngradePlan(currentSkuId, skuId);
 
-        // Let user contact us for Pro plan when they are currently on Enterprise plan.
-        return isEnterprisePlan && skuId === ReservedPlanId.Pro ? (
+        // Let user contact us when they are currently on Enterprise plan. Do not allow users to self-serve downgrade.
+        return isEnterprisePlan ? (
           <div>
             <a href={contactEmailLink} className={styles.buttonLink} rel="noopener">
               <Button title="general.contact_us_action" />