feat(console): add subscription page (#4118)

packages/console/src/consts/env.ts

@@ -1,4 +1,5 @@
 import { yes } from '@silverhand/essentials';
 
+export const isProduction = process.env.NODE_ENV === 'production';
 export const isCloud = yes(process.env.IS_CLOUD);
 export const adminEndpoint = process.env.ADMIN_ENDPOINT;

packages/console/src/consts/page-tabs.ts

@@ -34,4 +34,5 @@ export enum RoleDetailsTabs {
 export enum TenantSettingsTabs {
   Settings = 'settings',
   Domains = 'domains',
+  Subscription = 'subscription',
 }

packages/console/src/containers/ConsoleContent/index.tsx

@@ -36,6 +36,7 @@ import RoleUsers from '@/pages/RoleDetails/RoleUsers';
 import Roles from '@/pages/Roles';
 import SignInExperience from '@/pages/SignInExperience';
 import TenantSettings from '@/pages/TenantSettings';
+import Subscription from '@/pages/TenantSettings/Subscription';
 import TenantBasicSettings from '@/pages/TenantSettings/TenantBasicSettings';
 import TenantDomainSettings from '@/pages/TenantSettings/TenantDomainSettings';
 import UserDetails from '@/pages/UserDetails';
@@ -147,6 +148,7 @@ function ConsoleContent() {
                 <Route index element={<Navigate replace to={TenantSettingsTabs.Settings} />} />
                 <Route path={TenantSettingsTabs.Settings} element={<TenantBasicSettings />} />
                 <Route path={TenantSettingsTabs.Domains} element={<TenantDomainSettings />} />
+                <Route path={TenantSettingsTabs.Subscription} element={<Subscription />} />
               </Route>
             )}
           </Routes>

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

@@ -0,0 +1,14 @@
+import { withAppInsights } from '@logto/app-insights/react';
+
+import PageMeta from '@/components/PageMeta';
+
+function Subscription() {
+  return (
+    <div>
+      <PageMeta titleKey={['tenants.tabs.subscription', 'tenants.title']} />
+      WIP
+    </div>
+  );
+}
+
+export default withAppInsights(Subscription);

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

@@ -1,6 +1,7 @@
 import { Outlet } from 'react-router-dom';
 
 import { TenantSettingsTabs } from '@/consts';
+import { isProduction } from '@/consts/env';
 import CardTitle from '@/ds-components/CardTitle';
 import DynamicT from '@/ds-components/DynamicT';
 import TabNav, { TabNavItem } from '@/ds-components/TabNav';
@@ -22,6 +23,11 @@ function TenantSettings() {
         <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Domains}`}>
           <DynamicT forKey="tenants.tabs.domains" />
         </TabNavItem>
+        {!isProduction && (
+          <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Subscription}`}>
+            <DynamicT forKey="tenants.tabs.subscription" />
+          </TabNavItem>
+        )}
       </TabNav>
       <Outlet />
     </div>