feat(plg): remove seats from subscription (#63408)

Closes https://github.com/sourcegraph/sourcegraph/issues/63234

[Design](https://www.figma.com/design/FMSdn1oKccJRHQPgf7053o/Cody-PLG-GA?node-id=5556-13856&t=f13ek1ZSgoUdrH6z-0)

Adds a button to remove the remaining invites from a subscription. 


https://github.com/sourcegraph/sourcegraph/assets/25318659/679e19dd-0e0e-4561-8ac1-af1b6979ee73

**Known deviation from design (cc: @rrhyne)**

The “Remove User” success message and the “Remove Seats from
Subscription” alerts are positioned differently than in the design. The
“Remove User” banner, along with other user and invite list alerts, is
placed above the users list, below the page title or the invites textbox
if rendered. The “Remove Seats from Subscription” banner, along with
other invite textbox alerts, is located above the invites textbox
instead of above the page title and all the page content. These issues
will be addressed in follow-up PRs, as we need to refactor the existing
Team Members page layout.
Created an issue to address it:
- https://github.com/sourcegraph/sourcegraph/issues/63411






<!-- 💡 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
-->


## Test plan
- Run a Sourcegraph instance in dotcom mode
- Sign in as a team admin
- Ensure there are free seats on your team (invites remaining)
- Ensure "Remove invites from plan" button is rendered
- Check the number of invites remaining
- Click the button
- Ensure the subscription has been updated and now the max seats reduced
by the number of remaining invites
- Ensure the success banner is rendered

<!-- All pull requests REQUIRE a test plan:
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles
-->


## Changelog

<!--
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/components/CodyAlert.module.scss

@@ -41,8 +41,15 @@
         background-color: #51cf66;
     }
     &::after {
+        top: calc(50% - 16px);
+        left: 1.5rem;
+        /* stylelint-disable-next-line declaration-property-unit-allowed-list */
+        width: 32px;
+        /* stylelint-disable-next-line declaration-property-unit-allowed-list */
+        height: 32px;
         // Green checkmark SVG
         background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 25'><path fill='%23319E44' d='M27 .4a3.4 3.4 0 0 0-2.4 1.1L12 15.6 7 9.3a3.4 3.4 0 0 0-5-.6 3.4 3.4 0 0 0-.5 4.9L9.2 23a3.4 3.4 0 0 0 5.3.1l15.2-17a3.4 3.4 0 0 0-.3-4.9 3.4 3.4 0 0 0-2.5-.8Z'/></svg>");
+        background-repeat: no-repeat;
     }
 }
 

client/web/src/cody/invites/InviteUsers.tsx

@@ -2,13 +2,13 @@ import React, { useState, useCallback, useMemo } from 'react'
 
 import { pluralize } from '@sourcegraph/common'
 import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
-import { ButtonLink, H2, Link, Text, H3, TextArea } from '@sourcegraph/wildcard'
+import { H2, Link, Text, H3, TextArea, Button, H1 } from '@sourcegraph/wildcard'
 
 import { CodyAlert } from '../components/CodyAlert'
 import { CodyContainer } from '../components/CodyContainer'
 import { CodyProBadgeDeck } from '../components/CodyProBadgeDeck'
 import { useSendInvite, useTeamInvites } from '../management/api/react-query/invites'
-import { useCurrentSubscription } from '../management/api/react-query/subscriptions'
+import { useCurrentSubscription, useUpdateCurrentSubscription } from '../management/api/react-query/subscriptions'
 import { useTeamMembers } from '../management/api/react-query/teams'
 import type { SubscriptionSummary } from '../management/api/teamSubscriptions'
 import { isValidEmailAddress } from '../util'
@@ -39,6 +39,7 @@ export const InviteUsers: React.FunctionComponent<InviteUsersProps> = ({ telemet
     const [emailAddressErrorMessage, setEmailAddressErrorMessage] = useState<string | null>(null)
 
     const sendInviteMutation = useSendInvite()
+    const updateSubscriptionMutation = useUpdateCurrentSubscription()
 
     const verifyEmailList = useCallback((): Error | void => {
         if (emailAddresses.length === 0) {
@@ -104,10 +105,23 @@ export const InviteUsers: React.FunctionComponent<InviteUsersProps> = ({ telemet
         })
     }, [emailAddresses, sendInviteMutation.mutateAsync, teamId, telemetryRecorder, verifyEmailList])
 
-    if (!isAdmin || !remainingInviteCount) {
+    if (updateSubscriptionMutation.isSuccess) {
+        return (
+            <CodyAlert variant="greenSuccess">
+                <H1 as="p" className="mb-2">
+                    Remaining invites removed from plan
+                </H1>
+                <Text className="mb-0">You can add more seats at any time with the "Add seats" button.</Text>
+            </CodyAlert>
+        )
+    }
+
+    if (!isAdmin || !remainingInviteCount || !subscriptionQueryResult.data) {
         return null
     }
 
+    const { maxSeats } = subscriptionQueryResult.data
+
     return (
         <>
             {sendInviteMutation.status === 'success' && (
@@ -153,15 +167,33 @@ export const InviteUsers: React.FunctionComponent<InviteUsersProps> = ({ telemet
                             isValid={emailAddressErrorMessage ? false : undefined}
                         />
                         {emailAddressErrorMessage ? (
-                            <Text className="text-danger mb-2">{emailAddressErrorMessage}</Text>
+                            <Text className="text-danger">{emailAddressErrorMessage}</Text>
                         ) : (
-                            <Text className="text-muted mb-2">Enter email addresses separated by a comma.</Text>
+                            <Text className="text-muted">Enter email addresses separated by a comma.</Text>
                         )}
 
                         <div>
-                            <ButtonLink variant="success" size="sm" onSelect={onSendInvitesClicked}>
+                            <Button
+                                disabled={updateSubscriptionMutation.isPending || sendInviteMutation.isPending}
+                                variant="success"
+                                onClick={onSendInvitesClicked}
+                                className="mr-2"
+                            >
                                 Send
-                            </ButtonLink>
+                            </Button>
+                            <Button
+                                variant="link"
+                                disabled={updateSubscriptionMutation.isPending || sendInviteMutation.isPending}
+                                onClick={() =>
+                                    updateSubscriptionMutation.mutate({
+                                        subscriptionUpdate: {
+                                            newSeatCount: maxSeats - remainingInviteCount,
+                                        },
+                                    })
+                                }
+                            >
+                                Remove invites from plan
+                            </Button>
                         </div>
                     </div>
                 </div>