feat(console): add token usage exceed notification (#6907)

add token usage exceed notification for dev tenants

packages/console/src/pages/TenantSettings/DevTenantNotification/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * @file Since dev tenant does not have the subscription and billing history tabs,
+ * we use this component to render the usage notification for dev tenants.
+ */
+
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { TenantsContext } from '@/contexts/TenantsProvider';
+import InlineNotification from '@/ds-components/InlineNotification';
+
+type Props = {
+  readonly className?: string;
+};
+
+function DevTenantNotification({ className }: Props) {
+  const { currentTenant } = useContext(TenantsContext);
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  if (!currentTenant) {
+    return null;
+  }
+
+  const {
+    usage: { tokenUsage },
+    quota: { tokenLimit },
+  } = currentTenant;
+
+  if (tokenLimit === null || tokenUsage < tokenLimit) {
+    return null;
+  }
+
+  return (
+    <InlineNotification severity="error" className={className}>
+      {t('subscription.token_usage_notification.dev_plan_exceeded')}
+    </InlineNotification>
+  );
+}
+
+export default DevTenantNotification;

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

@@ -14,3 +14,7 @@
 .tabs {
   margin: _.unit(4) 0;
 }
+
+.notification {
+  margin-top: _.unit(4);
+}

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

@@ -8,6 +8,7 @@ import DynamicT from '@/ds-components/DynamicT';
 import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
 
+import DevTenantNotification from './DevTenantNotification';
 import styles from './index.module.scss';
 
 function TenantSettings() {
@@ -23,6 +24,7 @@ function TenantSettings() {
         subtitle="tenants.description"
         className={styles.cardTitle}
       />
+      {isDevTenant && <DevTenantNotification className={styles.notification} />}
       <TabNav className={styles.tabs}>
         <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Settings}`}>
           <DynamicT forKey="tenants.tabs.settings" />

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

@@ -71,9 +71,10 @@ const subscription = {
   usage,
   token_usage_notification: {
     exceeded:
-      '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.',
+      'You have exceeded 100% of your quota limit. Users will no longer be able to log in properly. Please upgrade immediately to avoid any inconvenience.',
     close_to_limit:
-      'You almost reached your <planName/> token usage limit. Logto will stop granting tokens when the limit is reached. Please upgrade your plan to premium to avoid any inconvenience.',
+      'You almost reached your token usage limit. Logto will stop granting token if your usage exceeds 100%. Please upgrade your plan to avoid any inconvenience. Logto will stop granting tokens if your usage exceeds 100%.',
+    dev_plan_exceeded: "This tenant has reached the token limit per Logto's entity limit policy.",
   },
 };