From 0ffca866b1419da01b4ba9345676a93b3fca57db Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 4 Jan 2022 17:46:46 +0800
Subject: [PATCH] Update canSubmit logic in project creation page

---
 studio/pages/new/[slug].tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index ead91c13fd6..eb4297a7a9f 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -94,14 +94,14 @@ export const Wizard = observer(() => {
   const isSelectFreeTier = dbPricingPlan === PRICING_PLANS.FREE
 
   const canCreateProject =
-    currentOrg?.is_owner &&
-    (!isSelectFreeTier || (isSelectFreeTier && !isOverFreeProjectLimit && !isEmptyPaymentMethod))
+    currentOrg?.is_owner && (!isSelectFreeTier || (isSelectFreeTier && !isOverFreeProjectLimit))
 
   const canSubmit =
     projectName != '' &&
     passwordStrengthScore >= DEFAULT_MINIMUM_PASSWORD_STRENGTH &&
     dbRegion != '' &&
-    dbPricingPlan != ''
+    dbPricingPlan != '' &&
+    (isSelectFreeTier || (!isSelectFreeTier && !isEmptyPaymentMethod))
 
   const passwordErrorMessage =
     dbPass != '' && passwordStrengthScore < DEFAULT_MINIMUM_PASSWORD_STRENGTH
@@ -268,12 +268,7 @@ export const Wizard = observer(() => {
             {!currentOrg?.is_owner ? (
               <NotOrganizationOwnerWarning />
             ) : (
-              <>
-                {isSelectFreeTier && isOverFreeProjectLimit && <FreeProjectLimitWarning />}
-                {!isSelectFreeTier && isEmptyPaymentMethod && (
-                  <EmptyPaymentMethodWarning stripeCustomerId={stripeCustomerId} />
-                )}
-              </>
+              <>{isSelectFreeTier && isOverFreeProjectLimit && <FreeProjectLimitWarning />}</>
             )}
           </Panel.Content>
 
@@ -390,6 +385,10 @@ export const Wizard = observer(() => {
                     </Listbox.Option>
                   ))}
                 </Listbox>
+
+                {!isSelectFreeTier && isEmptyPaymentMethod && (
+                  <EmptyPaymentMethodWarning stripeCustomerId={stripeCustomerId} />
+                )}
               </Panel.Content>
             </>
           )}
@@ -472,7 +471,7 @@ const EmptyPaymentMethodWarning = observer(
       } else {
         ui.setNotification({
           category: 'error',
-          message: `Invalid customer id`,
+          message: `Invalid customer ID`,
         })
       }
     }
@@ -486,7 +485,7 @@ const EmptyPaymentMethodWarning = observer(
           description={
             <div className="space-y-3">
               <p className="text-sm leading-normal">
-                It's required to add a payment method for your organization before creating a paid
+                You need to add a payment method for your organization before creating a paid
                 project.
               </p>
               <Button loading={loading} type="secondary" onClick={() => redirectToPortal()}>