feat(AU-1894): send track event when requesting translation (#1360)

* feat(AU-1894): send track event when requesting translation

* feat: add source != target language condition

plugins/UnitTranslationPlugin/translation-selection/index.jsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { AppContext } from '@edx/frontend-platform/react';
 import { IconButton, Icon, ProductTour } from '@openedx/paragon';
 import { Language } from '@openedx/paragon/icons';
@@ -30,6 +31,20 @@ const TranslationSelection = ({
     language,
   });
 
+  useEffect(() => {
+    if ((courseId && language && selectedLanguage && unitId && userId) && (language !== selectedLanguage)) {
+      const eventName = 'edx.whole_course_translations.translation_requested';
+      const eventProperties = {
+        courseId,
+        sourceLanguage: language,
+        targetLanguage: selectedLanguage,
+        unitId,
+        userId,
+      };
+      sendTrackEvent(eventName, eventProperties);
+    }
+  }, [courseId, language, selectedLanguage, unitId, userId]);
+
   useEffect(() => {
     dispatch(
       registerOverrideMethod({

plugins/UnitTranslationPlugin/translation-selection/index.test.jsx

@@ -1,6 +1,8 @@
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import TranslationSelection from './index';
+import { initializeTestStore, render } from '../../../src/setupTest';
 
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
@@ -38,6 +40,7 @@ jest.mock('./useSelectLanguage', () => () => ({
   setSelectedLanguage: jest.fn().mockName('setSelectedLanguage'),
 }));
 jest.mock('../feedback-widget', () => 'FeedbackWidget');
+jest.mock('@edx/frontend-platform/analytics');
 
 describe('<TranslationSelection />', () => {
   const props = {
@@ -60,4 +63,22 @@ describe('<TranslationSelection />', () => {
     const wrapper = shallow(<TranslationSelection {...props} />);
     expect(wrapper.snapshot).toMatchSnapshot();
   });
+  it('does not send track event when source != target language', async () => {
+    await initializeTestStore();
+    render(<TranslationSelection {...props} />);
+    expect(sendTrackEvent).not.toHaveBeenCalled();
+  });
+  it('sends track event when source != target language', async () => {
+    await initializeTestStore();
+    render(<TranslationSelection {...props} />);
+    const eventName = 'edx.whole_course_translations.translation_requested';
+    const eventProperties = {
+      courseId: props.courseId,
+      sourceLanguage: props.language,
+      targetLanguage: 'en',
+      unitId: props.unitId,
+      userId: '123',
+    };
+    expect(sendTrackEvent).not.toHaveBeenCalledWith(eventName, eventProperties);
+  });
 });