Merge branch 'master' into feat/branch-management-2--with-project-settings

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/new/[slug].tsx

@@ -50,6 +50,7 @@ import {
   Toggle,
 } from 'ui'
 import Link from 'next/link'
+import { useProjectsQuery } from 'data/projects/projects-query'
 
 const Wizard: NextPageWithLayout = () => {
   const router = useRouter()
@@ -87,6 +88,14 @@ const Wizard: NextPageWithLayout = () => {
     { enabled: billedViaOrg }
   )
 
+  const { data: allProjects } = useProjectsQuery({
+    enabled: currentOrg?.subscription_id !== undefined,
+  })
+
+  const orgProjectCount = (allProjects || []).filter(
+    (proj) => proj.organization_id === currentOrg?.id
+  ).length
+
   const [availableRegions, setAvailableRegions] = useState(
     getAvailableRegions(PROVIDERS[cloudProvider].id)
   )
@@ -482,15 +491,15 @@ const Wizard: NextPageWithLayout = () => {
                   description={
                     <div className="space-y-3">
                       <p className="text-sm leading-normal">
-                        This organization uses organization level billing and is on the{' '}
+                        This organization uses the new organization-level billing and is on the{' '}
                         <span className="text-brand">{orgSubscription?.plan?.name} plan</span>.
                       </p>
 
-                      {orgSubscription?.plan?.id !== 'free' && (
+                      {/* Show info when launching a new project in a paid org that already has at least one project */}
+                      {orgSubscription?.plan?.id !== 'free' && orgProjectCount > 0 && (
                         <p>
-                          Your plan comes with $10 of Compute Credits. Launching another project
-                          incurs additional compute costs - if you exhaust your Compute Credits, the
-                          additional compute hours result in additional usage charges.
+                          Launching another project incurs additional compute costs (starting at $10
+                          per month).
                         </p>
                       )}
 

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 && (