fix(plg): ensure invite flow is enabled only for embedded UI (#63466)

Makes the invite flow on "/cody/manage" page dependent on the
`dotcom.codyProConfig.useEmbeddedUI` site config param.

Previously we didn't have a check for this site config param on this
page (to be precise, it's predecessor, see
https://github.com/sourcegraph/sourcegraph/pull/63442).

<!-- 💡 To write a useful PR description, make sure that your description
covers:
- WHAT this PR is changing:
    - How was it PREVIOUSLY.
    - How it will be from NOW on.
- WHY this PR is needed.
- CONTEXT, i.e. to which initiative, project or RFC it belongs.

The structure of the description doesn't matter as much as covering
these points, so use
your best judgement based on your context.
Learn how to write good pull request description:
https://www.notion.so/sourcegraph/Write-a-good-pull-request-description-610a7fd3e613496eb76f450db5a49b6e?pvs=4
-->

| `useEmbeddedUI` | Plan |  Role  | Screenshot |
| -- | -- | -- | -- |
| `false` | admin | Pro |<img width="1483" alt="Screenshot 2024-06-25 at
13 02 18"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/8d5687df-43a9-4dbe-b82c-ecc60696da0f">|
| `false` | member | Pro |<img width="1483" alt="Screenshot 2024-06-25
at 13 14 17"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/cd53550c-5d51-4830-834c-1c233d13e72a">|
| `false` | n/a | Free |<img width="1483" alt="Screenshot 2024-06-25 at
13 17 15"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/f18720d4-a000-4bfb-b948-bbda29e49911">|
| `true` | admin | Pro |<img width="1483" alt="Screenshot 2024-06-25 at
13 30 03"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/618675d5-13b9-44b8-be50-4c506b46b702">|
| `true` | member | Pro |<img width="1483" alt="Screenshot 2024-06-25 at
13 25 24"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/ccac77e8-c7ca-44a5-b033-3c6dad8e5d70">|
| `true` | n/a | Free |<img width="1483" alt="Screenshot 2024-06-25 at
13 31 41"
src="https://github.com/sourcegraph/sourcegraph/assets/25318659/a7373ae9-a440-4282-805f-018d703cf3b0">|


## Test plan
- Tested manually (screenshots attached):
  - Run Sourcegraph instance in dotcom mode
- Tweak `dotcom.codyProConfig.useEmbeddedUI` site config param, log in
with users with different team roles (member/admin) and check results
with the table above.
<!-- All pull requests REQUIRE a test plan:
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles
-->




<!--
1. Ensure your pull request title is formatted as: $type($domain): $what
2. Add bullet list items for each additional detail you want to cover
(see example below)
3. You can edit this after the pull request was merged, as long as
release shipping it hasn't been promoted to the public.
4. For more information, please see this how-to
https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c?

Audience: TS/CSE > Customers > Teammates (in that order).

Cheat sheet: $type = chore|fix|feat $domain:
source|search|ci|release|plg|cody|local|...
-->

<!--
Example:

Title: fix(search): parse quotes with the appropriate context
Changelog section:

## Changelog

- When a quote is used with regexp pattern type, then ...
- Refactored underlying code.
-->

Author: taras-yemets

client/web/src/cody/management/CodyManagementPage.tsx

@@ -25,7 +25,7 @@ import { AcceptInviteBanner } from '../invites/AcceptInviteBanner'
 import { InviteUsers } from '../invites/InviteUsers'
 import { isCodyEnabled } from '../isCodyEnabled'
 import { USER_CODY_PLAN, USER_CODY_USAGE } from '../subscription/queries'
-import { getManageSubscriptionPageURL } from '../util'
+import { getManageSubscriptionPageURL, isEmbeddedCodyProUIEnabled } from '../util'
 
 import { useSubscriptionSummary } from './api/react-query/subscriptions'
 import { SubscriptionStats } from './SubscriptionStats'
@@ -70,7 +70,6 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
     )
 
     const subscriptionSummaryQueryResult = useSubscriptionSummary()
-    const isAdmin = subscriptionSummaryQueryResult?.data?.userRole === 'admin'
 
     const subscription = data?.currentUser?.codySubscription
 
@@ -80,26 +79,6 @@ 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 ? CodyProRoutes.ManageTeam : `${CodyProRoutes.NewProSubscription}?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])
@@ -116,12 +95,80 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
         return null
     }
 
-    const isUserOnProTier = subscription.plan === CodySubscriptionPlan.PRO
+    // Generate invite-related widgets for the page.
+    // The returned widgets depend on the user's role and subscription status.
+    // Only applicable when embedded Cody Pro UI is enabled.
+    const inviteWidgets = ((): {
+        banner?: React.ReactElement
+        link?: React.ReactElement
+        form?: React.ReactElement
+    } => {
+        // Invites flow is supported only for embedded Cody UI.
+        if (!isEmbeddedCodyProUIEnabled()) {
+            return {}
+        }
+
+        const banner = <AcceptInviteBanner onSuccess={refetch} />
+
+        const subscriptionSummary = subscriptionSummaryQueryResult.data
+        // User is not admin: only banner widget is available from the invite flow (user with any role may get an invite).
+        if (!subscriptionSummary || subscriptionSummary.userRole !== 'admin') {
+            return { banner }
+        }
+
+        // User is admin: define link and form widgets.
+
+        const form = <InviteUsers telemetryRecorder={telemetryRecorder} subscriptionSummary={subscriptionSummary} />
+
+        const isSoloUser = subscriptionSummary.teamMaxMembers === 1
+        const hasFreeSeats = subscriptionSummary.teamMaxMembers > subscriptionSummary.teamCurrentMembers
+        const targetUrl = hasFreeSeats ? CodyProRoutes.ManageTeam : `${CodyProRoutes.NewProSubscription}?addSeats=1`
+        const label = isSoloUser || hasFreeSeats ? 'Invite co-workers' : 'Add seats'
+        const link = (
+            <Button as={Link} to={targetUrl} variant="success" className="text-nowrap">
+                <Icon aria-hidden={true} svgPath={mdiPlusThick} /> {label}
+            </Button>
+        )
+
+        return { banner, link, form }
+    })()
+
+    const pageHeaderLink: React.ReactNode = (() => {
+        // If invites link widget is defined, render it.
+        if (inviteWidgets.link) {
+            return inviteWidgets.link
+        }
+
+        // User already has a Pro subscription - render a link to the manage subscription page.
+        if (subscription.plan === CodySubscriptionPlan.PRO) {
+            return (
+                <ButtonLink
+                    variant="primary"
+                    to={getManageSubscriptionPageURL()}
+                    onClick={() => {
+                        telemetryRecorder.recordEvent('cody.manageSubscription', 'click')
+                    }}
+                >
+                    <Icon svgPath={mdiCreditCardOutline} className="mr-1" aria-hidden={true} />
+                    Manage subscription
+                </ButtonLink>
+            )
+        }
+
+        // User is on a free plan. Render a link to the subscriptions page.
+        return (
+            <ButtonLink to={CodyProRoutes.Subscription} variant="primary" onClick={onClickUpgradeToProCTA}>
+                Upgrade plan
+            </ButtonLink>
+        )
+    })()
 
     return (
         <Page className={classNames('d-flex flex-column')}>
             <PageTitle title="Dashboard" />
-            <AcceptInviteBanner onSuccess={refetch} />
+
+            {inviteWidgets.banner}
+
             {welcomeToPro && (
                 <CodyAlert variant="greenCodyPro">
                     <H2 className="mt-4">Welcome to Cody Pro</H2>
@@ -134,29 +181,12 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
                 className="my-4 d-inline-flex align-items-center"
                 actions={
                     <div className="d-flex flex-column flex-gap-2">
-                        {isAdmin ? (
-                            getTeamInviteButton()
-                        ) : isUserOnProTier ? (
-                            <ButtonLink
-                                variant="primary"
-                                to={getManageSubscriptionPageURL()}
-                                onClick={() => {
-                                    telemetryRecorder.recordEvent('cody.manageSubscription', 'click')
-                                }}
-                            >
-                                <Icon svgPath={mdiCreditCardOutline} className="mr-1" aria-hidden={true} />
-                                Manage subscription
-                            </ButtonLink>
-                        ) : (
-                            <ButtonLink to="/cody/subscription" variant="primary" onClick={onClickUpgradeToProCTA}>
-                                Upgrade plan
-                            </ButtonLink>
-                        )}
+                        {pageHeaderLink}
                         <Link
                             to="https://help.sourcegraph.com"
                             target="_blank"
                             rel="noreferrer"
-                            className="text-muted text-sm"
+                            className="text-muted text-center text-sm"
                         >
                             <Icon svgPath={mdiHelpCircleOutline} className="mr-1" aria-hidden={true} />
                             Help &amp; community
@@ -170,12 +200,7 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
                 </PageHeader.Heading>
             </PageHeader>
 
-            {isAdmin && !!subscriptionSummaryQueryResult.data && (
-                <InviteUsers
-                    telemetryRecorder={telemetryRecorder}
-                    subscriptionSummary={subscriptionSummaryQueryResult.data}
-                />
-            )}
+            {inviteWidgets.form}
 
             <div className={classNames('border bg-1 mb-2', styles.container)}>
                 <SubscriptionStats