refactor(console): update free plan get-started notification (#4219)

packages/console/src/pages/GetStarted/FreePlanNotification/index.module.scss

@@ -24,10 +24,9 @@
     font: var(--font-body-2);
     color: var(--color-text-secondary);
     margin-top: _.unit(1);
-  }
 
-  .button {
-    flex-shrink: 0;
-    background-color: transparent;
+    .textLink {
+      text-underline-offset: 3px;
+    }
   }
 }

packages/console/src/pages/GetStarted/FreePlanNotification/index.tsx

@@ -2,14 +2,13 @@ import { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import FreePlanNotificationImage from '@/assets/images/free-plan-notification-image.svg';
-import PlanName from '@/components/PlanName';
 import { isCloud } from '@/consts/env';
+import { subscriptionPage } from '@/consts/pages';
 import { ReservedPlanId } from '@/consts/subscriptions';
 import { TenantsContext } from '@/contexts/TenantsProvider';
-import Button from '@/ds-components/Button';
+import TextLink from '@/ds-components/TextLink';
 import useSubscription from '@/hooks/use-subscription';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
-import { ReservedPlanName } from '@/types/subscriptions';
 
 import * as styles from './index.module.scss';
 
@@ -33,34 +32,17 @@ function FreePlanNotification() {
     <div className={styles.container}>
       <FreePlanNotificationImage className={styles.image} />
       <div>
-        <div className={styles.title}>
-          <Trans
-            components={{
-              planName: <PlanName name={ReservedPlanName.Free} />,
-            }}
-          >
-            {t('title')}
-          </Trans>
-        </div>
+        <div className={styles.title}>{t('title')}</div>
         <div className={styles.description}>
           <Trans
             components={{
-              planName: <PlanName name={ReservedPlanName.Free} />,
+              a: <TextLink to={subscriptionPage} className={styles.textLink} />,
             }}
           >
             {t('description')}
           </Trans>
         </div>
       </div>
-      <Button
-        title="upsell.get_started.view_plans"
-        type="outline"
-        className={styles.button}
-        size="large"
-        onClick={() => {
-          navigate('/tenant-settings/subscription');
-        }}
-      />
     </div>
   );
 }

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

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Pläne vergleichen',
   contact_us: 'Kontaktieren Sie uns',
   get_started: {
-    title: 'Starten Sie Ihre nahtlose Identitätsreise mit einem <planName/>!',
+    title: 'Starten Sie Ihre nahtlose Identitätsreise mit einem kostenlosen Plan!',
     description:
-      'Mit <planName/> können Sie Logto auf Ihren Nebenprojekten oder bei Tests ausprobieren. Um die volle Leistungsfähigkeit von Logto für Ihr Team zu nutzen, upgraden Sie, um unbegrenzten Zugriff auf Premium-Funktionen zu erhalten: unbegrenzte MAU-Nutzung, Maschine-zu-Maschine-Integration, nahtlose RBAC-Verwaltung, Langzeit-Audit-Logs und vieles mehr.',
-    view_plans: 'Pläne anzeigen',
+      'Der kostenlose Plan eignet sich perfekt, um Logto in Ihren eigenen Projekten oder Tests auszuprobieren. Um die volle Leistungsfähigkeit von Logto für Ihr Team zu nutzen, können Sie ein Upgrade durchführen, um uneingeschränkten Zugriff auf Premium-Funktionen zu erhalten: unbegrenzte MAU-Nutzung, Maschine-zu-Maschine-Integration, RBAC-Verwaltung, Langzeit-Audit-Protokolle, usw. <a>Alle Pläne anzeigen</a>',
   },
   create_tenant: {
     title: 'Wählen Sie Ihren Tenant-Plan aus',

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

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Compare plans',
   contact_us: 'Contact Us',
   get_started: {
-    title: 'Begin your seamless identity journey with a <planName/>!',
+    title: 'Begin your seamless identity journey with a free plan!',
     description:
-      '<planName/> is perfect for trying out Logto on your side projects or trials. To fully leverage Logto’s capabilities for your team, upgrade to gain unlimited access to premium features: unlimited MAU usage, Machine-to-Machine integration, seamless RBAC management, long-term audit logs, and more.',
-    view_plans: 'View Plans',
+      'Free plan is perfect for trying out Logto on your side projects or trials. To fully leverage Logto’s capabilities for your team, upgrade to gain unlimited access to premium features: unlimited MAU usage, Machine-to-Machine integration, RBAC management, long-term audit logs, etc. <a>View all plans</a>',
   },
   create_tenant: {
     title: 'Select your tenant plan',

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

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Comparar planes',
   contact_us: 'Contáctanos',
   get_started: {
-    title: '¡Comienza tu viaje de identidad sin problemas con un <planName/>!',
+    title: '¡Comience su viaje de identidad sin problemas con un plan gratuito!',
     description:
-      'Con <planName/>, puedes probar Logto en tus proyectos secundarios o pruebas. Para aprovechar al máximo las capacidades de Logto para tu equipo, actualízate para obtener acceso ilimitado a funciones premium: uso ilimitado de MAU, integración de máquina a máquina, gestión de RBAC sin problemas, registros de auditoría a largo plazo y más.',
-    view_plans: 'Ver planes',
+      'El plan gratuito es perfecto para probar Logto en sus proyectos personales o pruebas. Para aprovechar al máximo las capacidades de Logto para su equipo, actualice para obtener acceso ilimitado a las características premium: uso ilimitado de MAU, integración de Máquina a Máquina, gestión de RBAC, registros de auditoría a largo plazo, etc. <a>Ver todos los planes</a>',
   },
   create_tenant: {
     title: 'Selecciona tu plan de tenant',

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

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Comparer les plans',
   contact_us: 'Nous contacter',
   get_started: {
-    title: "Commencez votre parcours d'identité sans couture avec un <planName/> !",
+    title: "Commencez votre parcours d'identité fluide avec un plan gratuit!",
     description:
-      "<planName/> est parfait pour essayer Logto sur vos projets personnels ou vos essais. Pour tirer pleinement parti des capacités de Logto pour votre équipe, passez à un plan supérieur pour bénéficier d'un accès illimité aux fonctionnalités premium : utilisation illimitée des utilisateurs actifs mensuels (MAU), intégration Machine-to-Machine, gestion RBAC sans couture, journaux d'audit à long terme et bien plus encore.",
-    view_plans: 'Voir les plans',
+      "Le plan gratuit est parfait pour essayer Logto sur vos projets personnels ou vos essais. Pour tirer pleinement parti des fonctionnalités de Logto pour votre équipe, passez à un abonnement payant pour bénéficier d'un accès illimité aux fonctionnalités premium : utilisation illimitée des MAU, intégration machine à machine, gestion des RBAC, journaux d'audit à long terme, etc. <a>Voir tous les plans</a>",
   },
   create_tenant: {
     title: 'Sélectionnez votre plan pour le locataire',

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

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Confronta i piani',
   contact_us: 'Contattaci',
   get_started: {
-    title: 'Inizia il tuo percorso di identità senza problemi con un <planName/>!',
+    title: 'Inizia il tuo percorso di identità senza interruzioni con un piano gratuito!',
     description:
-      "Con <planName/>, puoi provare Logto nei tuoi progetti secondari o nelle prove. Per sfruttare al massimo le potenzialità di Logto per il tuo team, aggiorna per ottenere l'accesso illimitato alle funzionalità premium: utilizzo illimitato di MAU, integrazione macchina-macchina, gestione RBAC senza soluzione di continuità, registri di audit a lungo termine e altro ancora.",
-    view_plans: 'Visualizza i piani',
+      "Il piano gratuito è perfetto per provare Logto nei tuoi progetti personali o test. Per sfruttare al massimo le capacità di Logto per il tuo team, esegui l'upgrade per ottenere l'accesso illimitato alle funzionalità premium: utilizzo illimitato di MAU, integrazione da macchina a macchina, gestione RBAC, registri di audit a lungo termine, ecc. <a>Visualizza tutti i piani</a>",
   },
   create_tenant: {
     title: 'Seleziona il piano del tenant',

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

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'プラン比較',
   contact_us: 'お問い合わせ',
   get_started: {
-    title: 'シームレスなアイデンティティの旅を<planName/>で始めよう！',
+    title: '無料プランでスムーズなアイデンティティの旅を始めましょう！',
     description:
-      '<planName/>は、サイドプロジェクトや試用に最適です。チームのニーズに合わせて、アップグレードしてプレミアム機能を無制限で利用しましょう：無制限のMAU使用、マシン・ツー・マシンの統合、シームレスなRBAC管理、長期の監査ログなど。',
-    view_plans: 'プランを見る',
+      '無料プランは、サイドプロジェクトやトライアルでのLogtoの試用に最適です。チームにLogtoの機能を最大限に活用するには、アップグレードしてプレミアム機能への無制限アクセスを獲得してください：無制限のMAU利用、マシン間統合、RBAC管理、長期間の監査ログなど。<a>すべてのプランを表示</a>',
   },
   create_tenant: {
     title: 'テナントプランを選択',

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

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: '플랜 비교',
   contact_us: '문의하기',
   get_started: {
-    title: '<planName/>으로 시작하는 원활한 신원 관리 여정을 시작하세요!',
+    title: '무료 플랜으로 원활한 신원 확인 여정을 시작하세요!',
     description:
-      '<planName/>은 개인 프로젝트나 평가판에서 Logto를 시도하기에 완벽합니다. 팀의 요구를 완벽히 충족시키기 위해 프리미엄 기능에 무제한 액세스를 얻으려면 업그레이드하여 무제한 월간 활성 사용자(MAU) 사용, 기계 간 통합, 원활한 RBAC 관리, 장기간 감사 로그 등을 누려보세요.',
-    view_plans: '플랜 보기',
+      '무료 플랜은 사이드 프로젝트나 시험용으로 Logto를 시도하기에 완벽합니다. 팀에 Logto의 기능을 모두 활용하려면 업그레이드하여 프리미엄 기능에 무제한으로 접근하세요: 무제한 MAU 사용, 기기 간 통합, RBAC 관리, 장기간 감사 로그 등. <a>모든 플랜 보기</a>',
   },
   create_tenant: {
     title: '테넌트 플랜 선택하기',

packages/phrases/src/locales/pl-pl/translation/admin-console/upsell.ts

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Porównaj plany',
   contact_us: 'Skontaktuj się z nami',
   get_started: {
-    title: 'Rozpocznij swoją płynną podróż z Logto z planem <planName/>!',
+    title: 'Rozpocznij swój płynny proces identyfikacji dzięki darmowemu planowi!',
     description:
-      '<planName/> jest idealny do wypróbowania Logto w twoich projektach pobocznych lub próbach. Aby w pełni wykorzystać możliwości Logto dla twojego zespołu, ulepsz go, aby uzyskać nieograniczony dostęp do funkcji premium: nieograniczone użytkowanie MAU, integracja między maszynami, płynne zarządzanie RBAC, długoterminowe dzienniki audytowe i wiele innych.',
-    view_plans: 'Zobacz plany',
+      'Darmowy plan doskonale sprawdzi się do przetestowania Logto na twoich projektach czy testach. Aby w pełni wykorzystać możliwości Logto dla twojego zespołu, zaktualizuj plan i uzyskaj nieograniczony dostęp do funkcji premium: nielimitowanej liczby MAU, integracji maszynowej, zarządzania RBAC, długoterminowych dzienników audytu itd. <a>Zobacz wszystkie plany</a>',
   },
   create_tenant: {
     title: 'Wybierz swój plan najemcy',

packages/phrases/src/locales/pt-br/translation/admin-console/upsell.ts

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Comparar planos',
   contact_us: 'Contacte-nos',
   get_started: {
-    title: 'Inicie a sua jornada de identidade sem problemas com um <planName/>!',
+    title: 'Inicie sua jornada de identidade sem problemas com um plano gratuito!',
     description:
-      'Com o <planName/>, pode experimentar o Logto nos seus projetos secundários ou testes. Para tirar o máximo partido das capacidades do Logto para a sua equipa, atualize para obter acesso ilimitado a funcionalidades premium: utilização ilimitada de MAU, integração máquina-a-máquina, gestão RBAC sem complicações, registos de auditoria de longo prazo e muito mais.',
-    view_plans: 'Ver planos',
+      'O plano gratuito é perfeito para experimentar o Logto em seus projetos paralelos ou testes. Para aproveitar ao máximo as capacidades do Logto para sua equipe, faça um upgrade para obter acesso ilimitado aos recursos premium: uso ilimitado de MAU, integração Máquina-a-Máquina, gerenciamento de RBAC, logs de auditoria de longo prazo, etc. <a>Ver todos os planos</a>',
   },
   create_tenant: {
     title: 'Selecione o seu plano de inquilino',

packages/phrases/src/locales/pt-pt/translation/admin-console/upsell.ts

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Comparar planos',
   contact_us: 'Contacte-nos',
   get_started: {
-    title: 'Inicie a sua jornada de identidade sem problemas com um <planName/>!',
+    title: 'Inicie a sua jornada de identidade perfeita com um plano gratuito!',
     description:
-      'Com o <planName/>, pode experimentar o Logto nos seus projetos secundários ou testes. Para tirar o máximo partido das capacidades do Logto para a sua equipa, atualize para obter acesso ilimitado a funcionalidades premium: utilização ilimitada de MAU, integração máquina-a-máquina, gestão RBAC sem complicações, registos de auditoria de longo prazo e muito mais.',
-    view_plans: 'Ver planos',
+      'O plano gratuito é perfeito para experimentar o Logto nos seus projetos pessoais ou testes. Para aproveitar ao máximo as capacidades do Logto para a sua equipa, faça a atualização para obter acesso ilimitado às funcionalidades premium: utilização ilimitada de MAU, integração máquina a máquina, gestão RBAC, registos de auditoria a longo prazo, etc. <a>Ver todos os planos</a>',
   },
   create_tenant: {
     title: 'Selecione o seu plano de inquilino',

packages/phrases/src/locales/ru/translation/admin-console/upsell.ts

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Сравнить планы',
   contact_us: 'Связаться с нами',
   get_started: {
-    title: 'Начните свой беспроблемный путь с <planName/>!',
+    title: 'Начните беспрепятственное путешествие по идентификации с бесплатным планом!',
     description:
-      '<planName/> идеально подходит для пробной версии Logto в ваших побочных проектах или испытаниях. Чтобы полностью использовать возможности Logto для вашей команды, повысьте план, чтобы получить неограниченный доступ к премиум-функциям: неограниченное использование MAU, интеграция машин-на-машину, управление RBAC без проблем, долгосрочные журналы аудита и многое другое.',
-    view_plans: 'Посмотреть планы',
+      'Бесплатный план отлично подходит для опробования Logto в ваших собственных проектах или испытаниях. Чтобы полностью использовать возможности Logto для вашей команды, выполните обновление, чтобы получить неограниченный доступ к премиум-функциям: неограниченное использование MAU, интеграция Машина-к-Машине, управление RBAC, долгосрочные журналы аудита и т.д. <a>Посмотреть все планы</a>',
   },
   create_tenant: {
     title: 'Выберите план арендатора',

packages/phrases/src/locales/tr-tr/translation/admin-console/upsell.ts

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: 'Planları Karşılaştır',
   contact_us: 'Bizimle İletişime Geçin',
   get_started: {
-    title: 'Dikişsiz kimlik yolculuğunuza bir <planName/> ile başlayın!',
+    title: 'Ücretsiz bir planla sorunsuz kimlik yolculuğunuza başlayın!',
     description:
-      "<planName/>, yan projelerinizde veya denemelerinizde Logto'yu denemek için mükemmeldir. Ekibiniz için Logto'nun yeteneklerinden tam olarak yararlanmak için sınırsız erişim sağlamak için yükseltin: sınırsız MAU kullanımı, Makine-Makine entegrasyonu, sorunsuz RBAC yönetimi, uzun süreli denetim günlükleri ve daha fazlası.",
-    view_plans: 'Planları Görüntüle',
+      "Ücretsiz plan, Logto'yu yan projelerinizde veya denemelerinizde denemek için mükemmeldir. Ekibiniz için Logto'nun yeteneklerini tam anlamıyla kullanmak için sınırsız erişim elde etmek için yükseltme yaparak premium özelliklere sahip olun: sınırsız MAU kullanımı, Makine-Makine entegrasyonu, RBAC yönetimi, uzun süreli denetim günlükleri vb. <a>Tüm planları görüntüle</a>",
   },
   create_tenant: {
     title: 'Kiracı planınızı seçin',

packages/phrases/src/locales/zh-cn/translation/admin-console/upsell.ts

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: '比较计划',
   contact_us: '联系我们',
   get_started: {
-    title: '开始您无缝的身份管理之旅，选择<planName/>！',
+    title: '通过免费计划开始您无缝的身份之旅！',
     description:
-      '<planName/>非常适合您的个人项目或试用。要充分利用 Logto 团队的功能，请升级并获得无限制访问高级功能：无限 MAU 使用、机器对机器集成、无缝 RBAC 管理、长期审计日志等等。',
-    view_plans: '查看计划',
+      '免费计划非常适合在您的边项目或试用中尝试Logto。为了充分利用Logto团队的功能，升级并获得对高级功能的无限访问：无限MAU使用、机器对机器集成、RBAC管理、长期审计日志等。 <a>查看所有计划</a>',
   },
   create_tenant: {
     title: '选择您的租户计划',

packages/phrases/src/locales/zh-hk/translation/admin-console/upsell.ts

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: '比較計劃',
   contact_us: '聯繫我們',
   get_started: {
-    title: '開始您無縫的身份管理之旅，選擇<planName/>！',
+    title: '通過免費計劃開始您無縫的身份之旅！',
     description:
-      '<planName/>非常適合您的個人項目或試用。要充分利用 Logto 團隊的功能，請升級並獲得無限制訪問高級功能：無限 MAU 使用、機器對機器集成、無縫 RBAC 管理、長期審計日誌等等。',
-    view_plans: '查看計劃',
+      '免費計劃非常適合在您的邊项目或試用中嘗試Logto。為了充分利用Logto團隊的功能，升級並獲得對高級功能的無限訪問：無限MAU使用、機器對機器集成、RBAC管理、長期審計日志等。 <a>查看所有計劃</a>',
   },
   create_tenant: {
     title: '選擇您的租戶計劃',

packages/phrases/src/locales/zh-tw/translation/admin-console/upsell.ts

@@ -4,10 +4,9 @@ const upsell = {
   compare_plans: '比較計劃',
   contact_us: '聯繫我們',
   get_started: {
-    title: '開始您無縫的身份管理之旅，選擇<planName/>！',
+    title: '通過免費計劃開始您無縫的身份之旅！',
     description:
-      '<planName/>非常適合您的個人項目或試用。要充分利用 Logto 團隊的功能，請升級並獲得無限制訪問高級功能：無限 MAU 使用、機器對機器集成、無縫 RBAC 管理、長期審計日誌等等。',
-    view_plans: '查看計劃',
+      '免費計劃非常適合在您的邊项目或試用中嘗試Logto。為了充分利用Logto團隊的功能，升級並獲得對高級功能的無限訪問：無限MAU使用、機器對機器集成、RBAC管理、長期審計日志等。 <a>查看所有計劃</a>',
   },
   create_tenant: {
     title: '選擇您的租戶計劃',