refactor: update create tenant modal tenant type card content (#7927)

* refactor: update create tenant modal tenant type card content

* refactor: add key/translation for other languages

Author: darcyYe

packages/console/src/components/CreateTenantModal/EnvTagOptionContent/index.tsx

@@ -12,43 +12,55 @@ import styles from './index.module.scss';
 type Props = {
   readonly tag: TenantTag;
   /**
-   * Whether to hide the available production plan information.
+   * Although this parameter is named `isPrivateRegion`, considering our business requirements,
+   * it will also determine whether to hide the available production plan information.
    * Set to true when the available production plans should not be displayed,
    * for example, in contexts where this information is not relevant or should be hidden from the user.
    */
-  readonly isAvailableProductionPlanInvisible: boolean;
+  readonly isPrivateRegion: boolean;
 };
 
-const descriptionMap: Record<TenantTag, AdminConsoleKey> = {
-  [TenantTag.Development]: 'tenants.create_modal.development_description',
-  [TenantTag.Production]: 'tenants.create_modal.production_description',
+const getAdminConsoleKeyBy = (tenantTag: TenantTag, isPrivateRegion = false): AdminConsoleKey => {
+  if (tenantTag === TenantTag.Production) {
+    return 'tenants.create_modal.production_description';
+  }
+  if (isPrivateRegion) {
+    return 'tenants.create_modal.development_description_for_private_regions';
+  }
+  return 'tenants.create_modal.development_description';
 };
 
 const availableProductionPlanNames = [ReservedPlanName.Free, ReservedPlanName.Pro];
 
-function EnvTagOptionContent({ tag, isAvailableProductionPlanInvisible = false }: Props) {
+function EnvTagOptionContent({ tag, isPrivateRegion = false }: Props) {
+  const shouldShowHint = tag === TenantTag.Development || !isPrivateRegion;
+
   return (
     <div className={styles.container}>
       <TenantEnvTag isAbbreviated={false} tag={tag} size="large" className={styles.tag} />
       <div className={styles.description}>
-        <DynamicT forKey={descriptionMap[tag]} />
-      </div>
-      {(tag === TenantTag.Development || !isAvailableProductionPlanInvisible) && <Divider />}
-      <div className={styles.hint}>
-        {tag === TenantTag.Development && (
-          <DynamicT forKey="tenants.create_modal.development_hint" />
-        )}
-        {tag === TenantTag.Production && !isAvailableProductionPlanInvisible && (
-          <>
-            <DynamicT forKey="tenants.create_modal.available_plan" />
-            {availableProductionPlanNames.map((planName) => (
-              <Tag key={planName} variant="cell" size="small" className={styles.planNameTag}>
-                {planName}
-              </Tag>
-            ))}
-          </>
-        )}
+        <DynamicT forKey={getAdminConsoleKeyBy(tag, isPrivateRegion)} />
       </div>
+      {shouldShowHint && (
+        <>
+          <Divider />
+          <div className={styles.hint}>
+            {tag === TenantTag.Development && (
+              <DynamicT forKey="tenants.create_modal.development_hint" />
+            )}
+            {tag === TenantTag.Production && (
+              <>
+                <DynamicT forKey="tenants.create_modal.available_plan" />
+                {availableProductionPlanNames.map((planName) => (
+                  <Tag key={planName} variant="cell" size="small" className={styles.planNameTag}>
+                    {planName}
+                  </Tag>
+                ))}
+              </>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 }

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

@@ -298,10 +298,7 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
                     {currentRegion.tags.map((tag) => (
                       <Radio key={tag} value={tag}>
                         {/* If the region is private (for enterprise customers), we hide the available production plan. */}
-                        <EnvTagOptionContent
-                          tag={tag}
-                          isAvailableProductionPlanInvisible={currentRegion.isPrivate}
-                        />
+                        <EnvTagOptionContent tag={tag} isPrivateRegion={currentRegion.isPrivate} />
                       </Radio>
                     ))}
                   </RadioGroup>

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

@@ -49,6 +49,7 @@ const tenants = {
     subtitle: 'إنشاء مستأجر جديد يحتوي على موارد ومستخدمين معزولين.',
     tenant_usage_purpose: 'ماذا تريد استخدام هذا المستأجر ل؟',
     development_description: 'للاختبار فقط ويجب ألا يستخدم في الإنتاج. لا يلزم اشتراك.',
+    development_description_for_private_regions: 'للاختبار فقط ويجب ألا يستخدم في الإنتاج.',
     development_hint: 'لديه جميع الميزات المهنية ولكن لديه قيود مثل لافتة تسجيل الدخول.',
     production_description: 'للاستخدام من قبل المستخدمين النهائيين وقد يتطلب اشتراكًا مدفوعًا.',
     available_plan: 'الخطة المتاحة:',

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

@@ -53,6 +53,8 @@ const tenants = {
     tenant_usage_purpose: 'Wofür möchten Sie diesen Mieter verwenden?',
     development_description:
       'Nur für Tests und sollte nicht in der Produktion verwendet werden. Es ist kein Abonnement erforderlich.',
+    development_description_for_private_regions:
+      'Nur für Tests und sollte nicht in der Produktion verwendet werden.',
     development_hint:
       'Es verfügt über alle Pro-Funktionen, hat jedoch Einschränkungen wie ein Anmeldebanner.',
     production_description:

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

@@ -53,6 +53,8 @@ const tenants = {
     tenant_usage_purpose: 'What do you want to use this tenant for?',
     development_description:
       "For testing only and shouldn't be used in production. No subscription is required.",
+    development_description_for_private_regions:
+      "For testing only and shouldn't be used in production.",
     development_hint: 'It has all the pro features but has limitations like a sign-in banner.',
     production_description: 'For use by end-users and may require a paid subscription.',
     available_plan: 'Available plan:',

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

@@ -53,6 +53,8 @@ const tenants = {
     tenant_usage_purpose: '¿Para qué desea usar este inquilino?',
     development_description:
       'Solo para pruebas y no debe usarse en producción. No se requiere suscripción.',
+    development_description_for_private_regions:
+      'Solo para pruebas y no debe usarse en producción.',
     development_hint:
       'Tiene todas las características profesionales pero tiene limitaciones como un banner de inicio de sesión.',
     production_description: 'Para uso de usuarios finales y puede requerir una suscripción paga.',

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

@@ -53,6 +53,8 @@ const tenants = {
     tenant_usage_purpose: 'Dans quel but souhaitez-vous utiliser ce locataire?',
     development_description:
       "Uniquement pour les tests et ne devrait pas être utilisé en production. Aucune souscription n'est requise.",
+    development_description_for_private_regions:
+      'Uniquement pour les tests et ne devrait pas être utilisé en production.',
     development_hint:
       "Il possède toutes les fonctionnalités Pro mais présente des limitations telles qu'une bannière de connexion.",
     production_description:

packages/phrases/src/locales/it/translation/admin-console/tenants.ts

@@ -54,6 +54,8 @@ const tenants = {
     tenant_usage_purpose: 'Per cosa desideri utilizzare questo inquilino?',
     development_description:
       'Solo per scopi di test e non dovrebbe essere utilizzato in produzione. Non è richiesto alcun abbonamento.',
+    development_description_for_private_regions:
+      'Solo per scopi di test e non dovrebbe essere utilizzato in produzione.',
     development_hint:
       'Ha tutte le funzionalità professionali ma ha delle limitazioni come un banner di accesso.',
     production_description:

packages/phrases/src/locales/ja/translation/admin-console/tenants.ts

@@ -51,6 +51,7 @@ const tenants = {
     tenant_usage_purpose: 'このテナントを使用する目的は何ですか？',
     development_description:
       'テスト用であり、本番で使用すべきではありません。サブスクリプションは必要ありません。',
+    development_description_for_private_regions: 'テスト用であり、本番で使用すべきではありません。',
     development_hint: 'すべてのプロの機能がありますが、サインインバナーなどの制限があります。',
     production_description:
       'エンドユーザーに使用することを意図しており、有料のサブスクリプションが必要なアプリ向け。',

packages/phrases/src/locales/ko/translation/admin-console/tenants.ts

@@ -50,6 +50,8 @@ const tenants = {
     tenant_usage_purpose: '이 테넌트를 사용하는 목적은 무엇입니까?',
     development_description:
       '테스트 용으로만 사용하고 프로덕션에서 사용하지 마십시오. 구독이 필요하지 않습니다.',
+    development_description_for_private_regions:
+      '테스트 용으로만 사용하고 프로덕션에서 사용하지 마십시오.',
     development_hint: '로그인 배너와 같은 제한이 있지만 모든 프로 기능이 있습니다.',
     production_description: '최종 사용자가 사용하기 위한 것으로 유료 구독이 필요할 수 있습니다.',
     available_plan: '사용 가능한 요금제:',