From 513d18e4dbf7cc359fc8ef0c01819da2f3240203 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Wed, 25 Dec 2024 14:22:59 +0800
Subject: [PATCH] feat(console): add token usage exceed notification (#6907)

add token usage exceed notification for dev tenants
---
 .../DevTenantNotification/index.tsx           | 40 +++++++++++++++++++
 .../pages/TenantSettings/index.module.scss    |  4 ++
 .../src/pages/TenantSettings/index.tsx        |  2 +
 .../admin-console/subscription/index.ts       |  5 ++-
 4 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 packages/console/src/pages/TenantSettings/DevTenantNotification/index.tsx

diff --git a/packages/console/src/pages/TenantSettings/DevTenantNotification/index.tsx b/packages/console/src/pages/TenantSettings/DevTenantNotification/index.tsx
new file mode 100644
index 000000000..7af1fd4ff
--- /dev/null
+++ b/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;
diff --git a/packages/console/src/pages/TenantSettings/index.module.scss b/packages/console/src/pages/TenantSettings/index.module.scss
index 4b3206caf..2d75ed9db 100644
--- a/packages/console/src/pages/TenantSettings/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/index.module.scss
@@ -14,3 +14,7 @@
 .tabs {
   margin: _.unit(4) 0;
 }
+
+.notification {
+  margin-top: _.unit(4);
+}
diff --git a/packages/console/src/pages/TenantSettings/index.tsx b/packages/console/src/pages/TenantSettings/index.tsx
index 1e9b013cc..f4e0de6ba 100644
--- a/packages/console/src/pages/TenantSettings/index.tsx
+++ b/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" />
diff --git a/packages/phrases/src/locales/en/translation/admin-console/subscription/index.ts b/packages/phrases/src/locales/en/translation/admin-console/subscription/index.ts
index 7b0812f8a..a349ba31f 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/subscription/index.ts
+++ b/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.",
   },
 };