Refactor org billing page

studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx

@@ -64,10 +64,10 @@ const AddPaymentMethodForm: FC<Props> = ({ returnUrl, onCancel }) => {
       <Modal.Separator />
       <Modal.Content>
         <div className="flex items-center space-x-2 pt-2">
-          <Button block htmlType="submit" type="primary" loading={isSaving}>
+          <Button block htmlType="submit" type="primary" loading={isSaving} disabled={isSaving}>
             Save
           </Button>
-          <Button htmlType="button" type="default" onClick={onCancel} block>
+          <Button htmlType="button" type="default" onClick={onCancel} block disabled={isSaving}>
             Cancel
           </Button>
         </div>

studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx

@@ -1,21 +1,19 @@
-import { useContext, useEffect } from 'react'
+import { useEffect } from 'react'
 import { Form, Input } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useStore, checkPermissions } from 'hooks'
+import { useStore, checkPermissions, useParams } from 'hooks'
 import { API_URL } from 'lib/constants'
 import { patch } from 'lib/common/fetch'
-
 import { FormActions, FormPanel, FormSection, FormSectionContent } from 'components/ui/Forms'
 
-import { PageContext } from 'pages/org/[slug]/settings'
-
 const BillingEmail = () => {
-  const { ui } = useStore()
-  const PageState: any = useContext(PageContext)
+  const { app, ui } = useStore()
+  const { slug } = useParams()
+  const { name, billing_email } = ui.selectedOrganization ?? {}
 
   const formId = 'org-billing-email'
   const initialValues = {
-    billing_email: PageState.organization?.billing_email ?? '',
+    billing_email: billing_email ?? '',
   }
 
   const canUpdateOrganization = checkPermissions(PermissionAction.UPDATE, 'organizations')
@@ -30,9 +28,9 @@ const BillingEmail = () => {
     }
 
     setSubmitting(true)
-    const response = await patch(`${API_URL}/organizations/${PageState.organization.slug}`, {
+    const response = await patch(`${API_URL}/organizations/${slug}`, {
       ...values,
-      name: PageState.organization.name,
+      name,
     })
     if (response.error) {
       ui.setNotification({
@@ -46,7 +44,7 @@ const BillingEmail = () => {
         initialValues: { billing_email },
       })
 
-      PageState.onOrgUpdated(response)
+      app.onOrgUpdated(response)
       ui.setNotification({
         category: 'success',
         message: 'Successfully saved settings',
@@ -66,9 +64,9 @@ const BillingEmail = () => {
             const hasChanges = JSON.stringify(values) !== JSON.stringify(initialValues)
 
             useEffect(() => {
-              const values = { billing_email: PageState.organization?.billing_email ?? '' }
+              const values = { billing_email: billing_email ?? '' }
               resetForm({ values, initialValues: values })
-            }, [PageState.organization.slug])
+            }, [slug])
 
             return (
               <FormPanel

studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx

@@ -1,6 +1,8 @@
-import { FC, useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
+import { observer } from 'mobx-react-lite'
 
-import { useStore } from 'hooks'
+import { Project } from 'types'
+import { useParams, useStore } from 'hooks'
 import { API_URL } from 'lib/constants'
 import { get } from 'lib/common/fetch'
 
@@ -11,14 +13,12 @@ import BillingAddress from './BillingAddress/BillingAddress'
 import TaxID from './TaxID/TaxID'
 import BillingEmail from './BillingEmail'
 
-interface Props {
-  organization: any
-  projects: any[]
-}
+const BillingSettings = () => {
+  const { app, ui } = useStore()
+  const { slug } = useParams()
 
-const BillingSettings: FC<Props> = ({ organization, projects = [] }) => {
-  const { ui } = useStore()
-  const { slug } = organization
+  const organization = ui.selectedOrganization
+  const projects = app.projects.list((x: Project) => x.organization_id == organization?.id) || []
 
   const [customer, setCustomer] = useState<any>(null)
   const [isLoadingCustomer, setIsLoadingCustomer] = useState(false)
@@ -122,4 +122,4 @@ const BillingSettings: FC<Props> = ({ organization, projects = [] }) => {
   )
 }
 
-export default BillingSettings
+export default observer(BillingSettings)

studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx

@@ -14,7 +14,7 @@ import {
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { checkPermissions, useStore, useFlag } from 'hooks'
+import { checkPermissions, useStore } from 'hooks'
 import { delete_, patch } from 'lib/common/fetch'
 import { getURL } from 'lib/helpers'
 import { API_URL } from 'lib/constants'
@@ -39,7 +39,6 @@ const PaymentMethods: FC<Props> = ({
 }) => {
   const { ui } = useStore()
   const orgSlug = ui.selectedOrganization?.slug ?? ''
-  const isOwner = ui.selectedOrganization?.is_owner
 
   const [selectedMethodForDefault, setSelectedMethodForDefault] = useState<any>()
   const [selectedMethodToDelete, setSelectedMethodToDelete] = useState<any>()
@@ -244,7 +243,7 @@ const PaymentMethods: FC<Props> = ({
 
       <AddNewPaymentMethodModal
         visible={showAddPaymentMethodModal}
-        returnUrl={`${getURL()}/org/${orgSlug}/settings`}
+        returnUrl={`${getURL()}/org/${orgSlug}/billing`}
         onCancel={() => setShowAddPaymentMethodModal(false)}
       />
 

studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx

@@ -48,8 +48,8 @@ const ProjectSummary: FC<ProjectSummaryProps> = ({ project }) => {
           <div className="flex w-[15%] items-center justify-end">
             <Link href={`/project/${project.ref}/settings/billing/subscription`}>
               <a className="group flex items-center space-x-2">
-                <p className="text-sm opacity-0 transition group-hover:opacity-100">View details</p>
-                <IconChevronRight />
+                <p className="text-xs opacity-0 transition group-hover:opacity-100">View details</p>
+                <IconChevronRight strokeWidth={1.5} />
               </a>
             </Link>
           </div>

studio/pages/org/[slug]/billing.tsx

@@ -1,5 +1,62 @@
-const OrgBillingSettings = () => {
-  return <div></div>
+import { useRouter } from 'next/router'
+import { observer } from 'mobx-react-lite'
+import { NextPage } from 'next'
+import { Tabs } from 'ui'
+
+import { useParams, useStore } from 'hooks'
+import Loading from 'components/ui/Loading'
+import { AccountLayout } from 'components/layouts'
+import { BillingSettings } from 'components/interfaces/Organization'
+
+const OrgBillingSettings: NextPage = () => {
+  const { ui } = useStore()
+  const { slug } = useParams()
+  const router = useRouter()
+
+  return (
+    <AccountLayout
+      title={ui.selectedOrganization?.name ?? 'Supabase'}
+      breadcrumbs={[
+        {
+          key: `org-settings`,
+          label: 'Settings',
+        },
+      ]}
+    >
+      {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
+        <Loading />
+      ) : (
+        <div className="p-4 pt-0">
+          <div className="space-y-3">
+            <section className="mt-4">
+              <h1 className="text-3xl">
+                {ui.selectedOrganization?.name ?? 'Organization'} settings
+              </h1>
+            </section>
+            <nav>
+              <Tabs
+                size="small"
+                type="underlined"
+                activeId="billing"
+                onChange={(id: any) => {
+                  if (id !== 'billing') router.push(`/org/${slug}/${id}`)
+                }}
+              >
+                <Tabs.Panel id="general" label="General" />
+                <Tabs.Panel id="team" label="Team" />
+                <Tabs.Panel id="billing" label="Billing" />
+                <Tabs.Panel id="invoices" label="Invoices" />
+              </Tabs>
+            </nav>
+          </div>
+
+          <div className="mb-8">
+            <BillingSettings />
+          </div>
+        </div>
+      )}
+    </AccountLayout>
+  )
 }
 
-export default OrgBillingSettings
+export default observer(OrgBillingSettings)

studio/pages/org/[slug]/general.tsx

@@ -23,7 +23,7 @@ const OrgGeneralSettings: NextPage = () => {
         },
       ]}
     >
-      {ui.selectedOrganization === undefined ? (
+      {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
         <div className="p-4 pt-0">

studio/pages/org/[slug]/invoices.tsx

@@ -1,5 +1,62 @@
-const OrgInvoices = () => {
-  return <div></div>
+import { useRouter } from 'next/router'
+import { observer } from 'mobx-react-lite'
+import { NextPage } from 'next'
+import { Tabs } from 'ui'
+
+import { useParams, useStore } from 'hooks'
+import Loading from 'components/ui/Loading'
+import { AccountLayout } from 'components/layouts'
+import { GeneralSettings } from 'components/interfaces/Organization'
+
+const OrgInvoices: NextPage = () => {
+  const { ui } = useStore()
+  const { slug } = useParams()
+  const router = useRouter()
+
+  return (
+    <AccountLayout
+      title={ui.selectedOrganization?.name ?? 'Supabase'}
+      breadcrumbs={[
+        {
+          key: `org-settings`,
+          label: 'Settings',
+        },
+      ]}
+    >
+      {ui.selectedOrganization === undefined ? (
+        <Loading />
+      ) : (
+        <div className="p-4 pt-0">
+          <div className="space-y-3">
+            <section className="mt-4">
+              <h1 className="text-3xl">
+                {ui.selectedOrganization?.name ?? 'Organization'} settings
+              </h1>
+            </section>
+            <nav>
+              <Tabs
+                size="small"
+                type="underlined"
+                activeId="invoices"
+                onChange={(id: any) => {
+                  if (id !== 'invoices') router.push(`/org/${slug}/${id}`)
+                }}
+              >
+                <Tabs.Panel id="general" label="General" />
+                <Tabs.Panel id="team" label="Team" />
+                <Tabs.Panel id="billing" label="Billing" />
+                <Tabs.Panel id="invoices" label="Invoices" />
+              </Tabs>
+            </nav>
+          </div>
+
+          <div className="mb-8">
+            <GeneralSettings />
+          </div>
+        </div>
+      )}
+    </AccountLayout>
+  )
 }
 
-export default OrgInvoices
+export default observer(OrgInvoices)

studio/pages/org/[slug]/settings.tsx

@@ -171,11 +171,11 @@ const OrganizationSettings: NextPageWithLayout = () => {
 
       <div className="mb-8">
         {selectedTab == 'GENERAL' ? (
-          <GeneralSettings />
+          <div />
         ) : selectedTab == 'TEAM' ? (
-          <TeamSettings />
+          <div />
         ) : selectedTab == 'BILLING' ? (
-          <BillingSettings organization={organization} projects={projects} />
+          <div />
         ) : selectedTab == 'INVOICES' ? (
           <InvoicesSettings organization={organization} />
         ) : null}

studio/pages/org/[slug]/team.tsx

@@ -23,7 +23,7 @@ const OrgTeamSettings: NextPage = () => {
         },
       ]}
     >
-      {ui.selectedOrganization === undefined ? (
+      {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
         <div className="p-4 pt-0">