refactor: bring out components from slug/new into their own files

studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { Button, IconAlertCircle } from '@supabase/ui'
+
+import { useStore } from 'hooks'
+import { getURL } from 'lib/helpers'
+import InformationBox from 'components/ui/InformationBox'
+import { AddNewPaymentMethodModal } from 'components/interfaces/Billing'
+
+const EmptyPaymentMethodWarning = observer(
+  ({ stripeCustomerId }: { stripeCustomerId: string | undefined }) => {
+    const { ui } = useStore()
+    const slug = ui.selectedOrganization?.slug
+
+    const [showAddPaymentMethodModal, setShowAddPaymentMethodModal] = useState<boolean>(false)
+
+    return (
+      <div className="mt-4">
+        <InformationBox
+          icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
+          defaultVisibility={true}
+          hideCollapse
+          title="Your organization has no payment methods"
+          description={
+            <div className="space-y-3">
+              <p className="text-sm leading-normal">
+                You need to add a payment method for your organization before creating a paid
+                project.
+              </p>
+              <Button type="secondary" onClick={() => setShowAddPaymentMethodModal(true)}>
+                Add a payment method
+              </Button>
+            </div>
+          }
+        />
+        <AddNewPaymentMethodModal
+          visible={showAddPaymentMethodModal}
+          returnUrl={`${getURL()}/new/${slug}`}
+          onCancel={() => setShowAddPaymentMethodModal(false)}
+        />
+      </div>
+    )
+  }
+)
+
+export default EmptyPaymentMethodWarning

studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import { IconAlertCircle } from '@supabase/ui'
+import InformationBox from 'components/ui/InformationBox'
+
+interface Props {
+  limit: number
+}
+
+const FreeProjectLimitWarning: FC<Props> = ({ limit }) => {
+  return (
+    <div className="mt-4">
+      <InformationBox
+        icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
+        defaultVisibility={true}
+        hideCollapse
+        title="Your account has reached its free project limit"
+        description={
+          <div className="space-y-3">
+            <p className="text-sm leading-normal">
+              {`Your account can only have up to ${limit} free projects - to create another free project, you'll need to delete an existing free project first. Otherwise, you may create a project on the Pro tier instead.`}
+            </p>
+          </div>
+        }
+      />
+    </div>
+  )
+}
+
+export default FreeProjectLimitWarning

studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx

@@ -0,0 +1,25 @@
+import { IconAlertCircle } from '@supabase/ui'
+import InformationBox from 'components/ui/InformationBox'
+
+const NotOrganizationOwnerWarning = () => {
+  return (
+    <div className="mt-4">
+      <InformationBox
+        icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
+        defaultVisibility={true}
+        hideCollapse
+        title="You do not have permission to create a project"
+        description={
+          <div className="space-y-3">
+            <p className="text-sm leading-normal">
+              Only the organization owner can create new projects. Contact your organization owner
+              to create a new project for this organization.
+            </p>
+          </div>
+        }
+      />
+    </div>
+  )
+}
+
+export default NotOrganizationOwnerWarning

studio/components/interfaces/Organization/NewProject/ProjectCreationDisabledWarning.tsx

@@ -0,0 +1,27 @@
+import { IconAlertCircle } from '@supabase/ui'
+import InformationBox from 'components/ui/InformationBox'
+
+const ProjectCreationDisabledWarning = () => {
+  return (
+    <div className="mt-4">
+      <InformationBox
+        icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
+        defaultVisibility={true}
+        hideCollapse
+        title="Project creation is currently disabled"
+        description={
+          <div className="space-y-3">
+            <p className="text-sm leading-normal">
+              Our engineers are currently working on a fix. You can follow updates on{' '}
+              <a className="text-brand-900" href="https://status.supabase.com/">
+                https://status.supabase.com/
+              </a>
+            </p>
+          </div>
+        }
+      />
+    </div>
+  )
+}
+
+export default ProjectCreationDisabledWarning

studio/components/interfaces/Organization/NewProject/index.ts

@@ -0,0 +1,11 @@
+import NotOrganizationOwnerWarning from './NotOrganizationOwnerWarning'
+import FreeProjectLimitWarning from './FreeProjectLimitWarning'
+import ProjectCreationDisabledWarning from './ProjectCreationDisabledWarning'
+import EmptyPaymentMethodWarning from './EmptyPaymentMethodWarning'
+
+export {
+  NotOrganizationOwnerWarning,
+  FreeProjectLimitWarning,
+  ProjectCreationDisabledWarning,
+  EmptyPaymentMethodWarning,
+}

studio/pages/new/[slug].tsx

@@ -7,9 +7,10 @@ import { useRef, useState, useEffect } from 'react'
 import { debounce, isUndefined, values } from 'lodash'
 import { toJS } from 'mobx'
 import { observer } from 'mobx-react-lite'
