Merge pull request #16218 from supabase/hint-no-projects-paid-org

studio/components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo.tsx

@@ -0,0 +1,52 @@
+import InformationBox from 'components/ui/InformationBox'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
+import Link from 'next/link'
+import { FC } from 'react'
+import { Organization } from 'types'
+import { IconInfo } from 'ui'
+
+interface Props {
+  organization?: Organization
+}
+
+const NoProjectsOnPaidOrgInfo: FC<Props> = ({ organization }) => {
+  const { data: allProjects } = useProjectsQuery({
+    enabled: organization?.subscription_id !== undefined,
+  })
+  const projectCount =
+    allProjects?.filter((project) => project.organization_id === organization?.id).length ?? 0
+
+  const { data: orgSubscription } = useOrgSubscriptionQuery(
+    { orgSlug: organization?.slug },
+    { enabled: organization?.subscription_id !== undefined }
+  )
+
+  if (projectCount > 0 || orgSubscription?.plan === undefined || orgSubscription.plan.id === 'free')
+    return null
+
+  return (
+    <InformationBox
+      defaultVisibility={true}
+      hideCollapse
+      title={`Your organization is on the ${orgSubscription.plan.name} plan with no projects running`}
+      icon={<IconInfo strokeWidth={2} />}
+      description={
+        <div>
+          The monthly fees for the paid plan still apply. To cancel your subscription, head over to
+          your{' '}
+          <Link href={`/org/${organization?.slug}/billing`}>
+            <a>
+              <span className="text-sm text-green-900 transition hover:text-green-1000">
+                organization billing settings
+              </span>
+              .
+            </a>
+          </Link>
+        </div>
+      }
+    />
+  )
+}
+
+export default NoProjectsOnPaidOrgInfo

studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx

@@ -21,6 +21,7 @@ import { isResponseOk, patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { Organization } from 'types'
 import OrganizationDeletePanel from './OrganizationDeletePanel'
+import NoProjectsOnPaidOrgInfo from 'components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo'
 
 const GeneralSettings = () => {
   const queryClient = useQueryClient()
@@ -72,6 +73,8 @@ const GeneralSettings = () => {
 
   return (
     <ScaffoldContainerLegacy>
+      <NoProjectsOnPaidOrgInfo organization={selectedOrganization} />
+
       <Form id={formId} initialValues={initialValues} onSubmit={onUpdateOrganization}>
         {({ isSubmitting, handleReset, values, initialValues, resetForm }: any) => {
           const hasChanges = JSON.stringify(values) !== JSON.stringify(initialValues)

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

@@ -10,6 +10,7 @@ import { useProjectsQuery } from 'data/projects/projects-query'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
 import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import NoProjectsOnPaidOrgInfo from 'components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo'
 
 const ProjectsPage: NextPageWithLayout = () => {
   const {
@@ -34,13 +35,17 @@ const ProjectsPage: NextPageWithLayout = () => {
     <ScaffoldContainer className="h-full overflow-y-auto">
       <ScaffoldSection>
         <div className="col-span-12 space-y-8">
-          <Link href={`/new/${organization?.slug}`}>
-            <a>
-              <Button size="medium" type="default" iconRight={<IconPlus />}>
-                New project
-              </Button>
-            </a>
-          </Link>
+          <NoProjectsOnPaidOrgInfo organization={organization} />
+
+          <div>
+            <Link href={`/new/${organization?.slug}`}>
+              <a>
+                <Button size="medium" type="default" iconRight={<IconPlus />}>
+                  New project
+                </Button>
+              </a>
+            </Link>
+          </div>
           <div className="space-y-4">
             <h4 className="text-lg">Projects</h4>
             {isLoadingProjects && (