diff --git a/studio/components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo.tsx b/studio/components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo.tsx new file mode 100644 index 00000000000..fde24bc8efb --- /dev/null +++ b/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 = ({ 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 ( + } + description={ +
+ The monthly fees for the paid plan still apply. To cancel your subscription, head over to + your{' '} + + + + organization billing settings + + . + + +
+ } + /> + ) +} + +export default NoProjectsOnPaidOrgInfo diff --git a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx index adba0bbc199..d9c6c825ab8 100644 --- a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx +++ b/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 ( + +
{({ isSubmitting, handleReset, values, initialValues, resetForm }: any) => { const hasChanges = JSON.stringify(values) !== JSON.stringify(initialValues) diff --git a/studio/pages/org/[slug]/index.tsx b/studio/pages/org/[slug]/index.tsx index 93041ce5651..1607bf71bdd 100644 --- a/studio/pages/org/[slug]/index.tsx +++ b/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 = () => {
- - - - - + + +

Projects

{isLoadingProjects && (