Merge pull request #8359 from overleaf/ta-settings-tracking

Track Settings Page Upgrade Clicks

GitOrigin-RevId: 92c9f595a3b0f1a1cf40816204cabe3e94d36db3

services/web/frontend/js/features/settings/components/linking/integration-widget.tsx

@@ -3,6 +3,11 @@ import { useTranslation } from 'react-i18next'
 import AccessibleModal from '../../../../shared/components/accessible-modal'
 import { Button, Modal } from 'react-bootstrap'
 import getMeta from '../../../../utils/meta'
+import { sendMB } from '../../../../infrastructure/event-tracking'
+
+function trackUpgradeClick() {
+  sendMB('settings-upgrade-click')
+}
 
 type IntegrationLinkingWidgetProps = {
   logo: ReactNode
@@ -66,7 +71,6 @@ export function IntegrationLinkingWidget({
       <div>
         <ActionButton
           hasFeature={hasFeature}
-          upgradePath="/user/subscription/plans"
           linked={linked}
           handleUnlinkClick={handleUnlinkClick}
           linkPath={linkPath}
@@ -86,7 +90,6 @@ export function IntegrationLinkingWidget({
 
 type ActionButtonProps = {
   hasFeature?: boolean
-  upgradePath: string
   linked?: boolean
   handleUnlinkClick: () => void
   linkPath: string
@@ -95,7 +98,6 @@ type ActionButtonProps = {
 
 function ActionButton({
   hasFeature,
-  upgradePath,
   linked,
   handleUnlinkClick,
   linkPath,
@@ -105,7 +107,11 @@ function ActionButton({
 
   if (!hasFeature) {
     return (
-      <Button bsStyle="info" href={upgradePath}>
+      <Button
+        bsStyle="info"
+        href="/user/subscription/plans"
+        onClick={trackUpgradeClick}
+      >
         <span className="text-capitalize">{t('upgrade')}</span>
       </Button>
     )

services/web/test/frontend/features/settings/components/linking/integration-widget.test.tsx

@@ -1,6 +1,8 @@
 import { expect } from 'chai'
+import sinon from 'sinon'
 import { screen, fireEvent, render, waitFor } from '@testing-library/react'
 import { IntegrationLinkingWidget } from '../../../../../../frontend/js/features/settings/components/linking/integration-widget'
+import * as eventTracking from '../../../../../../frontend/js/infrastructure/event-tracking'
 
 describe('<IntegrationLinkingWidgetTest/>', function () {
   const defaultProps = {
@@ -15,18 +17,28 @@ describe('<IntegrationLinkingWidgetTest/>', function () {
   }
 
   describe('when the feature is not available', function () {
+    let sendMBSpy: sinon.SinonSpy
     beforeEach(function () {
+      sendMBSpy = sinon.spy(eventTracking, 'sendMB')
       render(<IntegrationLinkingWidget {...defaultProps} hasFeature={false} />)
     })
 
+    afterEach(function () {
+      sendMBSpy.restore()
+    })
+
     it("should render 'Premium feature' label", function () {
       screen.getByText('Premium feature')
     })
 
-    it('should render a link to upgrade the account', function () {
-      expect(
-        screen.getByRole('link', { name: 'Upgrade' }).getAttribute('href')
-      ).to.equal('/user/subscription/plans')
+    it('should render an upgrade link and track clicks', function () {
+      const upgradeLink = screen.getByRole('link', { name: 'Upgrade' })
+      expect(upgradeLink.getAttribute('href')).to.equal(
+        '/user/subscription/plans'
+      )
+      fireEvent.click(upgradeLink)
+      expect(sendMBSpy).to.be.calledOnce
+      expect(sendMBSpy).calledWith('settings-upgrade-click')
     })
   })