From 29d50f850be28f86de474256520c41340db2bf2d Mon Sep 17 00:00:00 2001
From: Tuan Dang <tony@infisical.com>
Date: Tue, 27 Jun 2023 19:01:31 +0700
Subject: [PATCH] Correct current plan text in usage and billing

---
 .../components/BillingCloudTab/PreviewSection.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
index 4050e7936..5e3d50c42 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
@@ -12,7 +12,7 @@ export const PreviewSection = () => {
     const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
     const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? "");
     const createCustomerPortalSession = useCreateCustomerPortalSession();
-
+    
     const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
         "managePlan"
     ] as const);
@@ -35,6 +35,12 @@ export const PreviewSection = () => {
         
         return formattedDate;
     }
+
+    function formatPlanSlug(slug: string) {
+        return slug
+            .replace(/(\b[a-z])/g, match => match.toUpperCase())
+            .replace(/-/g, " ");
+    }
     
     return (
         <div>
@@ -52,11 +58,13 @@ export const PreviewSection = () => {
                     </Button>
                 </div>
             )}
-            {!isLoading && data && (
+            {!isLoading && data && subscription && (
                 <div className="flex mt-8 max-w-screen-lg">
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600">
                         <p className="mb-2 text-gray-400">Current plan</p>
-                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">Starter</p>
+                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
+                            {formatPlanSlug(subscription.slug)}
+                        </p>
                         <button 
                             type="button"
                             onClick={async () => {