feat(console): init enterprise subscription page (#8127)

* feat(console): add enterprise subscription management page

add enterprise subscritpion management page

# Conflicts:
#	pnpm-lock.yaml

* chore(console): bump cloud version

bump cloud version

* fix(console): add i18n phrase

add i18n phrase

Author: simeng-li

packages/connectors/connector-logto-email/package.json

@@ -52,7 +52,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-9c40a76",
+    "@logto/cloud": "0.2.5-2553f41",
     "@silverhand/eslint-config": "6.0.1",
     "@silverhand/ts-config": "6.0.0",
     "@types/node": "^22.14.0",

packages/console/package.json

@@ -28,7 +28,7 @@
     "@fontsource/roboto-mono": "^5.0.0",
     "@inkeep/cxkit-react": "^0.5.66",
     "@jest/types": "^29.5.0",
-    "@logto/cloud": "0.2.5-9c40a76",
+    "@logto/cloud": "0.2.5-2553f41",
     "@logto/connector-kit": "workspace:^",
     "@logto/core-kit": "workspace:^",
     "@logto/language-kit": "workspace:^",

packages/console/src/assets/icons/card.svg

@@ -60,8 +60,16 @@ export type TenantMemberResponse = GetArrayElementType<
 export type TenantInvitationResponse = GetArrayElementType<
   GuardedResponse<GetTenantAuthRoutes['/api/tenants/:tenantId/invitations']>
 >;
+// End of the auth routes types
 
 export type RegionResponse = GetArrayElementType<
   GuardedResponse<GetRoutes['/api/me/regions']>['regions']
 >;
-// End of the auth routes types
+
+export type LogtoEnterpriseResponse = GetArrayElementType<
+  GuardedResponse<GetRoutes['/api/me/logto-enterprises']>['logtoEnterprises']
+>;
+
+export type LogtoEnterpriseSubscriptionResponse = GuardedResponse<
+  GetRoutes['/api/me/logto-enterprises/:id']
+>;

packages/console/src/cloud/types/router.ts

@@ -45,6 +45,8 @@ function MauTokenExceededModal() {
         currentTenant && {
           mauLimit: currentTenant.usage.activeUsers,
           tokenLimit: currentTenant.usage.tokenUsage,
+          userTokenLimit: currentTenant.usage.userTokenUsage,
+          m2mTokenLimit: currentTenant.usage.m2mTokenUsage,
         }
       ),
     [currentTenant]

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

@@ -13,28 +13,13 @@ import IconButton from '@/ds-components/IconButton';
 import Tag from '@/ds-components/Tag';
 import TextLink from '@/ds-components/TextLink';
 import { ToggleTip } from '@/ds-components/Tip';
+import { formatQuotaNumber } from '@/utils/number';
 import { isPaidPlan } from '@/utils/subscription';
 
 import { formatNumber } from '../utils';
 
 import styles from './index.module.scss';
 
-const formatQuotaNumber = (number: number): string => {
-  if (number >= 1e6) {
-    return (number / 1e6).toFixed(1) + 'M';
-  }
-
-  if (number >= 1e3) {
-    return (number / 1e3).toFixed(1) + 'K';
-  }
-
-  if (Number.isInteger(number)) {
-    return number.toString();
-  }
-
-  return number.toFixed(2);
-};
-
 const formatNumberTypedUsageDescription = ({
   usage,
   quota,

packages/console/src/components/PlanUsage/PlanUsageCard/index.tsx

@@ -30,11 +30,11 @@ import { isProPlan } from '@/utils/subscription';
  * two quotas.
  * So we need to manually define it here, and calculate the status based on the two quotas.
  */
-enum CustomUsageKey {
+export enum CustomUsageKey {
   RbacEnabled = 'rbacEnabled',
 }
 
-type UsageKey =
+export type UsageKey =
   | keyof Pick<
       SubscriptionQuota,
       | 'mauLimit'
@@ -70,6 +70,13 @@ export const usageKeys: UsageKey[] = [
   'securityFeaturesEnabled',
 ];
 
+export const featureEnablementUsageKeys: UsageKey[] = [
+  'mfaEnabled',
+  CustomUsageKey.RbacEnabled,
+  'securityFeaturesEnabled',
+  'organizationsLimit',
+];
+
 export const usageKeyPriceMap: Record<UsageKey, number> = {
   mauLimit: 0,
   organizationsLimit: organizationAddOnUnitPrice,

packages/console/src/components/PlanUsage/utils.ts

@@ -0,0 +1,46 @@
+import useSWR from 'swr';
+
+import CardIcon from '@/assets/icons/card.svg?react';
+import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
+import { type LogtoEnterpriseResponse } from '@/cloud/types/router';
+import DynamicT from '@/ds-components/DynamicT';
+import TextLink from '@/ds-components/TextLink';
+
+import styles from '../index.module.scss';
+
+type Props = {
+  readonly className?: string;
+};
+
+function EnterpriseSubscriptions({ className }: Props) {
+  const cloudApi = useCloudApi();
+
+  const { data } = useSWR<{ logtoEnterprises: LogtoEnterpriseResponse[] }, Error>(
+    '/api/me/logto-enterprises',
+    async () => cloudApi.get('/api/me/logto-enterprises')
+  );
+
+  if (!data || data.logtoEnterprises.length === 0) {
+    return null;
+  }
+
+  // Currently only support one enterprise subscription per user
+  // If there are multiple, consider adding a dropdown selector in the future
+  const defaultEnterpriseSubscription = data.logtoEnterprises[0];
+
+  if (!defaultEnterpriseSubscription) {
+    return null;
+  }
+
+  return (
+    <TextLink
+      to={`enterprise-subscriptions/${defaultEnterpriseSubscription.id}`}
+      className={styles.button}
+      icon={<CardIcon className={styles.icon} />}
+    >
+      <DynamicT forKey="topbar.subscription" />
+    </TextLink>
+  );
+}
+
+export default EnterpriseSubscriptions;

packages/console/src/components/Topbar/EnterpriseSubscriptions/index.tsx

@@ -9,7 +9,7 @@ import DocumentIcon from '@/assets/icons/document-nav-button.svg?react';
 import CloudLogo from '@/assets/images/cloud-logo.svg?react';
 import Logo from '@/assets/images/logo.svg?react';
 import { githubReleasesLink } from '@/consts';
-import { isCloud } from '@/consts/env';
+import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
 import DynamicT from '@/ds-components/DynamicT';
 import Spacer from '@/ds-components/Spacer';
 import TextLink from '@/ds-components/TextLink';
@@ -18,6 +18,7 @@ import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { onKeyDownHandler } from '@/utils/a11y';
 
 import ContactModal from './ContactModal';
+import EnterpriseSubscriptions from './EnterpriseSubscriptions';
 import InkeepAskAi from './InkeepAskAi';
 import TenantSelector from './TenantSelector';
 import UserInfo from './UserInfo';
@@ -54,6 +55,8 @@ function Topbar({ className, hideTenantSelector, hideTitle }: Props) {
       )}
       <Spacer />
       {isCloud && <InkeepAskAi className={styles.button} />}
+      {/* TODO: Remove the dev features flag check when enterprise subscription is generally available */}
+      {isCloud && isDevFeaturesEnabled && <EnterpriseSubscriptions className={styles.button} />}
       <DocumentButton />
       <HelpButton />
       {!isCloud && <VersionButton />}

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

@@ -60,3 +60,8 @@ export enum OrganizationRoleDetailsTabs {
   Permissions = 'permissions',
   General = 'general',
 }
+
+export enum EnterpriseSubscriptionTabs {
+  Subscription = 'subscription',
+  BillingHistory = 'billing-history',
+}