fix: Change plan update banner to new alert and refresh seat count

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.test.tsx

@@ -214,7 +214,7 @@ describe('CurrentOrgPlan', () => {
         } as z.infer<typeof AccountDetailsSchema>,
       })
       render(<CurrentOrgPlan />, { wrapper })
-      const updatedAlert = await screen.findByText('Plan successfully updated.')
+      const updatedAlert = await screen.findByText('Plan successfully updated')
       expect(updatedAlert).toBeInTheDocument()
       expect(
         screen.getByText(/with a monthly subscription for 34 seats/)
@@ -230,7 +230,7 @@ describe('CurrentOrgPlan', () => {
       expect(currentPlanCard).toBeInTheDocument()
 
       expect(
-        screen.queryByText('Plan successfully updated.')
+        screen.queryByText('Plan successfully updated')
       ).not.toBeInTheDocument()
     })
   })

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.tsx

@@ -88,7 +88,7 @@ function CurrentOrgPlan() {
             <Alert variant={planUpdatedNotification.alertOption}>
               {scheduleStart && scheduledPhase?.quantity ? (
                 <>
-                  <Alert.Title>Plan successfully updated.</Alert.Title>
+                  <Alert.Title>Plan successfully updated</Alert.Title>
                   <Alert.Description>
                     The start date is {scheduleStart} with a monthly
                     subscription for {scheduledPhase.quantity} seats.

src/pages/PlanPage/subRoutes/CurrentOrgPlan/InfoMessageStripeCallback/InfoMessageStripeCallback.test.tsx

@@ -38,7 +38,7 @@ describe('InfoMessageStripeCallback', () => {
       )
 
       await expect(
-        screen.getByText(/Subscription Update Successful/)
+        screen.getByText(/Plan successfully updated./)
       ).toBeInTheDocument()
     })
   })

src/pages/PlanPage/subRoutes/CurrentOrgPlan/InfoMessageStripeCallback/InfoMessageStripeCallback.tsx

@@ -1,7 +1,7 @@
 import qs from 'qs'
 import { useLocation } from 'react-router-dom'
 
-import Message from 'old_ui/Message'
+import { Alert } from 'ui/Alert'
 
 // Stripe redirects to this page with ?success or ?cancel in the URL
 // this component takes care of rendering a message if it is successful
@@ -16,14 +16,12 @@ function InfoMessageStripeCallback({
 
   if ('success' in urlParams && !awaitingInitialPaymentMethodVerification)
     return (
-      <div className="col-start-1 col-end-13 mb-4">
-        <Message variant="success">
-          <h2 className="text-lg">Subscription Update Successful</h2>
-          <p className="text-sm">
-            Your subscription has been updated successfully. If your plan
-            details appear incorrect, please refresh the page.
-          </p>
-        </Message>
+      <div className="col-start-1 col-end-13 mb-4 sm:flex-initial md:w-2/3 lg:w-3/4">
+        <Alert variant="success">
+          <Alert.Description className="text-sm">
+            Plan successfully updated.
+          </Alert.Description>
+        </Alert>
       </div>
     )
 

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/hooks/useUpgradeControls.ts

@@ -31,8 +31,12 @@ export const useUpgradeControls = () => {
         newPlan: newPlan!,
       },
       {
-        onSuccess: () => {
-          queryClient.invalidateQueries(['accountDetails'])
+        onSuccess: async () => {
+          // we want to wait here as history.push can disrupt the query invalidation
+          await Promise.all([
+            queryClient.refetchQueries({ queryKey: ['accountDetails'] }),
+            queryClient.refetchQueries({ queryKey: ['GetPlanData'] }),
+          ])
           setPlanUpdatedNotification({
             alertOption: 'success',
           })