feat(console): add charge notification for token usage (#5153)

packages/console/package.json

@@ -26,7 +26,7 @@
     "@fontsource/roboto-mono": "^5.0.0",
     "@jest/types": "^29.5.0",
     "@logto/app-insights": "workspace:^1.3.1",
-    "@logto/cloud": "0.2.5-5deb133",
+    "@logto/cloud": "0.2.5-d28a065",
     "@logto/connector-kit": "workspace:^2.0.0",
     "@logto/core-kit": "workspace:^2.2.1",
     "@logto/language-kit": "workspace:^1.0.0",

packages/console/src/contexts/TenantsProvider.tsx

@@ -82,6 +82,7 @@ const defaultTenantResponse: TenantResponse = {
   usage: {
     activeUsers: 0,
     cost: 0,
+    tokenUsage: 0,
   },
   openInvoices: [],
   isSuspended: false,

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

@@ -1,11 +1,16 @@
+import { cond } from '@silverhand/essentials';
+
 import { type SubscriptionUsage, type Subscription } from '@/cloud/types/router';
 import BillInfo from '@/components/BillInfo';
+import ChargeNotification from '@/components/ChargeNotification';
 import FormCard from '@/components/FormCard';
 import PlanDescription from '@/components/PlanDescription';
 import PlanName from '@/components/PlanName';
 import PlanUsage from '@/components/PlanUsage';
+import { isDevFeaturesEnabled } from '@/consts/env';
 import FormField from '@/ds-components/FormField';
 import { type SubscriptionPlan } from '@/types/subscriptions';
+import { hasSurpassedQuotaLimit } from '@/utils/quota';
 
 import MauLimitExceedNotification from './MauLimitExceededNotification';
 import PaymentOverdueNotification from './PaymentOverdueNotification';
@@ -18,7 +23,17 @@ type Props = {
 };
 
 function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Props) {
-  const { id, name } = subscriptionPlan;
+  const {
+    id,
+    name,
+    quota: { tokenLimit },
+  } = subscriptionPlan;
+
+  const hasTokenSurpassedLimit = hasSurpassedQuotaLimit({
+    quotaKey: 'tokenLimit',
+    usage: subscriptionUsage.tokenUsage,
+    plan: subscriptionPlan,
+  });
 
   return (
     <FormCard title="subscription.current_plan" description="subscription.current_plan_description">
@@ -48,6 +63,16 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop
         currentPlan={subscriptionPlan}
         className={styles.notification}
       />
+      {/* Todo @xiaoyijun [Pricing] Remove feature flag */}
+      {isDevFeaturesEnabled && (
+        <ChargeNotification
+          hasSurpassedLimit={hasTokenSurpassedLimit}
+          quotaItemPhraseKey="tokens"
+          checkedFlagKey="token"
+          className={styles.notification}
+          quotaLimit={cond(typeof tokenLimit === 'number' && tokenLimit)}
+        />
+      )}
       <PaymentOverdueNotification className={styles.notification} />
     </FormCard>
   );

packages/schemas/src/types/logto-config.ts

@@ -60,6 +60,7 @@ export const adminConsoleDataGuard = z.object({
     .optional(),
   checkedChargeNotification: z
     .object({
+      token: z.boolean().optional(),
       apiResource: z.boolean().optional(),
       machineToMachineApp: z.boolean().optional(),
     })

pnpm-lock.yaml

@@ -2840,8 +2840,8 @@ importers:
         specifier: workspace:^1.3.1
         version: link:../app-insights
       '@logto/cloud':
-        specifier: 0.2.5-5deb133
+        specifier: 0.2.5-d28a065
-        version: 0.2.5-5deb133(zod@3.22.4)
+        version: 0.2.5-d28a065(zod@3.22.4)
       '@logto/connector-kit':
         specifier: workspace:^2.0.0
         version: link:../toolkit/connector-kit
@@ -7603,6 +7603,16 @@ packages:
       - zod
     dev: true
 
+  /@logto/cloud@0.2.5-d28a065(zod@3.22.4):
+    resolution: {integrity: sha512-04uwAaE9bIixt4nHAeqQsOzXxB0yFNDUYArJWjTo8xcmTQGBQttq8xyVKWVWCWPp7hSEZhb74h5b45my0IOMPA==}
+    engines: {node: ^20.9.0}
+    dependencies:
+      '@silverhand/essentials': 2.8.6
+      '@withtyped/server': 0.12.9(zod@3.22.4)
+    transitivePeerDependencies:
+      - zod
+    dev: true
+
   /@logto/js@3.0.1:
     resolution: {integrity: sha512-vsU6mH5oiiW3k00pMyVA4V31K2Bd0rOT9qWch2l5e5o1yCQLJ3zUIOjGjChu3m2TRu1d920iiUpZU3Lzf6Pwdw==}
     dependencies: