MST IDV Experiment

Add event tracking for initial choice in photo mode, and additional events when a user toggles between modes on the photo capture pages

src/id-verification/CollapsibleImageHelp.jsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Collapsible } from '@edx/paragon';
 import { Link } from 'react-router-dom';
@@ -9,10 +10,16 @@ import messages from './IdVerification.messages';
 
 function CollapsibleImageHelp(props) {
   const {
-    shouldUseCamera, setShouldUseCamera, optimizelyExperimentName, mediaAccess,
+    userId, shouldUseCamera, setShouldUseCamera, optimizelyExperimentName, mediaAccess,
   } = useContext(IdVerificationContext);
 
   function handleClick() {
+    const toggleTo = shouldUseCamera ? 'upload' : 'camera';
+    const eventName = `edx.id_verification.toggle_to.${toggleTo}`;
+    sendTrackEvent(eventName, {
+      category: 'id_verification',
+      user_id: userId,
+    });
     setShouldUseCamera(!shouldUseCamera);
   }
 

src/id-verification/panels/ChooseModePanel.jsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Form } from '@edx/paragon';
 
@@ -10,10 +11,16 @@ import messages from '../IdVerification.messages';
 
 function ChooseModePanel(props) {
   const panelSlug = 'choose-mode';
-  const { shouldUseCamera, setShouldUseCamera } = useContext(IdVerificationContext);
+  const { userId, shouldUseCamera, setShouldUseCamera } = useContext(IdVerificationContext);
 
   function onPhotoModeChange(value) {
     setShouldUseCamera(value);
+    const mode = value ? 'camera' : 'upload';
+    const eventName = `edx.id_verification.choose.${mode}`;
+    sendTrackEvent(eventName, {
+      category: 'id_verification',
+      user_id: userId,
+    });
   }
 
   return (