diff --git a/studio/pages/new/index.tsx b/studio/pages/new/index.tsx index 290d515599b..201c9d7a8d0 100644 --- a/studio/pages/new/index.tsx +++ b/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 = () => { } > -

This is your organization's name within Supabase.

+

This is your organization within Supabase.

- For example, you can use the name of your company or department + For example, you can use the name of your company or department.

@@ -95,6 +126,44 @@ const Wizard: NextPageWithLayout = () => { onChange={onOrgNameChange} /> + + + {Object.entries(ORG_KIND_TYPES).map(([k, v]) => { + return ( + + {v} + + ) + })} + + + {orgKind == 'COMPANY' ? ( + + + {Object.entries(ORG_SIZE_TYPES).map(([k, v]) => { + return ( + + {v} + + ) + })} + + + ) : ( + <> + )} ) }