From 7ce014d0337f95b73285cb52ee0e723697cebf79 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Wed, 2 Aug 2023 20:51:25 +0800
Subject: [PATCH] chore(phrases): apply title-cased plan name for tenant plan
 selection button (#4276)

---
 packages/console/package.json                       |  1 +
 .../SelectTenantPlanModal/PlanCardItem/index.tsx    |  4 +++-
 packages/console/src/components/PlanName/index.tsx  | 13 +++++++------
 pnpm-lock.yaml                                      |  8 ++++++++
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/console/package.json b/packages/console/package.json
index ba8a6e591..9c63a4cf5 100644
--- a/packages/console/package.json
+++ b/packages/console/package.json
@@ -114,6 +114,7 @@
     "remark-gfm": "^3.0.1",
     "stylelint": "^15.0.0",
     "swr": "^2.2.0",
+    "titleize": "^3.0.0",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "zod": "^3.20.2"
diff --git a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx
index c00054337..07653fdde 100644
--- a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx
+++ b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx
@@ -109,7 +109,9 @@ function PlanCardItem({ plan, onSelect }: Props) {
         <Button
           title={
             <DangerousRaw>
-              <Trans components={{ name: <PlanName name={planName} /> }}>{t('select_plan')}</Trans>
+              <Trans components={{ name: <PlanName isTitleCase name={planName} /> }}>
+                {t('select_plan')}
+              </Trans>
             </DangerousRaw>
           }
           disabled={isFreePlan && isFreeTenantExceeded}
diff --git a/packages/console/src/components/PlanName/index.tsx b/packages/console/src/components/PlanName/index.tsx
index 72ca91041..7bede25ad 100644
--- a/packages/console/src/components/PlanName/index.tsx
+++ b/packages/console/src/components/PlanName/index.tsx
@@ -1,6 +1,7 @@
 import { type TFuncKey } from 'i18next';
+import { useTranslation } from 'react-i18next';
+import titleize from 'titleize';
 
-import DynamicT from '@/ds-components/DynamicT';
 import { ReservedPlanName } from '@/types/subscriptions';
 
 const registeredPlanNamePhraseMap: Record<
@@ -16,19 +17,19 @@ const registeredPlanNamePhraseMap: Record<
 
 type Props = {
   name: string;
+  isTitleCase?: boolean;
 };
 
-function PlanName({ name }: Props) {
+function PlanName({ name, isTitleCase = false }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.subscription' });
   const planNamePhrase = registeredPlanNamePhraseMap[name];
 
   /**
    * Note: fallback to the plan name if the phrase is not registered.
    */
-  if (!planNamePhrase) {
-    return <span>{name}</span>;
-  }
+  const planName = planNamePhrase ? String(t(planNamePhrase)) : name;
 
-  return <DynamicT forKey={`subscription.${planNamePhrase}`} />;
+  return <span>{isTitleCase ? titleize(planName) : planName}</span>;
 }
 
 export default PlanName;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 09dbb762b..43ce4c0f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3018,6 +3018,9 @@ importers:
       swr:
         specifier: ^2.2.0
         version: 2.2.0(react@18.2.0)
+      titleize:
+        specifier: ^3.0.0
+        version: 3.0.0
       tslib:
         specifier: ^2.4.1
         version: 2.4.1
@@ -19723,6 +19726,11 @@ packages:
     resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
     dev: true
 
+  /titleize@3.0.0:
+    resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
+    engines: {node: '>=12'}
+    dev: true
+
   /tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}