From 5d8d327a48319dee604acfeabe107bc075ad1de7 Mon Sep 17 00:00:00 2001 From: Bianca Severino Date: Fri, 17 Jul 2020 10:06:26 -0400 Subject: [PATCH] Added tracking log events to IDV --- src/id-verification/IdVerificationContext.jsx | 1 + src/id-verification/panels/GetNameIdPanel.jsx | 18 +++++++++++++++--- .../panels/RequestCameraAccessPanel.jsx | 18 +++++++++++++++++- .../panels/ReviewRequirementsPanel.jsx | 15 +++++++++++++-- src/id-verification/panels/SubmittedPanel.jsx | 11 +++++++++-- 5 files changed, 55 insertions(+), 8 deletions(-) diff --git a/src/id-verification/IdVerificationContext.jsx b/src/id-verification/IdVerificationContext.jsx index e75dc56..e1b5769 100644 --- a/src/id-verification/IdVerificationContext.jsx +++ b/src/id-verification/IdVerificationContext.jsx @@ -34,6 +34,7 @@ function IdVerificationContextProvider({ children }) { idPhotoName, mediaStream, mediaAccess, + userId: authenticatedUser.userId, nameOnAccount: authenticatedUser.name, setExistingIdVerification, setFacePhotoFile, diff --git a/src/id-verification/panels/GetNameIdPanel.jsx b/src/id-verification/panels/GetNameIdPanel.jsx index f5fc936..f42d8a7 100644 --- a/src/id-verification/panels/GetNameIdPanel.jsx +++ b/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 (

{props.intl.formatMessage(messages['id.verification.account.name.instructions'])} @@ -62,7 +74,7 @@ function GetNameIdPanel(props) { {!isEditing && ( diff --git a/src/id-verification/panels/RequestCameraAccessPanel.jsx b/src/id-verification/panels/RequestCameraAccessPanel.jsx index 77a59c7..66aa29d 100644 --- a/src/id-verification/panels/RequestCameraAccessPanel.jsx +++ b/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 diff --git a/src/id-verification/panels/ReviewRequirementsPanel.jsx b/src/id-verification/panels/ReviewRequirementsPanel.jsx index f61b4df..6e86c55 100644 --- a/src/id-verification/panels/ReviewRequirementsPanel.jsx +++ b/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 (

diff --git a/src/id-verification/panels/SubmittedPanel.jsx b/src/id-verification/panels/SubmittedPanel.jsx index c110f57..8970159 100644 --- a/src/id-verification/panels/SubmittedPanel.jsx +++ b/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 (