Merge pull request #8016 from overleaf/msm-leavers-survey-metrics

[Settings] Metrics for institutional leavers survey

GitOrigin-RevId: 776d556789e8c9d0ea4c524ce4daa6bf05435810

services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx

@@ -1,7 +1,13 @@
+import { useEffect } from 'react'
 import { Alert } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
 import { useUserEmailsContext } from '../context/user-email-context'
+import { sendMB } from '../../../infrastructure/event-tracking'
+
+function sendMetrics(segmentation: 'view' | 'click' | 'close') {
+  sendMB('institutional-leavers-survey-notification', { type: segmentation })
+}
 
 export function LeaversSurveyAlert() {
   const { t } = useTranslation()
@@ -20,13 +26,23 @@ export function LeaversSurveyAlert() {
   function handleDismiss() {
     setShowInstitutionalLeaversSurveyUntil(0)
     setHide(true)
+    sendMetrics('close')
   }
 
-  if (Date.now() > showInstitutionalLeaversSurveyUntil) {
+  function handleLinkClick() {
-    return null
+    sendMetrics('click')
   }
 
-  if (hide) {
+  const shouldDisplay =
+    !hide && Date.now() <= showInstitutionalLeaversSurveyUntil
+
+  useEffect(() => {
+    if (shouldDisplay) {
+      sendMetrics('view')
+    }
+  }, [shouldDisplay])
+
+  if (!shouldDisplay) {
     return null
   }
 
@@ -39,6 +55,7 @@ export function LeaversSurveyAlert() {
           href="https://docs.google.com/forms/d/e/1FAIpQLSfYdeeoY5p1d31r5iUx1jw0O-Gd66vcsBi_Ntu3lJRMjV2EJA/viewform"
           target="_blank"
           rel="noopener noreferrer"
+          onClick={handleLinkClick}
         >
           {t('take_short_survey')}
         </a>

services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx

@@ -1,7 +1,9 @@
 import { expect } from 'chai'
+import sinon from 'sinon'
 import { fireEvent, screen, render } from '@testing-library/react'
 import { UserEmailsProvider } from '../../../../../frontend/js/features/settings/context/user-email-context'
 import { LeaversSurveyAlert } from '../../../../../frontend/js/features/settings/components/leavers-survey-alert'
+import * as eventTracking from '../../../../../frontend/js/infrastructure/event-tracking'
 import localStorage from '../../../../../frontend/js/infrastructure/local-storage'
 
 function renderWithProvider() {
@@ -52,4 +54,47 @@ describe('<LeaversSurveyAlert/>', function () {
     expect(localStorage.getItem('showInstitutionalLeaversSurveyUntil')).to.be
       .null
   })
+
+  describe('event tracking', function () {
+    let sendMBSpy
+
+    beforeEach(function () {
+      sendMBSpy = sinon.spy(eventTracking, 'sendMB')
+      const tomorrow = Date.now() + 1000 * 60 * 60 * 24
+      localStorage.setItem('showInstitutionalLeaversSurveyUntil', tomorrow)
+      localStorage.setItem('hideInstitutionalLeaversSurvey', false)
+      renderWithProvider()
+    })
+
+    afterEach(function () {
+      sendMBSpy.restore()
+      localStorage.clear()
+    })
+
+    it('should sent a `view` event on load', function () {
+      expect(sendMBSpy).to.be.calledOnce
+      expect(sendMBSpy).calledWith(
+        'institutional-leavers-survey-notification',
+        { type: 'view' }
+      )
+    })
+
+    it('should sent a `click` event when the link is clicked', function () {
+      fireEvent.click(screen.getByRole('link'))
+      expect(sendMBSpy).to.be.calledTwice
+      expect(sendMBSpy).calledWith(
+        'institutional-leavers-survey-notification',
+        { type: 'click' }
+      )
+    })
+
+    it('should sent a `close` event when it is closed', function () {
+      fireEvent.click(screen.getByRole('button'))
+      expect(sendMBSpy).to.be.calledTwice
+      expect(sendMBSpy).calledWith(
+        'institutional-leavers-survey-notification',
+        { type: 'close' }
+      )
+    })
+  })
 })