feat: send event on checkbox change

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.js

@@ -0,0 +1,5 @@
+export const analyticsEvents = {
+    socialSharingSettingChanged: 'edx.social.video_sharing_setting.changed'
+}
+
+export default analyticsEvents

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx

@@ -0,0 +1,24 @@
+import { useSelector } from 'react-redux';
+import analyticsEvents from './constants';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { selectors } from '../../../../../../data/redux';
+
+export const handleSocialSharingCheckboxChange = ({ updateField }) => {
+  const analytics = useSelector(selectors.app.analytics);
+  const allowVideoSharing = useSelector(selectors.video.allowVideoSharing);
+  return (event) => {
+    sendTrackEvent(
+      analyticsEvents.socialSharingSettingChanged,
+      {
+        ...analytics,
+        value: event.target.checked,
+      }
+    );
+    updateField({
+      allowVideoSharing: {
+        ...allowVideoSharing,
+        value: event.target.checked,
+      },
+    });
+  };
+};

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx

@@ -0,0 +1,44 @@
+import { actions } from '../../../../../../data/redux/app';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import analyticsEvents from './constants';
+import * as hooks from './hooks';
+
+jest.mock('../../../../../../data/redux', () => ({
+  selectors: {
+    app: {
+      analytics: jest.fn((state) => ({ analytics: state })),
+    },
+    video: {
+      allowVideoSharing: jest.fn((state) => ({ allowVideoSharing: state })),
+    },
+  },
+}));
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+
+describe('SocialShareWidget hooks', () => {
+  describe('handleSocialSharingCheckboxChange when', () => {
+    var onClick, updateField;
+    describe.each([true, false])('box is toggled', (checked) => {
+      beforeAll(() => {
+        jest.resetAllMocks()
+        updateField = jest.fn()
+        onClick = hooks.handleSocialSharingCheckboxChange({ updateField });
+        expect(typeof onClick).toBe('function');
+        onClick({ target: { checked } });
+      });
+      it("field is updated", () => {
+        expect(updateField).toBeCalledWith({"allowVideoSharing": {"value": checked}});
+      });
+      it("event tracking is called", () => {
+        expect(sendTrackEvent).toBeCalledWith(
+          analyticsEvents.socialSharingSettingChanged,
+          {"value": checked}
+        );
+      });
+    });
+  });
+});

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx

@@ -14,6 +14,7 @@ import {
 import { selectors, actions } from '../../../../../../data/redux';
 import CollapsibleFormWidget from '../CollapsibleFormWidget';
 import messages from './messages';
+import * as hooks from './hooks'
 
 /**
  * Collapsible Form widget controlling video thumbnail
@@ -32,6 +33,8 @@ export const SocialShareWidget = ({
   const isSetByCourse = allowVideoSharing.level === 'course';
   const videoSharingEnabled = isLibrary ? videoSharingEnabledForAll : videoSharingEnabledForCourse;
   const learnMoreLink = videoSharingLearnMoreLink || 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/social_sharing.html';
+  const onSocialSharingCheckboxChange = hooks.handleSocialSharingCheckboxChange({ updateField });
+
   const getSubtitle = () => {
     if (allowVideoSharing.value) {
       return intl.formatMessage(messages.enabledSubtitle);
@@ -52,12 +55,7 @@ export const SocialShareWidget = ({
         className="mt-3"
         checked={allowVideoSharing.value}
         disabled={isSetByCourse}
-        onChange={(e) => updateField({
-          allowVideoSharing: {
-            ...allowVideoSharing,
-            value: e.target.checked,
-          },
-        })}
+        onChange={onSocialSharingCheckboxChange}
       >
         <div className="small text-gray-700">
           {intl.formatMessage(messages.socialSharingCheckboxLabel)}