From fdf827d0a9bc98a4a1ff73722e71ffc5df2c58ac Mon Sep 17 00:00:00 2001
From: phamhieu <phamhieu1998@gmail.com>
Date: Wed, 16 Feb 2022 16:40:55 +0700
Subject: [PATCH] chore: fix ui

---
 studio/pages/new/[slug].tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index 3ea5f5d5c1f..0f8a6baf269 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -106,7 +106,9 @@ export const Wizard = observer(() => {
   const isSelectFreeTier = dbPricingPlan === PRICING_PLANS.FREE
 
   const canCreateProject =
-    currentOrg?.is_owner && (!isSelectFreeTier || (isSelectFreeTier && !isOverFreeProjectLimit))
+    currentOrg?.is_owner &&
+    subscriptionStats != undefined &&
+    (!isSelectFreeTier || (isSelectFreeTier && !isOverFreeProjectLimit))
 
   const canSubmit =
     projectName != '' &&
@@ -345,7 +347,9 @@ export const Wizard = observer(() => {
                 ))}
               </Listbox>
 
-              {isSelectFreeTier && isOverFreeProjectLimit && <FreeProjectLimitWarning />}
+              {isSelectFreeTier && isOverFreeProjectLimit && (
+                <FreeProjectLimitWarning limit={freeProjectsLimit} />
+              )}
               {!isSelectFreeTier && isEmptyPaymentMethod && (
                 <EmptyPaymentMethodWarning stripeCustomerId={stripeCustomerId} />
               )}
@@ -379,7 +383,7 @@ const NotOrganizationOwnerWarning = () => {
   )
 }
 
-const FreeProjectLimitWarning = () => {
+const FreeProjectLimitWarning = ({ limit }: { limit: number }) => {
   return (
     <div className="mt-4">
       <InformationBox
@@ -391,8 +395,8 @@ const FreeProjectLimitWarning = () => {
         description={
           <div className="space-y-3">
             <p className="text-sm leading-normal">
-              Your account can only have a maximum of 2 free projects. You can only choose paid
-              pricing plan.
+              {`Your account can only have a maximum of ${limit} free projects. You can only choose paid
+              pricing plan.`}
             </p>
           </div>
         }