From 03179a757e9aadc44ff1b401158c323c0d32c79e Mon Sep 17 00:00:00 2001
From: David Veszelovszki <veszelovszki@gmail.com>
Date: Thu, 20 Jun 2024 12:28:36 +0200
Subject: [PATCH] feat(plg): Tweak invite co-workers flow (#63374)

---
 .../cody/management/CodyManagementPage.tsx    | 35 +++++++++++--------
 .../new/NewCodyProSubscriptionPage.tsx        |  2 +-
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/client/web/src/cody/management/CodyManagementPage.tsx b/client/web/src/cody/management/CodyManagementPage.tsx
index cc471eed1a4f..d0a8a4b0d081 100644
--- a/client/web/src/cody/management/CodyManagementPage.tsx
+++ b/client/web/src/cody/management/CodyManagementPage.tsx
@@ -89,6 +89,26 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
         }
     }, [data, navigate])
 
+    const getTeamInviteButton = (): JSX.Element | null => {
+        const isSoloUser = subscriptionSummaryQueryResult?.data?.teamMaxMembers === 1
+        const hasFreeSeats = subscriptionSummaryQueryResult?.data
+            ? subscriptionSummaryQueryResult.data.teamMaxMembers >
+              subscriptionSummaryQueryResult.data.teamCurrentMembers
+            : false
+        const targetUrl = hasFreeSeats ? '/cody/team/manage' : '/cody/manage/subscription/new?addSeats=1'
+        const label = isSoloUser || hasFreeSeats ? 'Invite co-workers' : 'Add seats'
+
+        if (!subscriptionSummaryQueryResult?.data) {
+            return null
+        }
+
+        return (
+            <Button as={Link} to={targetUrl} variant="success" className="text-nowrap">
+                <Icon aria-hidden={true} svgPath={mdiPlusThick} /> {label}
+            </Button>
+        )
+    }
+
     const onClickUpgradeToProCTA = useCallback(() => {
         telemetryRecorder.recordEvent('cody.management.upgradeToProCTA', 'click')
     }, [telemetryRecorder])
@@ -122,20 +142,7 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
                 )}
                 <PageHeader
                     className="mb-4 mt-4"
-                    actions={
-                        isAdmin && (
-                            <div className="d-flex">
-                                <Button
-                                    as={Link}
-                                    to="/cody/manage/subscription/new?addSeats=1"
-                                    variant="success"
-                                    className="text-nowrap"
-                                >
-                                    <Icon aria-hidden={true} svgPath={mdiPlusThick} /> Invite co-workers
-                                </Button>
-                            </div>
-                        )
-                    }
+                    actions={isAdmin && <div className="d-flex">{getTeamInviteButton()}</div>}
                 >
                     <PageHeader.Heading as="h2" styleAs="h1">
                         <div className="d-inline-flex align-items-center">
diff --git a/client/web/src/cody/management/subscription/new/NewCodyProSubscriptionPage.tsx b/client/web/src/cody/management/subscription/new/NewCodyProSubscriptionPage.tsx
index a4af06baf652..9246774a8839 100644
--- a/client/web/src/cody/management/subscription/new/NewCodyProSubscriptionPage.tsx
+++ b/client/web/src/cody/management/subscription/new/NewCodyProSubscriptionPage.tsx
@@ -48,8 +48,8 @@ const AuthenticatedNewCodyProSubscriptionPage: FunctionComponent<NewCodyProSubsc
     telemetryRecorder,
 }) => {
     const [urlSearchParams] = useSearchParams()
-    const isTeam = parseInt(urlSearchParams.get('seats') || '', 10) > 1
     const addSeats = !!urlSearchParams.get('addSeats')
+    const isTeam = addSeats || parseInt(urlSearchParams.get('seats') || '', 10) > 1
 
     const stripeElementsOptions = useBillingAddressStripeElementsOptions()