-import { Button, Listbox, IconUsers, IconAlertCircle, Input, IconLoader, Alert } from '@supabase/ui'
+import { Button, Listbox, IconUsers, Input, IconLoader, Alert } from '@supabase/ui'
 
-import { getURL, passwordStrength } from 'lib/helpers'
+import { NextPageWithLayout } from 'types'
+import { passwordStrength } from 'lib/helpers'
 import { post } from 'lib/common/fetch'
 import {
   API_URL,
@@ -27,10 +28,13 @@ import { useStore, withAuth, useSubscriptionStats } from 'hooks'
 
 import { WizardLayoutWithoutAuth } from 'components/layouts'
 import Panel from 'components/to-be-cleaned/Panel'
-import InformationBox from 'components/ui/InformationBox'
 import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
-import { AddNewPaymentMethodModal } from 'components/interfaces/Billing'
-import { NextPageWithLayout } from 'types'
+import {
+  FreeProjectLimitWarning,
+  NotOrganizationOwnerWarning,
+  ProjectCreationDisabledWarning,
+  EmptyPaymentMethodWarning,
+} from 'components/interfaces/Organization/NewProject'
 
 interface StripeCustomer {
   paymentMethods: any
@@ -38,29 +42,6 @@ interface StripeCustomer {
   error?: any
 }
 
-const DisabledBox = () => {
-  return (
-    <div className="mt-4">
-      <InformationBox
-        icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
-        defaultVisibility={true}
-        hideCollapse
-        title="Project creation is currently disabled"
-        description={
-          <div className="space-y-3">
-            <p className="text-sm leading-normal">
-              Our engineers are currently working on a fix. You can follow updates on{' '}
-              <a className="text-brand-900" href="https://status.supabase.com/">
-                https://status.supabase.com/
-              </a>
-            </p>
-          </div>
-        }
-      />
-    </div>
-  )
-}
-
 async function fetchStripeAccount(stripeCustomerId: string) {
   try {
     const customer = await post(`${API_URL}/stripe/customer`, {
@@ -254,7 +235,7 @@ const Wizard: NextPageWithLayout = () => {
         </Panel.Content>
         {projectCreationDisabled ? (
           <Panel.Content className="border-panel-border-interior-light dark:border-panel-border-interior-dark border-t pb-8">
-            <DisabledBox />
+            <ProjectCreationDisabledWarning />
           </Panel.Content>
         ) : (
           <>
@@ -432,80 +413,3 @@ const PageLayout = withAuth(
 Wizard.getLayout = (page) => <PageLayout>{page}</PageLayout>
 
 export default observer(Wizard)
-
-const NotOrganizationOwnerWarning = () => {
-  return (
-    <div className="mt-4">
-      <InformationBox
-        icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
-        defaultVisibility={true}
-        hideCollapse
-        title="You do not have permission to create a project"
-        description={
-          <div className="space-y-3">
-            <p className="text-sm leading-normal">
-              Only the organization owner can create new projects. Contact your organization owner
-              to create a new project for this organization.
-            </p>
-          </div>
-        }
-      />
-    </div>
-  )
-}
-
-const FreeProjectLimitWarning = ({ limit }: { limit: number }) => {
-  return (
-    <div className="mt-4">
-      <InformationBox
-        icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
-        defaultVisibility={true}
-        hideCollapse
-        title="Your account has reached its free project limit"
-        description={
-          <div className="space-y-3">
-            <p className="text-sm leading-normal">
-              {`Your account can only have up to ${limit} free projects - to create another free project, you'll need to delete an existing free project first. Otherwise, you may create a project on the Pro tier instead.`}
-            </p>
-          </div>
-        }
-      />
-    </div>
-  )
-}
-
-const EmptyPaymentMethodWarning = observer(
-  ({ stripeCustomerId }: { stripeCustomerId: string | undefined }) => {
-    const { ui } = useStore()
-    const slug = ui.selectedOrganization?.slug
-
-    const [showAddPaymentMethodModal, setShowAddPaymentMethodModal] = useState<boolean>(false)
-
-    return (
-      <div className="mt-4">
-        <InformationBox
-          icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
-          defaultVisibility={true}
-          hideCollapse
-          title="Your organization has no payment methods"
-          description={
-            <div className="space-y-3">
-              <p className="text-sm leading-normal">
-                You need to add a payment method for your organization before creating a paid
-                project.
-              </p>
-              <Button type="secondary" onClick={() => setShowAddPaymentMethodModal(true)}>
-                Add a payment method
-              </Button>
-            </div>
-          }
-        />
-        <AddNewPaymentMethodModal
-          visible={showAddPaymentMethodModal}
-          returnUrl={`${getURL()}/new/${slug}`}
-          onCancel={() => setShowAddPaymentMethodModal(false)}
-        />
-      </div>
-    )
-  }
-)