feat(console,phrases): add SSO paywall for console (#5025)

packages/console/src/consts/plan-quotas.ts

@@ -77,12 +77,6 @@ export const ticketSupportResponseTimeMap: Record<string, number | undefined> =
   [ReservedPlanId.Pro]: 48,
 };
 
-export const ssoEnabledMap: EnabledFeatureMap = {
-  [ReservedPlanId.Free]: false,
-  [ReservedPlanId.Hobby]: true,
-  [ReservedPlanId.Pro]: true,
-};
-
 /**
  * Note: this is only for display purpose.
  *
@@ -170,4 +164,4 @@ export const planQuotaItemOrder = Object.values(planTableGroupKeyMap).flat();
  * - Related quota items will have a "Coming soon" tag in the plan selection component.
  * - Related quota items will be hidden from the downgrade plan notification modal.
  */
-export const comingSoonQuotaKeys: Array<keyof SubscriptionPlanQuota> = ['ssoEnabled'];
+export const comingSoonQuotaKeys: Array<keyof SubscriptionPlanQuota> = [];

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

@@ -1,6 +1,7 @@
 import { withAppInsights } from '@logto/app-insights/react';
-import { type SsoConnectorWithProviderConfig } from '@logto/schemas';
+import { type SsoConnectorWithProviderConfig, ReservedPlanId } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
+import { useContext, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import useSWR from 'swr';
@@ -11,11 +12,15 @@ import EnterpriseSsoConnectorEmpty from '@/assets/images/sso-connector-empty.svg
 import ItemPreview from '@/components/ItemPreview';
 import ListPage from '@/components/ListPage';
 import { defaultPageSize } from '@/consts';
+import { isCloud } from '@/consts/env';
+import { subscriptionPage } from '@/consts/pages';
+import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import TablePlaceholder from '@/ds-components/Table/TablePlaceholder';
 import Tag from '@/ds-components/Tag';
 import type { RequestError } from '@/hooks/use-api';
 import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher';
+import useSubscriptionPlan from '@/hooks/use-subscription-plan';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { buildUrl } from '@/utils/url';
 
@@ -32,10 +37,18 @@ function EnterpriseSsoConnectors() {
   const { pathname } = useLocation();
   const { navigate } = useTenantPathname();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { currentTenantId, isDevTenant } = useContext(TenantsContext);
+  const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
   const [{ page }, updateSearchParameters] = useSearchParametersWatcher({
     page: 1,
   });
 
+  const isSsoEnabled = !isCloud || currentPlan?.quota.ssoEnabled;
+
+  const handleButtonClick = useCallback(() => {
+    navigate(isSsoEnabled ? createEnterpriseSsoPathname : subscriptionPage);
+  }, [isSsoEnabled, navigate]);
+
   const url = buildUrl('api/sso-connectors', {
     page: String(page),
     page_size: String(pageSize),
@@ -51,16 +64,17 @@ function EnterpriseSsoConnectors() {
   return (
     <ListPage
       title={{
+        isBeta: true,
+        paywall: conditional((!isSsoEnabled || isDevTenant) && ReservedPlanId.Hobby),
         title: 'enterprise_sso.title',
         subtitle: 'enterprise_sso.subtitle',
       }}
       pageMeta={{ titleKey: 'enterprise_sso.page_title' }}
       createButton={conditional(
         ssoConnectors?.length && {
-          title: 'enterprise_sso.create',
-          onClick: () => {
-            navigate(createEnterpriseSsoPathname);
-          },
+          title: isSsoEnabled ? 'enterprise_sso.create' : 'upsell.upgrade_plan',
+          onClick: handleButtonClick,
+          icon: conditional(isSsoEnabled && <Plus />),
         }
       )}
       table={{
@@ -135,13 +149,11 @@ function EnterpriseSsoConnectors() {
             description="enterprise_sso.placeholder_description"
             action={
               <Button
-                title="enterprise_sso.create"
+                title={isSsoEnabled ? 'enterprise_sso.create' : 'upsell.upgrade_plan'}
                 type="primary"
                 size="large"
-                icon={<Plus />}
-                onClick={() => {
-                  navigate(createEnterpriseSsoPathname);
-                }}
+                icon={conditional(isSsoEnabled && <Plus />)}
+                onClick={handleButtonClick}
               />
             }
           />

packages/console/src/types/subscriptions.ts

@@ -16,8 +16,6 @@ export type SubscriptionPlanQuota = Omit<
   // Support
   communitySupportEnabled: boolean;
   ticketSupportResponseTime: number;
-  // SSO
-  ssoEnabled: boolean;
 };
 
 export type SubscriptionPlanQuotaEntries = Array<

packages/console/src/utils/subscription.ts

@@ -4,11 +4,7 @@ import dayjs from 'dayjs';
 
 import { tryReadResponseErrorBody } from '@/cloud/hooks/use-cloud-api';
 import { type SubscriptionPlanResponse } from '@/cloud/types/router';
-import {
-  communitySupportEnabledMap,
-  ssoEnabledMap,
-  ticketSupportResponseTimeMap,
-} from '@/consts/plan-quotas';
+import { communitySupportEnabledMap, ticketSupportResponseTimeMap } from '@/consts/plan-quotas';
 import { featuredPlanIdOrder, featuredPlanIds } from '@/consts/subscriptions';
 import { type SubscriptionPlanQuota, type SubscriptionPlan } from '@/types/subscriptions';
 
@@ -21,7 +17,6 @@ export const addSupportQuotaToPlan = (subscriptionPlanResponse: SubscriptionPlan
       ...quota,
       communitySupportEnabled: communitySupportEnabledMap[id] ?? false, // Fallback to not supported
       ticketSupportResponseTime: ticketSupportResponseTimeMap[id] ?? 0, // Fallback to not supported
-      ssoEnabled: ssoEnabledMap[id] ?? false, // Fallback to not supported
     },
   };
 };

packages/phrases/src/locales/de/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Standard-Connectors',
     built_in_email_connector: 'Integrierter E-Mail-Connector',
     mfa: 'MFA',
-    sso: 'Unternehmens-SSO (Q4, 2023)',
+    sso: 'Unternehmens-SSO',
   },
   user_management: {
     title: 'Benutzerverwaltung',

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

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Standard connectors',
     built_in_email_connector: 'Built-in email connector',
     mfa: 'MFA',
-    sso: 'Enterprise SSO (Q4, 2023)',
+    sso: 'Enterprise SSO',
   },
   user_management: {
     title: 'User management',

packages/phrases/src/locales/es/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Conectores estándar',
     built_in_email_connector: 'Conector de correo electrónico incorporado',
     mfa: 'MFA',
-    sso: 'SSO empresarial (T4, 2023)',
+    sso: 'SSO empresarial',
   },
   user_management: {
     title: 'Gestión de usuarios',

packages/phrases/src/locales/fr/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Connecteurs standards',
     built_in_email_connector: 'Connecteur email intégré',
     mfa: 'MFA',
-    sso: 'SSO entreprise (T4, 2023)',
+    sso: 'SSO entreprise',
   },
   user_management: {
     title: 'Gestion des utilisateurs',

packages/phrases/src/locales/it/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Connettori standard',
     built_in_email_connector: 'Connettore e-mail integrato',
     mfa: 'MFA',
-    sso: 'SSO aziendale (Q4, 2023)',
+    sso: 'SSO aziendale',
   },
   user_management: {
     title: 'Gestione utenti',

packages/phrases/src/locales/ja/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'スタンダードコネクタ',
     built_in_email_connector: '組み込みE-mailコネクタ',
     mfa: 'MFA',
-    sso: 'エンタープライズSSO（2023年第4四半期）',
+    sso: 'エンタープライズ SSO',
   },
   user_management: {
     title: 'ユーザー管理',

packages/phrases/src/locales/ko/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: '표준 커넥터',
     built_in_email_connector: '내장 이메일 커넥터',
     mfa: 'MFA',
-    sso: '기업 SSO (2023년 Q4)',
+    sso: '기업 SSO',
   },
   user_management: {
     title: '사용자 관리',

packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Standardowe podłączenia',
     built_in_email_connector: 'Wbudowane podłączenie e-mail',
     mfa: 'MFA',
-    sso: 'SSO przedsiębiorstwowe (IV kw. 2023)',
+    sso: 'SSO przedsiębiorstwowe',
   },
   user_management: {
     title: 'Zarządzanie użytkownikami',

packages/phrases/src/locales/pt-br/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Conectores padrão',
     built_in_email_connector: 'Conector de e-mail integrado',
     mfa: 'MFA',
-    sso: 'SSO Empresarial (T4, 2023)',
+    sso: 'SSO Empresarial',
   },
   user_management: {
     title: 'Gerenciamento de usuários',

packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Conectores padrão',
     built_in_email_connector: 'Conector de e-mail incorporado',
     mfa: 'MFA',
-    sso: 'SSO Empresarial (T4, 2023)',
+    sso: 'SSO Empresarial',
   },
   user_management: {
     title: 'Gestão de utilizadores',

packages/phrases/src/locales/ru/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Стандартные подключения',
     built_in_email_connector: 'Встроенное подключение электронной почты',
     mfa: 'MFA',
-    sso: 'Единый вход в корпоративные системы (IV кв. 2023 г.)',
+    sso: 'Единый вход в корпоративные системы',
   },
   user_management: {
     title: 'Управление пользователями',

packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: 'Standart bağlayıcılar',
     built_in_email_connector: 'Dahili e-posta bağlayıcısı',
     mfa: 'MFA',
-    sso: 'Kurumsal SSO (2023 Q4)',
+    sso: 'Kurumsal SSO',
   },
   user_management: {
     title: 'Kullanıcı Yönetimi',

packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: '标准连接器',
     built_in_email_connector: '内置电子邮件连接器',
     mfa: 'MFA',
-    sso: '企业SSO（2023年第四季度）',
+    sso: '企业 SSO',
   },
   user_management: {
     title: '用户管理',

packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: '標準連接器',
     built_in_email_connector: '內置電子郵件連接器',
     mfa: 'MFA',
-    sso: '企業SSO（Q4, 2023）',
+    sso: '企業 SSO',
   },
   user_management: {
     title: '用戶管理',

packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/quota-table.ts

@@ -35,7 +35,7 @@ const quota_table = {
     standard_connectors: '標準連接器',
     built_in_email_connector: '內建電子郵件連接器',
     mfa: '多因素認證',
-    sso: '企業SSO（2023年第4季）',
+    sso: '企業 SSO',
   },
   user_management: {
     title: '使用者管理',