refactor(console): show token usage exceed modal (#6897)

show token usage limit exceed modal

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

@@ -14,20 +14,26 @@ import InlineNotification from '@/ds-components/InlineNotification';
 import ModalLayout from '@/ds-components/ModalLayout';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import modalStyles from '@/scss/modal.module.scss';
+import { isPaidPlan } from '@/utils/subscription';
 
 import SkuName from '../SkuName';
 
 import styles from './index.module.scss';
 
-function MauExceededModal() {
+function MauTokenExceededModal() {
   const {
-    currentSubscription: { planId },
+    currentSubscription: { planId, isEnterprisePlan },
   } = useContext(SubscriptionDataContext);
   const { currentTenant } = useContext(TenantsContext);
 
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { navigate } = useTenantPathname();
 
+  const isPaidSubscriptionPlan = useMemo(
+    () => isPaidPlan(planId, isEnterprisePlan),
+    [planId, isEnterprisePlan]
+  );
+
   const [hasClosed, setHasClosed] = useState(false);
   const handleCloseModal = () => {
     setHasClosed(true);
@@ -51,7 +57,15 @@ function MauExceededModal() {
       currentTenant.usage.activeUsers >= currentTenant.quota.mauLimit
   );
 
-  if (hasClosed || !isMauExceeded) {
+  const isTokenExceeded = conditional(
+    currentTenant &&
+      // Token usage add-on will be automatically applied for paid plans
+      !isPaidSubscriptionPlan &&
+      currentTenant.quota.tokenLimit !== null &&
+      currentTenant.usage.tokenUsage >= currentTenant.quota.tokenLimit
+  );
+
+  if (hasClosed || (!isMauExceeded && !isTokenExceeded)) {
     return null;
   }
 
@@ -64,7 +78,7 @@ function MauExceededModal() {
       onRequestClose={handleCloseModal}
     >
       <ModalLayout
-        title="upsell.mau_exceeded_modal.title"
+        title={`upsell.${isTokenExceeded ? 'token' : 'mau'}_exceeded_modal.title`}
         footer={
           <>
             <a href={contactEmailLink} className={styles.linkButton} rel="noopener">
@@ -82,6 +96,7 @@ function MauExceededModal() {
         }
         onClose={handleCloseModal}
       >
+        {isMauExceeded && (
           <InlineNotification severity="error">
             <Trans
               components={{
@@ -91,6 +106,18 @@ function MauExceededModal() {
               {t('upsell.mau_exceeded_modal.notification')}
             </Trans>
           </InlineNotification>
+        )}
+        {isTokenExceeded && (
+          <InlineNotification severity="error">
+            <Trans
+              components={{
+                planName: <SkuName skuId={planId} />,
+              }}
+            >
+              {t('upsell.token_exceeded_modal.notification')}
+            </Trans>
+          </InlineNotification>
+        )}
         <FormField title="subscription.plan_usage">
           <PlanUsage periodicUsage={periodicUsage} />
         </FormField>
@@ -99,4 +126,4 @@ function MauExceededModal() {
   );
 }
 
-export default MauExceededModal;
+export default MauTokenExceededModal;

packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import MauExceededModal from '@/components/MauExceededModal';
+import MauTokenExceededModal from '@/components/MauTokenExceededModal';
 import PaymentOverdueModal from '@/components/PaymentOverdueModal';
 import { isCloud } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
@@ -18,10 +18,10 @@ function TenantNotificationContainer() {
 
   return (
     <>
-      {/* Note: we won't check the MAU limit and payment for dev tenants */}
+      {/* Note: we won't check the MAU limit, token limit and payment for dev tenants */}
       {!isDevTenant && (
         <>
-          <MauExceededModal />
+          <MauTokenExceededModal />
           <PaymentOverdueModal />
         </>
       )}

packages/phrases/src/locales/en/translation/admin-console/upsell/index.ts

@@ -25,6 +25,11 @@ const upsell = {
       'Your current MAU has exceeded the limit of <planName/>. Please upgrade your plan to premium promptly to avoid suspension of Logto service. ',
     update_plan: 'Update Plan',
   },
+  token_exceeded_modal: {
+    title: 'Token usage exceeded the limit. Upgrade your plan.',
+    notification:
+      'You have exceeded your <planName/> token usage limit. Users will not be able to access the Logto service properly. Please upgrade your plan to premium promptly to avoid any inconvenience.',
+  },
   payment_overdue_modal: {
     title: 'Bill payment overdue',
     notification: