Added tracking log events to IDV

src/id-verification/IdVerificationContext.jsx

@@ -34,6 +34,7 @@ function IdVerificationContextProvider({ children }) {
     idPhotoName,
     mediaStream,
     mediaAccess,
+    userId: authenticatedUser.userId,
     nameOnAccount: authenticatedUser.name,
     setExistingIdVerification,
     setFacePhotoFile,

src/id-verification/panels/GetNameIdPanel.jsx

@@ -1,6 +1,7 @@
 import React, { useContext, useState, useEffect, useRef } from 'react';
 import { Input, Button } from '@edx/paragon';
 import { Link } from 'react-router-dom';
+import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { useNextPanelSlug } from '../routing-utilities';
@@ -15,19 +16,30 @@ function GetNameIdPanel(props) {
   const [isEditing, setIsEditing] = useState(false);
   const nameInputRef = useRef();
   const nextPanelSlug = useNextPanelSlug(panelSlug);
+
   useEffect(() => {
     if (isEditing && nameInputRef.current) {
       nameInputRef.current.focus();
     }
   }, [isEditing]);
+
   const {
-    nameOnAccount, idPhotoName, setIdPhotoName, idPhotoFile,
+    nameOnAccount, userId, idPhotoName, setIdPhotoName, idPhotoFile,
   } = useContext(IdVerificationContext);
   const nameOnAccountValue = nameOnAccount || '';
+
+  const handleClick = () => {
+    setIsEditing(true);
+    sendTrackingLogEvent('edx.id_verification.name_change', {
+      category: 'id_verification',
+      user_id: userId,
+    });
+  };
+
   return (
     <BasePanel
       name={panelSlug}
-      title="Account Name Check"
+      title={props.intl.formatMessage(messages['id.verification.account.name.title'])}
     >
       <p>
         {props.intl.formatMessage(messages['id.verification.account.name.instructions'])}
@@ -62,7 +74,7 @@ function GetNameIdPanel(props) {
           {!isEditing && (
             <Button
               className="btn-link px-0 ml-3"
-              onClick={() => setIsEditing(true)}
+              onClick={handleClick}
             >
               {props.intl.formatMessage(messages['id.verification.account.name.edit'])}
             </Button>

src/id-verification/panels/RequestCameraAccessPanel.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
+import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { useNextPanelSlug } from '../routing-utilities';
@@ -14,7 +15,22 @@ function RequestCameraAccessPanel(props) {
   const [returnText, setReturnText] = useState('id.verification.return.dashboard');
   const panelSlug = 'request-camera-access';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
-  const { tryGetUserMedia, mediaAccess } = useContext(IdVerificationContext);
+  const { tryGetUserMedia, mediaAccess, userId } = useContext(IdVerificationContext);
+
+  useEffect(() => {
+    if (mediaAccess === MEDIA_ACCESS.UNSUPPORTED) {
+      sendTrackingLogEvent('edx.id_verification.camera.unsupported', {
+        category: 'id_verification',
+        user_id: userId,
+      });
+    }
+    if (mediaAccess === MEDIA_ACCESS.DENIED) {
+      sendTrackingLogEvent('edx.id_verification.camera.denied', {
+        category: 'id_verification',
+        user_id: userId,
+      });
+    }
+  }, [mediaAccess, userId]);
 
   // If the user accessed IDV through a course,
   // link back to that course rather than the dashboard

src/id-verification/panels/ReviewRequirementsPanel.jsx

@@ -1,19 +1,30 @@
-import React from 'react';
+import React, { useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
 
+import { IdVerificationContext } from '../IdVerificationContext';
 import messages from '../IdVerification.messages';
 
 function ReviewRequirementsPanel(props) {
+  const { userId } = useContext(IdVerificationContext);
   const panelSlug = 'review-requirements';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
+
+  useEffect(() => {
+    sendTrackingLogEvent('edx.id_verification.started', {
+      category: 'id_verification',
+      user_id: userId,
+    });
+  }, [userId]);
+
   return (
     <BasePanel
       name={panelSlug}
-      title="Photo Verification Requirements"
+      title={props.intl.formatMessage(messages['id.verification.requirements.title'])}
       focusOnMount={false}
     >
       <p>

src/id-verification/panels/SubmittedPanel.jsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { getConfig } from '@edx/frontend-platform';
+import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import BasePanel from './BasePanel';
 
+import { IdVerificationContext } from '../IdVerificationContext';
 import messages from '../IdVerification.messages';
 
 function Survey() {
@@ -17,6 +19,7 @@ function Survey() {
 }
 
 function SubmittedPanel(props) {
+  const { userId } = useContext(IdVerificationContext);
   const [returnUrl, setReturnUrl] = useState('dashboard');
   const [returnText, setReturnText] = useState('id.verification.return.dashboard');
   const panelSlug = 'submitted';
@@ -28,7 +31,11 @@ function SubmittedPanel(props) {
       setReturnUrl(`courses/${sessionStorage.getItem('courseRunKey')}`);
       setReturnText('id.verification.return.course');
     }
-  }, []);
+    sendTrackingLogEvent('edx.id_verification.submitted', {
+      category: 'id_verification',
+      user_id: userId,
+    });
+  }, [userId]);
 
   return (
     <BasePanel