From 4bbff91ad7e7b5a492a3eb4aa2c4b1beedbd42a3 Mon Sep 17 00:00:00 2001
From: Alie Langston <alangsto@wellesley.edu>
Date: Mon, 12 Apr 2021 17:23:54 -0400
Subject: [PATCH] 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   | 9 ++++++++-
 src/id-verification/panels/ChooseModePanel.jsx | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/id-verification/CollapsibleImageHelp.jsx b/src/id-verification/CollapsibleImageHelp.jsx
index cdb4883..06f2356 100644
--- a/src/id-verification/CollapsibleImageHelp.jsx
+++ b/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);
   }
 
diff --git a/src/id-verification/panels/ChooseModePanel.jsx b/src/id-verification/panels/ChooseModePanel.jsx
index d9bfb7f..e03f9a6 100644
--- a/src/id-verification/panels/ChooseModePanel.jsx
+++ b/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 (