feat: add tracking event in upgrade notifications tray (openedx#1323)

awais-ansari · web-flow · commit e46d4cc54ddb · 2024-03-14T20:52:19.000+05:00
diff --git a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsSidebar.jsx b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsSidebar.jsx
@@ -14,17 +14,19 @@ const DiscussionsNotificationsSidebar = () => {
   const { hideNotificationbar } = useContext(SidebarContext);
 
   return (
-    <SidebarBase
-      ariaLabel={intl.formatMessage(messages.discussionNotificationTray)}
-      sidebarId={ID}
-      className="d-flex flex-column flex-fill sticky-top vh-100"
-      showTitleBar={false}
-      showBorder={false}
-    >
-      <NotificationTray />
-      {!hideNotificationbar && <div className="my-1.5" />}
-      <DiscussionsSidebar />
-    </SidebarBase>
+    <div className="sticky-top vh-100">
+      <SidebarBase
+        ariaLabel={intl.formatMessage(messages.discussionNotificationTray)}
+        sidebarId={ID}
+        className="d-flex flex-column flex-fill"
+        showTitleBar={false}
+        showBorder={false}
+      >
+        <NotificationTray />
+        {!hideNotificationbar && <div className="my-1.5" />}
+        <DiscussionsSidebar />
+      </SidebarBase>
+    </div>
   );
 };
 
diff --git a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.jsx b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.jsx
@@ -4,6 +4,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 
 import {
   initializeMockApp, initializeTestStore, render, screen,
@@ -16,6 +17,7 @@ import DiscussionsNotificationsSidebar from '../DiscussionsNotificationsSidebar'
 import DiscussionsWidget from './DiscussionsWidget';
 
 initializeMockApp();
+jest.mock('@edx/frontend-platform/analytics');
 
 describe('DiscussionsWidget', () => {
   let axiosMock;
@@ -74,7 +76,9 @@ describe('DiscussionsWidget', () => {
   });
 
   it('should display the Back to course button on small screens.', async () => {
+    sendTrackEvent.mockClear();
     renderWithProvider(DiscussionsNotificationsSidebar, { shouldDisplayFullScreen: true });
     expect(screen.queryByText('Back to course')).toBeInTheDocument();
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx
@@ -1,5 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useModel } from '../../../../../../generic/model-store';
 import UpgradeNotification from '../../../../../../generic/upgrade-notification/UpgradeNotification';
 import WIDGETS from '../../../constants';
@@ -21,19 +22,47 @@ const NotificationsWidget = () => {
   const {
     accessExpiration,
     contentTypeGatingEnabled,
+    end,
+    enrollmentEnd,
+    enrollmentMode,
+    enrollmentStart,
     marketingUrl,
     offer,
+    start,
     timeOffsetMillis,
     userTimezone,
+    verificationStatus,
   } = course;
 
   const {
+    courseModes,
     org,
     verifiedMode,
+    username,
   } = useModel('courseHomeMeta', courseId);
 
+  const activeCourseModes = useMemo(() => courseModes?.map(mode => mode.slug), [courseModes]);
+
+  const notificationTrayEventProperties = {
+    course_end: end,
+    course_modes: activeCourseModes,
+    course_start: start,
+    courserun_key: courseId,
+    enrollment_end: enrollmentEnd,
+    enrollment_mode: enrollmentMode,
+    enrollment_start: enrollmentStart,
+    is_upgrade_notification_visible: !!verifiedMode,
+    name: 'New Sidebar Notification Tray',
+    org_key: org,
+    username,
+    verification_status: verificationStatus,
+  };
+
   // After three seconds, update notificationSeen (to hide red dot)
-  useEffect(() => { setTimeout(onNotificationSeen, 3000); }, []);
+  useEffect(() => {
+    setTimeout(onNotificationSeen, 3000);
+    sendTrackEvent('edx.ui.course.upgrade.new_sidebar.notifications', notificationTrayEventProperties);
+  }, []);
 
   if (hideNotificationbar || !isNotificationbarAvailable) { return null; }
 
diff --git a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.jsx b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.jsx
@@ -94,13 +94,9 @@ describe('NotificationsWidget', () => {
     );
     const UpgradeNotification = document.querySelector('.upgrade-notification');
 
-    expect(UpgradeNotification)
-      .toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Upgrade for $149' }))
-      .toBeInTheDocument();
-    expect(screen.queryByText('You have no new notifications at this time.'))
-      .not
-      .toBeInTheDocument();
+    expect(UpgradeNotification).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+    expect(screen.queryByText('You have no new notifications at this time.')).not.toBeInTheDocument();
   });
 
   it('renders no notifications bar if no verified mode', async () => {
@@ -116,17 +112,14 @@ describe('NotificationsWidget', () => {
         <NotificationsWidget />
       </SidebarContext.Provider>,
     );
-    expect(screen.queryByText('Notifications'))
-      .not
-      .toBeInTheDocument();
+    expect(screen.queryByText('Notifications')).not.toBeInTheDocument();
   });
 
   it.each([
     {
       description: 'close the notification widget.',
       enabledInContext: true,
-      testId:
-      'notification-widget',
+      testId: 'notification-widget',
     },
     {
       description: 'close the sidebar when the notification widget is closed, and the discussion widget is unavailable.',
diff --git a/src/courseware/course/sequence/Sequence.test.jsx b/src/courseware/course/sequence/Sequence.test.jsx
@@ -180,7 +180,7 @@ describe('Sequence', () => {
       const sequencePreviousButton = screen.getByRole('link', { name: /previous/i });
       fireEvent.click(sequencePreviousButton);
       expect(testData.previousSequenceHandler).toHaveBeenCalledTimes(1);
-      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledTimes(2);
       expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.previous_selected', {
         current_tab: 1,
         id: testData.unitId,
@@ -194,8 +194,8 @@ describe('Sequence', () => {
         .filter(button => button !== sequencePreviousButton)[0];
       fireEvent.click(unitPreviousButton);
       expect(testData.previousSequenceHandler).toHaveBeenCalledTimes(2);
-      expect(sendTrackEvent).toHaveBeenCalledTimes(2);
-      expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'edx.ui.lms.sequence.previous_selected', {
+      expect(sendTrackEvent).toHaveBeenCalledTimes(3);
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(3, 'edx.ui.lms.sequence.previous_selected', {
         current_tab: 1,
         id: testData.unitId,
         tab_count: unitBlocks.length,
@@ -229,8 +229,8 @@ describe('Sequence', () => {
         .filter(button => button !== sequenceNextButton)[0];
       fireEvent.click(unitNextButton);
       expect(testData.nextSequenceHandler).toHaveBeenCalledTimes(2);
-      expect(sendTrackEvent).toHaveBeenCalledTimes(2);
-      expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'edx.ui.lms.sequence.next_selected', {
+      expect(sendTrackEvent).toHaveBeenCalledTimes(3);
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(3, 'edx.ui.lms.sequence.next_selected', {
         current_tab: unitBlocks.length,
         id: testData.unitId,
         tab_count: unitBlocks.length,
@@ -261,7 +261,7 @@ describe('Sequence', () => {
       // Therefore the next unit will still be `the initial one + 1`.
       expect(testData.unitNavigationHandler).toHaveBeenNthCalledWith(2, unitBlocks[unitNumber + 1].id);
 
-      expect(sendTrackEvent).toHaveBeenCalledTimes(2);
+      expect(sendTrackEvent).toHaveBeenCalledTimes(3);
     });
 
     it('handles the `Previous` buttons for the first unit in the first sequence', async () => {
@@ -280,7 +280,7 @@ describe('Sequence', () => {
 
       expect(testData.previousSequenceHandler).not.toHaveBeenCalled();
       expect(testData.unitNavigationHandler).not.toHaveBeenCalled();
-      expect(sendTrackEvent).not.toHaveBeenCalled();
+      expect(sendTrackEvent).toHaveBeenCalled();
     });
 
     it('handles the `Next` buttons for the last unit in the last sequence', async () => {
@@ -299,7 +299,7 @@ describe('Sequence', () => {
 
       expect(testData.nextSequenceHandler).not.toHaveBeenCalled();
       expect(testData.unitNavigationHandler).not.toHaveBeenCalled();
-      expect(sendTrackEvent).not.toHaveBeenCalled();
+      expect(sendTrackEvent).toHaveBeenCalled();
     });
 
     it('handles the navigation buttons for empty sequence', async () => {
@@ -345,25 +345,39 @@ describe('Sequence', () => {
       expect(testData.nextSequenceHandler).toHaveBeenCalledTimes(2);
       expect(testData.unitNavigationHandler).not.toHaveBeenCalled();
 
-      expect(sendTrackEvent).toHaveBeenNthCalledWith(1, 'edx.ui.lms.sequence.previous_selected', {
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(1, 'edx.ui.course.upgrade.old_sidebar.notifications', {
+        course_end: undefined,
+        course_modes: undefined,
+        course_start: undefined,
+        courserun_key: undefined,
+        enrollment_end: undefined,
+        enrollment_mode: undefined,
+        enrollment_start: undefined,
+        is_upgrade_notification_visible: false,
+        name: 'Old Sidebar Notification Tray',
+        org_key: undefined,
+        username: undefined,
+        verification_status: undefined,
+      });
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'edx.ui.lms.sequence.previous_selected', {
         current_tab: 1,
         id: testData.unitId,
         tab_count: 0,
         widget_placement: 'top',
       });
-      expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'edx.ui.lms.sequence.previous_selected', {
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(3, 'edx.ui.lms.sequence.previous_selected', {
         current_tab: 1,
         id: testData.unitId,
         tab_count: 0,
         widget_placement: 'bottom',
       });
-      expect(sendTrackEvent).toHaveBeenNthCalledWith(3, 'edx.ui.lms.sequence.next_selected', {
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(4, 'edx.ui.lms.sequence.next_selected', {
         current_tab: 1,
         id: testData.unitId,
         tab_count: 0,
         widget_placement: 'top',
       });
-      expect(sendTrackEvent).toHaveBeenNthCalledWith(4, 'edx.ui.lms.sequence.next_selected', {
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(5, 'edx.ui.lms.sequence.next_selected', {
         current_tab: 1,
         id: testData.unitId,
         tab_count: 0,
diff --git a/src/courseware/course/sidebar/sidebars/notifications/NotificationTray.jsx b/src/courseware/course/sidebar/sidebars/notifications/NotificationTray.jsx
@@ -1,6 +1,7 @@
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useModel } from '../../../../../generic/model-store';
 import UpgradeNotification from '../../../../../generic/upgrade-notification/UpgradeNotification';
 
@@ -22,20 +23,47 @@ const NotificationTray = ({ intl }) => {
   const {
     accessExpiration,
     contentTypeGatingEnabled,
+    end,
+    enrollmentEnd,
+    enrollmentMode,
+    enrollmentStart,
     marketingUrl,
     offer,
+    start,
     timeOffsetMillis,
     userTimezone,
+    verificationStatus,
   } = course;
 
   const {
+    courseModes,
     org,
     verifiedMode,
+    username,
   } = useModel('courseHomeMeta', courseId);
 
+  const activeCourseModes = useMemo(() => courseModes?.map(mode => mode.slug), [courseModes]);
+
+  const notificationTrayEventProperties = {
+    course_end: end,
+    course_modes: activeCourseModes,
+    course_start: start,
+    courserun_key: courseId,
+    enrollment_end: enrollmentEnd,
+    enrollment_mode: enrollmentMode,
+    enrollment_start: enrollmentStart,
+    is_upgrade_notification_visible: !!verifiedMode,
+    name: 'Old Sidebar Notification Tray',
+    org_key: org,
+    username,
+    verification_status: verificationStatus,
+  };
+
   // After three seconds, update notificationSeen (to hide red dot)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => { setTimeout(onNotificationSeen, 3000); }, []);
+  useEffect(() => {
+    setTimeout(onNotificationSeen, 3000);
+    sendTrackEvent('edx.ui.course.upgrade.old_sidebar.notifications', notificationTrayEventProperties);
+  }, []);
 
   return (
     <SidebarBase
