Merge pull request #22578 from overleaf/ii-fl-add-seats-upgrade-plan-link

[web] Add seats "Upgrade my plan" link

GitOrigin-RevId: 7c72101be6b22feee9e3fb2ec119336e0e092ca9

services/web/app/src/Features/Subscription/SubscriptionGroupController.mjs

@@ -12,6 +12,7 @@ import SplitTestHandler from '../SplitTests/SplitTestHandler.js'
 import ErrorController from '../Errors/ErrorController.js'
 import UserGetter from '../User/UserGetter.js'
 import { Subscription } from '../../models/Subscription.js'
+import { isProfessionalGroupPlan } from './PlansHelper.mjs'
 
 /**
  * @import { Subscription } from "../../../../types/subscription/dashboard/subscription.js"
@@ -132,6 +133,7 @@ async function addSeatsToGroupSubscription(req, res) {
       subscriptionId: subscription._id,
       groupName: subscription.teamName,
       totalLicenses: subscription.membersLimit,
+      isProfessional: isProfessionalGroupPlan(subscription),
     })
   } catch (error) {
     logger.err(

services/web/app/views/subscriptions/add-seats.pug

@@ -11,6 +11,7 @@ block append meta
 	meta(name="ol-groupName", data-type="string", content=groupName)
 	meta(name="ol-subscriptionId", data-type="string", content=subscriptionId)
 	meta(name="ol-totalLicenses", data-type="number", content=totalLicenses)
+	meta(name="ol-isProfessional", data-type="boolean", content=isProfessional)
 
 block content
 	main.content.content-alt#main-content

services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx

@@ -36,6 +36,7 @@ function AddSeats() {
   const groupName = getMeta('ol-groupName')
   const subscriptionId = getMeta('ol-subscriptionId')
   const totalLicenses = Number(getMeta('ol-totalLicenses'))
+  const isProfessional = getMeta('ol-isProfessional')
   const [addSeatsInputError, setAddSeatsInputError] = useState<string>()
   const [shouldContactSales, setShouldContactSales] = useState(false)
   const controller = useAbortController()
@@ -307,13 +308,15 @@ function AddSeats() {
                   />
                 )}
                 <div className="d-flex align-items-center justify-content-end gap-2">
-                  <a
+                  {!isProfessional && (
-                    href="/user/subscription/group/upgrade-subscription"
+                    <a
-                    rel="noreferrer noopener"
+                      href="/user/subscription/group/upgrade-subscription"
-                    className="me-auto"
+                      rel="noreferrer noopener"
-                  >
+                      className="me-auto"
-                    {t('upgrade_my_plan')}
+                    >
-                  </a>
+                      {t('upgrade_my_plan')}
+                    </a>
+                  )}
                   <Button variant="secondary" href="/user/subscription">
                     {t('cancel')}
                   </Button>

services/web/test/frontend/features/group-management/components/add-seats.spec.tsx

@@ -16,6 +16,7 @@ describe('<AddSeats />', function () {
         '2025-01-01T12:00:00.000Z'
       )
       win.metaAttributesCache.set('ol-totalLicenses', this.totalLicenses)
+      win.metaAttributesCache.set('ol-isProfessional', false)
     })
 
     cy.mount(
@@ -69,14 +70,6 @@ describe('<AddSeats />', function () {
     })
   })
 
-  it('shows the "Upgrade my plan" link', function () {
-    cy.findByRole('link', { name: /upgrade my plan/i }).should(
-      'have.attr',
-      'href',
-      '/user/subscription/group/upgrade-subscription'
-    )
-  })
-
   it('renders the cancel button', function () {
     cy.findByRole('button', { name: /cancel/i }).should(
       'have.attr',
@@ -85,6 +78,30 @@ describe('<AddSeats />', function () {
     )
   })
 
+  describe('"Upgrade my plan" link', function () {
+    it('shows the link', function () {
+      cy.findByRole('link', { name: /upgrade my plan/i }).should(
+        'have.attr',
+        'href',
+        '/user/subscription/group/upgrade-subscription'
+      )
+    })
+
+    it('hides the link', function () {
+      cy.window().then(win => {
+        win.metaAttributesCache.set('ol-isProfessional', true)
+      })
+
+      cy.mount(
+        <SplitTestProvider>
+          <AddSeats />
+        </SplitTestProvider>
+      )
+
+      cy.findByRole('link', { name: /upgrade my plan/i }).should('not.exist')
+    })
+  })
+
   describe('cost summary', function () {
     beforeEach(function () {
       cy.findByLabelText(/how many users do you want to add/i).as('input')

services/web/test/unit/src/Subscription/SubscriptionGroupControllerTests.mjs

@@ -109,6 +109,10 @@ describe('SubscriptionGroupController', function () {
 
     this.SubscriptionModel = { Subscription: {} }
 
+    this.PlansHelper = {
+      isProfessionalGroupPlan: sinon.stub().returns(false),
+    }
+
     this.Controller = await esmock.strict(modulePath, {
       '../../../../app/src/Features/Subscription/SubscriptionGroupHandler':
         this.SubscriptionGroupHandler,
@@ -130,6 +134,7 @@ describe('SubscriptionGroupController', function () {
         this.SubscriptionController,
       '../../../../app/src/Features/Subscription/RecurlyClient':
         this.RecurlyClient,
+      '../../../../app/src/Features/Subscription/PlansHelper': this.PlansHelper,
       '../../../../app/src/models/Subscription': this.SubscriptionModel,
       '@overleaf/logger': {
         err: sinon.stub(),
@@ -335,6 +340,7 @@ describe('SubscriptionGroupController', function () {
           props.subscriptionId.should.equal(this.subscriptionId)
           props.groupName.should.equal(this.subscription.teamName)
           props.totalLicenses.should.equal(this.subscription.membersLimit)
+          props.isProfessional.should.equal(false)
           done()
         },
       }