refactor(console): only display exceeded quota items on not eligible switch plan modal (#4929)

packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx

@@ -11,7 +11,7 @@ import useSubscribe from '@/hooks/use-subscribe';
 import useSubscriptionPlans from '@/hooks/use-subscription-plans';
 import NotEligibleSwitchPlanModalContent from '@/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent';
 import { type SubscriptionPlan } from '@/types/subscriptions';
-import { isExceededQuotaLimitError } from '@/utils/subscription';
+import { parseExceededQuotaLimitError } from '@/utils/subscription';
 
 type Props = {
   activeUsers: number;
@@ -59,10 +59,16 @@ function MauLimitExceededNotification({ activeUsers, currentPlan, className }: P
           setIsLoading(false);
         } catch (error: unknown) {
           setIsLoading(false);
+          const [result, exceededQuotaKeys] = await parseExceededQuotaLimitError(error);
 
-          if (await isExceededQuotaLimitError(error)) {
+          if (result) {
             await show({
-              ModalContent: () => <NotEligibleSwitchPlanModalContent targetPlan={proPlan} />,
+              ModalContent: () => (
+                <NotEligibleSwitchPlanModalContent
+                  targetPlan={proPlan}
+                  exceededQuotaKeys={exceededQuotaKeys}
+                />
+              ),
               title: 'subscription.not_eligible_modal.upgrade_title',
               confirmButtonText: 'general.got_it',
               confirmButtonType: 'primary',

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

@@ -14,7 +14,7 @@ import { useConfirmModal } from '@/hooks/use-confirm-modal';
 import useSubscribe from '@/hooks/use-subscribe';
 import NotEligibleSwitchPlanModalContent from '@/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent';
 import { type SubscriptionPlan } from '@/types/subscriptions';
-import { isDowngradePlan, isExceededQuotaLimitError } from '@/utils/subscription';
+import { isDowngradePlan, parseExceededQuotaLimitError } from '@/utils/subscription';
 
 import DowngradeConfirmModalContent from '../DowngradeConfirmModalContent';
 
@@ -85,10 +85,16 @@ function SwitchPlanActionBar({
       });
     } catch (error: unknown) {
       setCurrentLoadingPlanId(undefined);
-      if (await isExceededQuotaLimitError(error)) {
+      const [result, exceededQuotaKeys] = await parseExceededQuotaLimitError(error);
+
+      if (result) {
         await show({
           ModalContent: () => (
-            <NotEligibleSwitchPlanModalContent targetPlan={targetPlan} isDowngrade={isDowngrade} />
+            <NotEligibleSwitchPlanModalContent
+              targetPlan={targetPlan}
+              isDowngrade={isDowngrade}
+              exceededQuotaKeys={exceededQuotaKeys}
+            />
           ),
           title: isDowngrade
             ? 'subscription.not_eligible_modal.downgrade_title'

packages/console/src/pages/TenantSettings/components/NotEligibleSwitchPlanModalContent/index.tsx

@@ -28,10 +28,15 @@ const excludedQuotaKeys = new Set<keyof SubscriptionPlanQuota>([
 
 type Props = {
   targetPlan: SubscriptionPlan;
+  exceededQuotaKeys: Array<keyof SubscriptionPlanQuota>;
   isDowngrade?: boolean;
 };
 
-function NotEligibleSwitchPlanModalContent({ targetPlan, isDowngrade = false }: Props) {
+function NotEligibleSwitchPlanModalContent({
+  targetPlan,
+  exceededQuotaKeys,
+  isDowngrade = false,
+}: Props) {
   const { t } = useTranslation(undefined, {
     keyPrefix: 'admin_console.subscription.not_eligible_modal',
   });
@@ -42,11 +47,12 @@ function NotEligibleSwitchPlanModalContent({ targetPlan, isDowngrade = false }:
     // eslint-disable-next-line no-restricted-syntax
     const entries = Object.entries(quota) as SubscriptionPlanQuotaEntries;
     return entries
+      .filter(([quotaKey]) => exceededQuotaKeys.includes(quotaKey))
       .slice()
       .sort(([preQuotaKey], [nextQuotaKey]) =>
         sortBy(planQuotaItemOrder)(preQuotaKey, nextQuotaKey)
       );
-  }, [quota]);
+  }, [quota, exceededQuotaKeys]);
 
   return (
     <div className={styles.container}>

packages/console/src/utils/subscription.ts

@@ -1,3 +1,4 @@
+import { conditional, trySafe } from '@silverhand/essentials';
 import { ResponseError } from '@withtyped/client';
 import dayjs from 'dayjs';
 
@@ -10,7 +11,7 @@ import {
   ticketSupportResponseTimeMap,
 } from '@/consts/plan-quotas';
 import { featuredPlanIdOrder, featuredPlanIds } from '@/consts/subscriptions';
-import { type SubscriptionPlan } from '@/types/subscriptions';
+import { type SubscriptionPlanQuota, type SubscriptionPlan } from '@/types/subscriptions';
 
 export const addSupportQuotaToPlan = (subscriptionPlanResponse: SubscriptionPlanResponse) => {
   const { id, quota } = subscriptionPlanResponse;
@@ -51,17 +52,46 @@ export const formatPeriod = ({ periodStart, periodEnd, displayYear }: FormatPeri
 };
 
 /**
- * Note: this is a temporary solution to handle the case when the user tries to downgrade but the quota limit is exceeded.
- * Need a better solution to handle this case by sharing the error type between the console and cloud. - LOG-6608
+ * Parse the error data from the server if the error is caused by exceeding the quota limit.
+ * This is used to handle cases where users attempt to switch subscription plans, but the quota limit is exceeded.
+ *
+ * @param error - The error object from the server.
+ *
+ * @returns If the error is caused by exceeding the quota limit, returns `[true, exceededQuotaKeys]`, otherwise `[false]`.
+ *
+ * @remarks
+ * - This function parses the exceeded quota data from the error message string, since the server which uses `withtyped`
+ * only supports to return a `message` field in the error response body.
+ * - The choice to return exceeded quota keys instead of the entire data object is intentional.
+ * The data returned from the server is quota usage data, but what we want is quota limit data, so we will read quota limits from subscription plans.
  */
-export const isExceededQuotaLimitError = async (error: unknown) => {
+export const parseExceededQuotaLimitError = async (
+  error: unknown
+): Promise<[false] | [true, Array<keyof SubscriptionPlanQuota>]> => {
   if (!(error instanceof ResponseError)) {
-    return false;
+    return [false];
   }
 
   const { message } = (await tryReadResponseErrorBody(error)) ?? {};
 
-  return Boolean(message?.includes('Exceeded quota limit'));
+  const match = message?.match(/Status exception: Exceeded quota limit\. (.+)$/);
+
+  if (!match) {
+    return [false];
+  }
+
+  const data = match[1];
+  const exceededQuota = conditional(
+    // eslint-disable-next-line no-restricted-syntax -- trust the type from the server if error message matches
+    data && trySafe(() => JSON.parse(data) as Partial<SubscriptionPlanQuota>)
+  );
+
+  if (!exceededQuota) {
+    return [false];
+  }
+
+  // eslint-disable-next-line no-restricted-syntax
+  return [true, Object.keys(exceededQuota) as Array<keyof SubscriptionPlanQuota>];
 };
 
 export const pickupFeaturedPlans = (plans: SubscriptionPlan[]): SubscriptionPlan[] =>