From 55479424d903379ce68c02f243976df5c6534c1a Mon Sep 17 00:00:00 2001
From: ilee2u <ilee@2u.com>
Date: Tue, 17 Dec 2024 14:21:29 -0500
Subject: [PATCH] feat: track event on upgrade link click

---
 src/components/Sidebar/index.jsx      | 31 ++++++++++++++++++++++-----
 src/components/Sidebar/index.test.jsx | 24 ++++++++++++++++-----
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index f217209..1081e47 100644
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -13,9 +13,9 @@ import showSurvey from '../../utils/surveyMonkey';
 import APIError from '../APIError';
 import ChatBox from '../ChatBox';
 import Disclosure from '../Disclosure';
-import UpgradePanel from '../UpgradePanel';
 import MessageForm from '../MessageForm';
-import { useCourseUpgrade } from '../../hooks';
+import UpgradePanel from '../UpgradePanel';
+import { useCourseUpgrade, useTrackEvent } from '../../hooks';
 import { ReactComponent as XpertLogo } from '../../assets/xpert-logo.svg';
 import './Sidebar.scss';
 
@@ -35,6 +35,8 @@ const Sidebar = ({
     upgradeable, upgradeUrl, auditTrialExpired, auditTrialDaysRemaining,
   } = useCourseUpgrade();
 
+  const { track } = useTrackEvent();
+
   const chatboxContainerRef = useRef(null);
 
   // this use effect is intended to scroll to the bottom of the chat window, in the case
@@ -83,25 +85,44 @@ const Sidebar = ({
     <MessageForm courseId={courseId} shouldAutofocus unitId={unitId} />
   );
 
+  const handleUpgradeLinkClick = () => {
+    track('edx.ui.lms.learning_assistant.days_remaining_banner_upgrade_click');
+  }
+
+  const getUpgradeLink = () => (
+    <a
+      onClick={handleUpgradeLinkClick}
+      target="_blank"
+      href={upgradeUrl}
+      rel="noreferrer"
+      data-testid="days_remaining_banner_upgrade_link"
+    >
+      Upgrade
+    </a>
+  );
+
   const getDaysRemainingMessage = () => { // eslint-disable-line consistent-return
     if (auditTrialDaysRemaining > 1) {
       const intlRelativeTime = new Intl.RelativeTimeFormat({ style: 'long' });
       return (
         <div data-testid="days-remaining-message">
-          Your trial ends {intlRelativeTime.format(auditTrialDaysRemaining, 'day')}. <a target="_blank" href={upgradeUrl} rel="noreferrer">Upgrade</a> for full access to Xpert.
+          Your trial ends {intlRelativeTime.format(auditTrialDaysRemaining, 'day')}. {getUpgradeLink()} for full access to Xpert.
         </div>
       );
     } if (auditTrialDaysRemaining === 1) {
       return (
         <div data-testid="trial-ends-today-message">
-          Your trial ends today! <a target="_blank" href={upgradeUrl} rel="noreferrer">Upgrade</a> for full access to Xpert.
+          Your trial ends today! {getUpgradeLink()} for full access to Xpert.
         </div>
       );
     }
   };
 
   const getSidebar = () => (
-    <div className="h-100 d-flex flex-column justify-content-stretch" data-testid="sidebar-xpert">
+    <div
+      className="h-100 d-flex flex-column justify-content-stretch"
+      data-testid="sidebar-xpert"
+    >
       <div className="p-3 sidebar-header" data-testid="sidebar-xpert-header">
         <XpertLogo />
       </div>
diff --git a/src/components/Sidebar/index.test.jsx b/src/components/Sidebar/index.test.jsx
index 2894cfb..2f6f542 100644
--- a/src/components/Sidebar/index.test.jsx
+++ b/src/components/Sidebar/index.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen, act } from '@testing-library/react';
+import { fireEvent, screen, act } from '@testing-library/react';
 
 import { usePromptExperimentDecision } from '../../experiments';
 import {
@@ -13,7 +13,7 @@ import Sidebar from '.';
 
 jest.mock('../../hooks', () => ({
   useCourseUpgrade: jest.fn(),
-  useTrackEvent: jest.fn(() => ({ track: jest.fn() })),
+  useTrackEvent: jest.fn(),
 }));
 
 jest.mock('../../utils/surveyMonkey', () => jest.fn());
@@ -72,11 +72,9 @@ describe('<Sidebar />', () => {
   beforeEach(async () => {
     jest.resetAllMocks();
     useCourseUpgrade.mockReturnValue({ upgradeable: false });
-    useTrackEvent.mockReturnValue({ track: jest.fn() });
     usePromptExperimentDecision.mockReturnValue([]);
     useCourseUpgrade.mockReturnValue([]);
-    const mockedTrackEvent = jest.fn();
-    useTrackEvent.mockReturnValue({ track: mockedTrackEvent });
+    useTrackEvent.mockReturnValue({ track: jest.fn() });
   });
 
   describe('when it\'s open', () => {
@@ -119,6 +117,22 @@ describe('<Sidebar />', () => {
       expect(screen.queryByTestId('trial-ends-today')).not.toBeInTheDocument();
     });
 
+    it('should call track event on click', () => {
+      useCourseUpgrade.mockReturnValue({
+        upgradeable: true,
+        upgradeUrl: 'https://mockurl.com',
+        auditTrialDaysRemaining: 1,
+      });
+      const mockedTrackEvent = jest.fn();
+      useTrackEvent.mockReturnValue({ track: mockedTrackEvent });
+
+      render(undefined, { disclosureAcknowledged: true });
+      const upgradeLink = screen.queryByTestId('days_remaining_banner_upgrade_link');
+      expect(mockedTrackEvent).not.toHaveBeenCalled();
+      fireEvent.click(upgradeLink);
+      expect(mockedTrackEvent).toHaveBeenCalledWith('edx.ui.lms.learning_assistant.days_remaining_banner_upgrade_click');
+    });
+
     it('If auditTrialDaysRemaining < 1, do not show either of those', () => {
       useCourseUpgrade.mockReturnValue({
         upgradeable: true,