refactor(console): update system limit toast copy (#7994)

Author: xiaoyijun

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

@@ -24,11 +24,12 @@ const getRegisteredSkuNamePhrase = (
 
 type Props = {
   readonly skuId: string;
+  readonly isEnterprise?: boolean;
 };
 
-function SkuName({ skuId }: Props) {
+function SkuName({ skuId, isEnterprise = false }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.subscription' });
-  const skuNamePhrase = getRegisteredSkuNamePhrase(skuId);
+  const skuNamePhrase = isEnterprise ? 'enterprise' : getRegisteredSkuNamePhrase(skuId);
   return <span>{String(t(skuNamePhrase))}</span>;
 }
 

packages/console/src/consts/external-links.ts

@@ -9,6 +9,7 @@ export const reservationLink = 'https://cal.com/logto/30min';
 export const trustAndSecurityLink = 'https://logto.io/trust-and-security';
 export const pricingLink = 'https://logto.io/pricing';
 export const officialWebsiteContactPageLink = 'https://logto.io/contact';
+export const entityPolicyLink = 'https://docs.logto.io/logto-cloud/system-limit';
 
 /** Docs link */
 export const organizationsFeatureLink = '/organizations';

packages/console/src/ds-components/Toast/ToastWithAction.tsx

@@ -1,5 +1,6 @@
 import { type AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
+import { type ReactNode } from 'react';
 import { toast } from 'react-hot-toast';
 
 import Error from '@/assets/icons/toast-error.svg?react';
@@ -13,7 +14,7 @@ import styles from './index.module.scss';
 type ToastVariant = 'success' | 'error';
 
 type ToastWithActionProps = {
-  readonly message: string;
+  readonly message: ReactNode;
   readonly variant: ToastVariant;
   readonly actionText: AdminConsoleKey;
   readonly actionHref: string;

packages/console/src/ds-components/Toast/index.module.scss

@@ -8,7 +8,7 @@ div.toast {
   color: var(--color-text);
   box-shadow: var(--shadow-1);
   border-radius: _.unit(2);
-  max-width: 412px;
+  max-width: 480px;
 
   .image {
     display: flex;

…/hooks/use-system-limit-error-message.ts …hooks/use-system-limit-error-message.tsxpackages/console/src/hooks/use-system-limit-error-message.ts renamed to packages/console/src/hooks/use-system-limit-error-message.tsx packages/console/src/hooks/use-system-limit-error-message.ts renamed to packages/console/src/hooks/use-system-limit-error-message.tsx

@@ -1,10 +1,14 @@
 import { type AdminConsoleKey } from '@logto/phrases';
 import { type RequestErrorBody } from '@logto/schemas';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useCallback, useContext } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
 import { type SystemLimit } from '@/cloud/types/router';
+import SkuName from '@/components/SkuName';
+import { entityPolicyLink } from '@/consts';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
+import TextLink from '@/ds-components/TextLink';
 
 type SystemLimitKey = keyof SystemLimit;
 
@@ -59,8 +63,12 @@ const systemLimitEntityPhrases: Record<SystemLimitKey, AdminConsoleKey> = {
 
 export const useSystemLimitErrorMessage = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const {
+    currentSubscription: { planId, isEnterprisePlan },
+  } = useContext(SubscriptionDataContext);
+
   const parseSystemLimitErrorMessage = useCallback(
-    (errorBody: RequestErrorBody): string => {
+    (errorBody: RequestErrorBody) => {
       if (errorBody.code !== 'system_limit.limit_exceeded') {
         return t('general.unknown_error');
       }
@@ -73,9 +81,18 @@ export const useSystemLimitErrorMessage = () => {
       const { key } = result.data;
 
       const entity = t(systemLimitEntityPhrases[key]);
-      return t('system_limit.limit_exceeded', { entity });
+      return (
+        <Trans
+          components={{
+            a: <TextLink href={entityPolicyLink} targetBlank="noopener" />,
+            planName: <SkuName skuId={planId} isEnterprise={isEnterprisePlan} />,
+          }}
+        >
+          {t('system_limit.limit_exceeded', { entity })}
+        </Trans>
+      );
     },
-    [t]
+    [t, planId, isEnterprisePlan]
   );
 
   return {

packages/phrases/src/locales/ar/translation/admin-console/system-limit.ts

@@ -1,5 +1,6 @@
 const system_limit = {
-  limit_exceeded: 'وصل هذا المستأجر إلى حد {{entity}} وفقًا لسياسة حد الكيان الخاصة بـ Logto.',
+  limit_exceeded:
+    'لقد وصل مستأجر <planName/> إلى حد {{entity}} الخاص به بموجب <a>سياسة كيان Logto</a>.',
   entities: {
     application: 'التطبيق',
     third_party_application: 'تطبيق الطرف الثالث',

packages/phrases/src/locales/de/translation/admin-console/system-limit.ts

@@ -1,6 +1,6 @@
 const system_limit = {
   limit_exceeded:
-    'Dieser Mandant hat das {{entity}}-Limit gemäß Logtos Entitätslimitrichtlinie erreicht.',
+    'Dieser <planName/>-Mandant hat sein {{entity}}-Limit gemäß <a>Logtos Entitätsrichtlinie</a> erreicht.',
   entities: {
     application: 'Anwendung',
     third_party_application: 'Drittanbieter-Anwendung',

packages/phrases/src/locales/en/translation/admin-console/system-limit.ts

@@ -1,5 +1,6 @@
 const system_limit = {
-  limit_exceeded: "This tenant has reached the {{entity}} limit per Logto's entity limit policy.",
+  limit_exceeded:
+    "This <planName/> tenant has reached its {{entity}} limit under <a>Logto's entity policy</a>.",
   entities: {
     application: 'application',
     third_party_application: 'third-party application',

packages/phrases/src/locales/es/translation/admin-console/system-limit.ts

@@ -1,6 +1,6 @@
 const system_limit = {
   limit_exceeded:
-    'Este inquilino ha alcanzado el límite de {{entity}} según la política de límite de entidad de Logto.',
+    'Este inquilino <planName/> ha alcanzado su límite de {{entity}} bajo <a>la política de entidad de Logto</a>.',
   entities: {
     application: 'aplicación',
     third_party_application: 'aplicación de terceros',

packages/phrases/src/locales/fr/translation/admin-console/system-limit.ts

@@ -1,6 +1,6 @@
 const system_limit = {
   limit_exceeded:
-    "Ce locataire a atteint la limite de {{entity}} selon la politique de limite d'entité de Logto.",
+    "Ce locataire <planName/> a atteint sa limite de {{entity}} selon <a>la politique d'entité de Logto</a>.",
   entities: {
     application: 'application',
     third_party_application: 'application tierce',