Merge pull request #11632 from supabase/add-org-kind

Add kind to org creation form

studio/pages/new/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, Input } from 'ui'
+import { Button, Input, Listbox } from 'ui'
 import { useRouter } from 'next/router'
 
 import { API_URL } from 'lib/constants'
@@ -10,6 +10,25 @@ import { WizardLayout } from 'components/layouts'
 import Panel from 'components/ui/Panel'
 import { NextPageWithLayout } from 'types'
 
+const ORG_KIND_TYPES = {
+  PERSONAL: 'Personal',
+  EDUCATIONAL: 'Educational',
+  STARTUP: 'Startup',
+  AGENCY: 'Agency',
+  COMPANY: 'Company',
+  UNDISCLOSED: 'N/A',
+}
+const ORG_KIND_DEFAULT = 'PERSONAL'
+
+const ORG_SIZE_TYPES = {
+  '1': '1 - 10',
+  '10': '10 - 49',
+  '50': '50 - 99',
+  '100': '100 - 299',
+  '300': 'More than 300',
+}
+const ORG_SIZE_DEFAULT = '1'
+
 /**
  * No org selected yet, create a new one
  */
@@ -18,6 +37,8 @@ const Wizard: NextPageWithLayout = () => {
   const router = useRouter()
 
   const [orgName, setOrgName] = useState('')
+  const [orgKind, setOrgKind] = useState(ORG_KIND_DEFAULT)
+  const [orgSize, setOrgSize] = useState(ORG_SIZE_DEFAULT)
   const [newOrgLoading, setNewOrgLoading] = useState(false)
 
   function validateOrgName(name: any) {
@@ -29,6 +50,14 @@ const Wizard: NextPageWithLayout = () => {
     setOrgName(e.target.value)
   }
 
+  function onOrgKindChange(value: any) {
+    setOrgKind(value)
+  }
+
+  function onOrgSizeChange(value: any) {
+    setOrgSize(value)
+  }
+
   async function onClickSubmit(e: any) {
     e.preventDefault()
     const isOrgNameValid = validateOrgName(orgName)
@@ -40,6 +69,8 @@ const Wizard: NextPageWithLayout = () => {
     setNewOrgLoading(true)
     const response = await post(`${API_URL}/organizations`, {
       name: orgName,
+      kind: orgKind,
+      ...(orgKind == 'COMPANY' ? { size: orgSize } : {}),
     })
 
     if (response.error) {
@@ -78,9 +109,9 @@ const Wizard: NextPageWithLayout = () => {
       }
     >
       <Panel.Content className="pt-0">
-        <p className="text-sm">This is your organization's name within Supabase.</p>
+        <p className="text-sm">This is your organization within Supabase.</p>
         <p className="text-sm text-scale-1100">
-          For example, you can use the name of your company or department
+          For example, you can use the name of your company or department.
         </p>
       </Panel.Content>
       <Panel.Content className="Form section-block--body has-inputs-centered">
@@ -95,6 +126,44 @@ const Wizard: NextPageWithLayout = () => {
           onChange={onOrgNameChange}
         />
       </Panel.Content>
+      <Panel.Content className="Form section-block--body has-inputs-centered">
+        <Listbox
+          label="Kind"
+          layout="horizontal"
+          value={orgKind}
+          onChange={onOrgKindChange}
+          descriptionText="What would best describe your organization?"
+        >
+          {Object.entries(ORG_KIND_TYPES).map(([k, v]) => {
+            return (
+              <Listbox.Option key={k} label={v} value={k}>
+                {v}
+              </Listbox.Option>
+            )
+          })}
+        </Listbox>
+      </Panel.Content>
+      {orgKind == 'COMPANY' ? (
+        <Panel.Content className="Form section-block--body has-inputs-centered">
+          <Listbox
+            label="Size"
+            layout="horizontal"
+            value={orgSize}
+            onChange={onOrgSizeChange}
+            descriptionText="How many people are in your company?"
+          >
+            {Object.entries(ORG_SIZE_TYPES).map(([k, v]) => {
+              return (
+                <Listbox.Option key={k} label={v} value={k}>
+                  {v}
+                </Listbox.Option>
+              )
+            })}
+          </Listbox>
+        </Panel.Content>
+      ) : (
+        <></>
+      )}
     </Panel>
   )
 }