diff --git a/apps/studio/components/interfaces/Organization/ProjectClaim/choose-org.tsx b/apps/studio/components/interfaces/Organization/ProjectClaim/choose-org.tsx
index fd8ff8217f56e..74a0d46081cbd 100644
--- a/apps/studio/components/interfaces/Organization/ProjectClaim/choose-org.tsx
+++ b/apps/studio/components/interfaces/Organization/ProjectClaim/choose-org.tsx
@@ -1,9 +1,8 @@
import { OrganizationSelector } from 'components/ui/org-selector'
-import { Organization } from 'types'
import { ProjectClaimLayout } from './layout'
export interface ProjectClaimChooseOrgProps {
- onChoose: (org: Organization) => void
+ onChoose: (orgSlug: string) => void
}
const MAX_ORGS_TO_SHOW = 5
diff --git a/apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx b/apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx
index 12ec20e15df1c..dc9f83dfef30d 100644
--- a/apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx
+++ b/apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx
@@ -41,13 +41,14 @@ export const ProjectClaimConfirm = ({
const queryClient = useQueryClient()
const { mutateAsync: approveRequest, isLoading: isApproving } =
- useApiAuthorizationApproveMutation()
+ useApiAuthorizationApproveMutation({ onError: () => {} })
const { mutateAsync: claimProject, isLoading: isClaiming } = useOrganizationProjectClaimMutation()
const onClaimProject = async () => {
try {
const response = await approveRequest({ id: auth_id!, slug: selectedOrganization.slug })
+
await claimProject({
slug: selectedOrganization.slug,
token: claimToken!,
diff --git a/apps/studio/components/ui/org-selector.tsx b/apps/studio/components/ui/org-selector.tsx
index 94fc1c6ad07cc..17c0e31513d9f 100644
--- a/apps/studio/components/ui/org-selector.tsx
+++ b/apps/studio/components/ui/org-selector.tsx
@@ -3,16 +3,87 @@ import Link from 'next/link'
import { useMemo, useState } from 'react'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
import { parseAsString, useQueryState } from 'nuqs'
import { Organization } from 'types'
import { Badge, Button, Card, CardHeader, CardTitle, Input_Shadcn_ } from 'ui'
+import { ButtonTooltip } from './ButtonTooltip'
export interface ProjectClaimChooseOrgProps {
- onSelect: (org: Organization) => void
+ onSelect: (orgSlug: string) => void
maxOrgsToShow?: number
}
+const OrganizationCard = ({
+ org,
+ onSelect,
+}: {
+ org: Organization
+ onSelect: (orgSlug: string) => void
+}) => {
+ const isFreePlan = org.plan?.id === 'free'
+ const { data: membersExceededLimit, isSuccess } = useFreeProjectLimitCheckQuery(
+ { slug: org.slug },
+ { enabled: isFreePlan }
+ )
+ const hasMembersExceedingFreeTierLimit = (membersExceededLimit || []).length > 0
+ const freePlanWithExceedingLimits = isFreePlan && hasMembersExceedingFreeTierLimit
+
+ return (
+
+ The following members have reached their maximum limits for the number of
+ active free plan projects within organizations where they are an administrator
+ or owner:
+
+ These members will need to either delete, pause, or upgrade one or more of
+ these projects before you're able to create a free project within this
+ organization.
+
+ {membersExceededLimit.map((member, idx: number) => (
+
+