diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.js new file mode 100644 index 000000000..3b104e33b --- /dev/null +++ b/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; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx new file mode 100644 index 000000000..f1d6db98c --- /dev/null +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx @@ -0,0 +1,26 @@ +import { useSelector } from 'react-redux'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; +import { selectors } from '../../../../../../data/redux'; +import analyticsEvents from './constants'; + +export const useTrackSocialSharingChange = ({ 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, + }, + }); + }; +}; + +export default useTrackSocialSharingChange; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx new file mode 100644 index 000000000..987b73f83 --- /dev/null +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx @@ -0,0 +1,43 @@ +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('useTrackSocialSharingChange when', () => { + let onClick; + let updateField; + describe.each([true, false])('box is toggled', (checked) => { + beforeAll(() => { + jest.resetAllMocks(); + updateField = jest.fn(); + onClick = hooks.useTrackSocialSharingChange({ 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 }, + ); + }); + }); + }); +}); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx index e29943025..71eecac6a 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx +++ b/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.useTrackSocialSharingChange({ 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} >
{intl.formatMessage(messages.socialSharingCheckboxLabel)} diff --git a/src/editors/data/redux/thunkActions/requests.js b/src/editors/data/redux/thunkActions/requests.js index ed9c40ad3..b0cb34eb2 100644 --- a/src/editors/data/redux/thunkActions/requests.js +++ b/src/editors/data/redux/thunkActions/requests.js @@ -290,7 +290,6 @@ export const fetchVideoFeatures = ({ ...rest }) => (dispatch, getState) => { requestKey: RequestKeys.fetchVideoFeatures, promise: api.fetchVideoFeatures({ studioEndpointUrl: selectors.app.studioEndpointUrl(getState()), - learningContextId: selectors.app.learningContextId(getState()), }), ...rest, })); diff --git a/src/editors/data/redux/thunkActions/requests.test.js b/src/editors/data/redux/thunkActions/requests.test.js index a13c5dbdd..7525498aa 100644 --- a/src/editors/data/redux/thunkActions/requests.test.js +++ b/src/editors/data/redux/thunkActions/requests.test.js @@ -487,7 +487,6 @@ describe('requests thunkActions module', () => { requestKey: RequestKeys.fetchVideoFeatures, promise: api.fetchVideoFeatures({ studioEndpointUrl: selectors.app.studioEndpointUrl(testState), - learningContextId: selectors.app.learningContextId(testState), }), }, }); diff --git a/src/editors/data/services/cms/api.js b/src/editors/data/services/cms/api.js index b40e32bca..ec0c98a2f 100644 --- a/src/editors/data/services/cms/api.js +++ b/src/editors/data/services/cms/api.js @@ -204,9 +204,8 @@ export const apiMethods = { ), fetchVideoFeatures: ({ studioEndpointUrl, - learningContextId, }) => get( - urls.videoFeatures({ studioEndpointUrl, learningContextId }), + urls.videoFeatures({ studioEndpointUrl }), ), uploadVideo: ({ data, diff --git a/src/editors/data/services/cms/api.test.js b/src/editors/data/services/cms/api.test.js index 63e75d0e7..925f8dc05 100644 --- a/src/editors/data/services/cms/api.test.js +++ b/src/editors/data/services/cms/api.test.js @@ -575,7 +575,7 @@ describe('cms api', () => { }); describe('fetchVideoFeatures', () => { it('should call get with url.videoFeatures', () => { - const args = { studioEndpointUrl, learningContextId }; + const args = { studioEndpointUrl }; apiMethods.fetchVideoFeatures({ ...args }); expect(get).toHaveBeenCalledWith(urls.videoFeatures({ ...args })); }); diff --git a/src/editors/data/services/cms/mockApi.js b/src/editors/data/services/cms/mockApi.js index bea7fc463..06a8a9b54 100644 --- a/src/editors/data/services/cms/mockApi.js +++ b/src/editors/data/services/cms/mockApi.js @@ -152,7 +152,7 @@ export const fetchAdvanceSettings = ({ studioEndpointUrl, learningContextId }) = data: { allow_unsupported_xblocks: { value: true } }, }); // eslint-disable-next-line -export const fetchVideoFeatures = ({ studioEndpointUrl, learningContextId }) => mockPromise({ +export const fetchVideoFeatures = ({ studioEndpointUrl }) => mockPromise({ data: { allowThumbnailUpload: true, videoSharingEnabledForCourse: true, diff --git a/src/editors/data/services/cms/urls.js b/src/editors/data/services/cms/urls.js index 337129f7e..f73b255af 100644 --- a/src/editors/data/services/cms/urls.js +++ b/src/editors/data/services/cms/urls.js @@ -69,8 +69,8 @@ export const courseAdvanceSettings = ({ studioEndpointUrl, learningContextId }) `${studioEndpointUrl}/api/contentstore/v0/advanced_settings/${learningContextId}` ); -export const videoFeatures = ({ studioEndpointUrl, learningContextId }) => ( - `${studioEndpointUrl}/video_features/${learningContextId}` +export const videoFeatures = ({ studioEndpointUrl }) => ( + `${studioEndpointUrl}/video_features/` ); export const courseVideos = ({ studioEndpointUrl, learningContextId }) => ( diff --git a/src/editors/data/services/cms/urls.test.js b/src/editors/data/services/cms/urls.test.js index 27ebcd963..2cee79f62 100644 --- a/src/editors/data/services/cms/urls.test.js +++ b/src/editors/data/services/cms/urls.test.js @@ -141,8 +141,8 @@ describe('cms url methods', () => { }); describe('videoFeatures', () => { it('returns url with studioEndpointUrl and learningContextId', () => { - expect(videoFeatures({ studioEndpointUrl, learningContextId })) - .toEqual(`${studioEndpointUrl}/video_features/${learningContextId}`); + expect(videoFeatures({ studioEndpointUrl })) + .toEqual(`${studioEndpointUrl}/video_features/`); }); }); describe('courseVideos', () => {