AA-711: implement upsell click events (#392)

src/courseware/course/sequence/lock-paywall/LockPaywall.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
@@ -14,6 +15,7 @@ function LockPaywall({
 }) {
   const course = useModel('coursewareMeta', courseId);
   const {
+    org,
     verifiedMode,
   } = course;
 
@@ -25,6 +27,21 @@ function LockPaywall({
     price,
     upgradeUrl,
   } = verifiedMode;
+
+  const eventProperties = {
+    org_key: org,
+    courserun_key: courseId,
+  };
+
+  const logClick = () => {
+    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
+      ...eventProperties,
+      linkCategory: '(none)',
+      linkName: 'in_course_upgrade',
+      linkType: 'link',
+      pageName: 'in_course',
+    });
+  };
   return (
     <div className="border border-gray rounded d-flex justify-content-between mt-2 p-3">
       <div>
@@ -35,7 +52,7 @@ function LockPaywall({
         <p className="mb-0">
           <span>{intl.formatMessage(messages['learn.lockPaywall.content'])}</span>
           &nbsp;
-          <a className="lock_paywall_upgrade_link" href={upgradeUrl}>
+          <a className="lock_paywall_upgrade_link" href={upgradeUrl} onClick={logClick}>
             {intl.formatMessage(messages['learn.lockPaywall.upgrade.link'], {
               currencySymbol,
               price,

src/courseware/course/sequence/lock-paywall/LockPaywall.test.jsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import { Factory } from 'rosie';
-import { initializeTestStore, render, screen } from '../../../../setupTest';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import {
+  fireEvent, initializeTestStore, render, screen,
+} from '../../../../setupTest';
 import LockPaywall from './LockPaywall';
 
+jest.mock('@edx/frontend-platform/analytics');
+
 describe('Lock Paywall', () => {
   let store;
   const mockData = {};
@@ -33,6 +39,29 @@ describe('Lock Paywall', () => {
     expect(upgradeLink).toHaveAttribute('href', `${upgradeUrl}`);
   });
 
+  it('sends analytics event onClick of unlock link', () => {
+    sendTrackEvent.mockClear();
+
+    const {
+      currencySymbol,
+      price,
+    } = store.getState().models.coursewareMeta[mockData.courseId].verifiedMode;
+    render(<LockPaywall {...mockData} />);
+
+    const upgradeLink = screen.getByRole('link', { name: `Upgrade to unlock (${currencySymbol}${price})` });
+    fireEvent.click(upgradeLink);
+
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+      org_key: 'edX',
+      courserun_key: mockData.courseId,
+      linkCategory: '(none)',
+      linkName: 'in_course_upgrade',
+      linkType: 'link',
+      pageName: 'in_course',
+    });
+  });
+
   it('does not display anything if course does not have verified mode', async () => {
     const courseMetadata = Factory.build('courseMetadata', { verified_mode: null });
     const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);