feat: tracking upgrade and discovery (#66)

src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx

@@ -5,6 +5,7 @@ import { Locked } from '@edx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { hooks } from 'data/redux';
+import useTrackUpgradeData from './hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
 
@@ -14,11 +15,14 @@ export const UpgradeButton = ({ cardId }) => {
   const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   const isEnabled = (!isMasquerading && canUpgrade);
+  const { trackUpgradeClick } = useTrackUpgradeData();
+
   return (
     <ActionButton
       iconBefore={Locked}
       variant="outline-primary"
       disabled={!isEnabled}
+      onClick={trackUpgradeClick}
       {...isEnabled && { as: 'a', href: upgradeUrl }}
     >
       {formatMessage(messages.upgrade)}

src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx

@@ -12,6 +12,9 @@ jest.mock('data/redux', () => ({
   },
 }));
 jest.mock('./ActionButton', () => 'ActionButton');
+jest.mock('./hooks', () => () => ({
+  trackUpgradeClick: jest.fn().mockName('trackUpgradeClick'),
+}));
 
 describe('UpgradeButton', () => {
   const props = {

src/containers/CourseCard/components/CourseCardActions/__snapshots__/UpgradeButton.test.jsx.snap

@@ -6,6 +6,7 @@ exports[`UpgradeButton snapshot can upgrade 1`] = `
   disabled={false}
   href="upgradeUrl"
   iconBefore={[MockFunction icons.Locked]}
+  onClick={[MockFunction trackUpgradeClick]}
   variant="outline-primary"
 >
   Upgrade
@@ -16,6 +17,7 @@ exports[`UpgradeButton snapshot cannot upgrade 1`] = `
 <ActionButton
   disabled={true}
   iconBefore={[MockFunction icons.Locked]}
+  onClick={[MockFunction trackUpgradeClick]}
   variant="outline-primary"
 >
   Upgrade
@@ -26,6 +28,7 @@ exports[`UpgradeButton snapshot masquerading 1`] = `
 <ActionButton
   disabled={true}
   iconBefore={[MockFunction icons.Locked]}
+  onClick={[MockFunction trackUpgradeClick]}
   variant="outline-primary"
 >
   Upgrade

src/containers/CourseCard/components/CourseCardActions/hooks.js

@@ -0,0 +1,18 @@
+import { handleEvent } from 'data/services/segment/utils';
+import { eventNames } from 'data/services/segment/constants';
+
+export const useTrackUpgradeData = () => {
+  const trackUpgradeClick = () => {
+    handleEvent(eventNames.upgradeCourse, {
+      pageName: 'learner_home',
+      linkType: 'button',
+      linkCategory: 'green_upgrade',
+    });
+  };
+
+  return {
+    trackUpgradeClick,
+  };
+};
+
+export default useTrackUpgradeData;

src/containers/CourseCard/components/CourseCardActions/hooks.test.js

@@ -0,0 +1,21 @@
+import { handleEvent } from 'data/services/segment/utils';
+import { eventNames } from 'data/services/segment/constants';
+import * as hooks from './hooks';
+
+jest.mock('data/services/segment/utils', () => ({
+  handleEvent: jest.fn(),
+}));
+
+describe('CourseCardActions hooks', () => {
+  describe('useTrackUpgradeData', () => {
+    it('calls handleEvent with correct params', () => {
+      const out = hooks.useTrackUpgradeData();
+      out.trackUpgradeClick();
+      expect(handleEvent).toHaveBeenCalledWith(eventNames.upgradeCourse, {
+        pageName: 'learner_home',
+        linkType: 'button',
+        linkCategory: 'green_upgrade',
+      });
+    });
+  });
+});