diff --git a/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx b/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx index ed4d39c50f..cecf90f28e 100644 --- a/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx +++ b/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) { - return null + function handleLinkClick() { + 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')} diff --git a/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx b/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx index ece3988369..6a7574dbd9 100644 --- a/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx +++ b/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('', 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' } + ) + }) + }) })