From 7440cd367fa1b5bf95c7c1d5b479e392224a2e60 Mon Sep 17 00:00:00 2001 From: Alie Langston Date: Thu, 15 Apr 2021 10:50:22 -0400 Subject: [PATCH] Add additional post parameters to track photo modes --- src/id-verification/Camera.jsx | 2 ++ src/id-verification/IdVerificationContextProvider.jsx | 8 ++++++++ src/id-verification/ImageFileUpload.jsx | 8 ++++++-- src/id-verification/data/service.js | 2 ++ src/id-verification/panels/SummaryPanel.jsx | 4 ++++ src/id-verification/panels/TakeIdPhotoPanel.jsx | 6 +++--- src/id-verification/panels/TakePortraitPhotoPanel.jsx | 6 +++--- src/id-verification/tests/Camera.test.jsx | 2 ++ src/id-verification/tests/panels/SummaryPanel.test.jsx | 8 ++++++++ 9 files changed, 38 insertions(+), 8 deletions(-) diff --git a/src/id-verification/Camera.jsx b/src/id-verification/Camera.jsx index d3c558a..90d2ee9 100644 --- a/src/id-verification/Camera.jsx +++ b/src/id-verification/Camera.jsx @@ -262,6 +262,7 @@ class Camera extends React.Component { const dataUri = this.cameraPhoto.getDataUri(config); this.setState({ dataUri }); this.props.onImageCapture(dataUri); + this.props.setPhotoMode('camera'); } playShutterClick() { @@ -359,6 +360,7 @@ class Camera extends React.Component { Camera.propTypes = { intl: intlShape.isRequired, onImageCapture: PropTypes.func.isRequired, + setPhotoMode: PropTypes.func.isRequired, isPortrait: PropTypes.bool.isRequired, }; diff --git a/src/id-verification/IdVerificationContextProvider.jsx b/src/id-verification/IdVerificationContextProvider.jsx index a07a0f8..8500fb3 100644 --- a/src/id-verification/IdVerificationContextProvider.jsx +++ b/src/id-verification/IdVerificationContextProvider.jsx @@ -79,6 +79,10 @@ export default function IdVerificationContextProvider({ children }) { const [optimizelyExperimentName, setOptimizelyExperimentName] = useState(''); const [shouldUseCamera, setShouldUseCamera] = useState(false); + // The following are used to keep track of how a user has submitted photos + const [portraitPhotoMode, setPortraitPhotoMode] = useState(''); + const [idPhotoMode, setIdPhotoMode] = useState(''); + // If the user reaches the end of the flow and goes back to retake their photos, // this flag ensures that they are directed straight back to the summary panel const [reachedSummary, setReachedSummary] = useState(false); @@ -95,6 +99,8 @@ export default function IdVerificationContextProvider({ children }) { profileDataManager, optimizelyExperimentName, shouldUseCamera, + portraitPhotoMode, + idPhotoMode, reachedSummary, setExistingIdVerification, setFacePhotoFile, @@ -102,6 +108,8 @@ export default function IdVerificationContextProvider({ children }) { setIdPhotoName, setOptimizelyExperimentName, setShouldUseCamera, + setPortraitPhotoMode, + setIdPhotoMode, setReachedSummary, tryGetUserMedia: async () => { try { diff --git a/src/id-verification/ImageFileUpload.jsx b/src/id-verification/ImageFileUpload.jsx index 4419719..9411220 100644 --- a/src/id-verification/ImageFileUpload.jsx +++ b/src/id-verification/ImageFileUpload.jsx @@ -5,7 +5,7 @@ import { Alert } from '@edx/paragon'; import messages from './IdVerification.messages'; import SupportedMediaTypes from './SupportedMediaTypes'; -export default function ImageFileUpload({ onFileChange, intl }) { +export default function ImageFileUpload({ onFileChange, setPhotoMode, intl }) { const [error, setError] = useState(null); const errorTypes = { invalidFileType: 'invalidFileType', @@ -26,7 +26,10 @@ export default function ImageFileUpload({ onFileChange, intl }) { } else { setError(null); const fileReader = new FileReader(); - fileReader.addEventListener('load', () => onFileChange(fileReader.result)); + fileReader.addEventListener('load', () => { + onFileChange(fileReader.result); + setPhotoMode('upload'); + }); fileReader.readAsDataURL(fileObject); } }, []); @@ -56,5 +59,6 @@ export default function ImageFileUpload({ onFileChange, intl }) { ImageFileUpload.propTypes = { onFileChange: PropTypes.func.isRequired, + setPhotoMode: PropTypes.func.isRequired, intl: intlShape.isRequired, }; diff --git a/src/id-verification/data/service.js b/src/id-verification/data/service.js index 8997af2..263b47b 100644 --- a/src/id-verification/data/service.js +++ b/src/id-verification/data/service.js @@ -65,6 +65,8 @@ export async function submitIdVerification(verificationData) { idPhotoFile: 'photo_id_image', idPhotoName: 'full_name', optimizelyExperimentName: 'experiment_name', + portraitPhotoMode: 'portrait_photo_mode', + idPhotoMode: 'id_photo_mode', }; const postData = {}; // Don't include blank/null/undefined values. diff --git a/src/id-verification/panels/SummaryPanel.jsx b/src/id-verification/panels/SummaryPanel.jsx index efbc45a..a338c27 100644 --- a/src/id-verification/panels/SummaryPanel.jsx +++ b/src/id-verification/panels/SummaryPanel.jsx @@ -28,6 +28,8 @@ function SummaryPanel(props) { stopUserMedia, optimizelyExperimentName, setReachedSummary, + portraitPhotoMode, + idPhotoMode, } = useContext(IdVerificationContext); const nameToBeUsed = idPhotoName || nameOnAccount || ''; const [isSubmitting, setIsSubmitting] = useState(false); @@ -73,6 +75,8 @@ function SummaryPanel(props) { } if (optimizelyExperimentName) { verificationData.optimizelyExperimentName = optimizelyExperimentName; + verificationData.portraitPhotoMode = portraitPhotoMode; + verificationData.idPhotoMode = idPhotoMode; } const result = await submitIdVerification(verificationData); if (result.success) { diff --git a/src/id-verification/panels/TakeIdPhotoPanel.jsx b/src/id-verification/panels/TakeIdPhotoPanel.jsx index f9c989d..f0e11d1 100644 --- a/src/id-verification/panels/TakeIdPhotoPanel.jsx +++ b/src/id-verification/panels/TakeIdPhotoPanel.jsx @@ -18,7 +18,7 @@ function TakeIdPhotoPanel(props) { const panelSlug = 'take-id-photo'; const nextPanelSlug = useNextPanelSlug(panelSlug); const { - setIdPhotoFile, idPhotoFile, optimizelyExperimentName, shouldUseCamera, + setIdPhotoFile, idPhotoFile, optimizelyExperimentName, shouldUseCamera, setIdPhotoMode, } = useContext(IdVerificationContext); return ( @@ -34,7 +34,7 @@ function TakeIdPhotoPanel(props) {

{props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}

- + ) : (
@@ -42,7 +42,7 @@ function TakeIdPhotoPanel(props) { {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}

- +
)} diff --git a/src/id-verification/panels/TakePortraitPhotoPanel.jsx b/src/id-verification/panels/TakePortraitPhotoPanel.jsx index b9656a5..cbc48af 100644 --- a/src/id-verification/panels/TakePortraitPhotoPanel.jsx +++ b/src/id-verification/panels/TakePortraitPhotoPanel.jsx @@ -18,7 +18,7 @@ function TakePortraitPhotoPanel(props) { const panelSlug = 'take-portrait-photo'; const nextPanelSlug = useNextPanelSlug(panelSlug); const { - setFacePhotoFile, facePhotoFile, shouldUseCamera, optimizelyExperimentName, + setFacePhotoFile, facePhotoFile, shouldUseCamera, optimizelyExperimentName, setPortraitPhotoMode, } = useContext(IdVerificationContext); return ( @@ -34,7 +34,7 @@ function TakePortraitPhotoPanel(props) {

{props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}

- + ) : (
@@ -42,7 +42,7 @@ function TakePortraitPhotoPanel(props) { {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.upload'])}

- +
)} diff --git a/src/id-verification/tests/Camera.test.jsx b/src/id-verification/tests/Camera.test.jsx index abdc3fc..7fb9e3b 100644 --- a/src/id-verification/tests/Camera.test.jsx +++ b/src/id-verification/tests/Camera.test.jsx @@ -28,6 +28,7 @@ describe('SubmittedPanel', () => { const defaultProps = { intl: {}, onImageCapture: jest.fn(), + setPhotoMode: jest.fn(), isPortrait: true, }; @@ -57,6 +58,7 @@ describe('SubmittedPanel', () => { expect(button).toHaveTextContent('Take Photo'); fireEvent.click(button); expect(defaultProps.onImageCapture).toHaveBeenCalled(); + expect(defaultProps.setPhotoMode).toHaveBeenCalledWith('camera'); }); it('shows correct help text for portrait photo capture', async () => { diff --git a/src/id-verification/tests/panels/SummaryPanel.test.jsx b/src/id-verification/tests/panels/SummaryPanel.test.jsx index 7cfa84b..c2d9748 100644 --- a/src/id-verification/tests/panels/SummaryPanel.test.jsx +++ b/src/id-verification/tests/panels/SummaryPanel.test.jsx @@ -33,6 +33,8 @@ describe('SummaryPanel', () => { nameOnAccount: 'test name', idPhotoName: 'test name', optimizelyExperimentName: 'test-experiment', + portraitPhotoMode: 'camera', + idPhotoMode: 'upload', stopUserMedia: jest.fn(), setReachedSummary: jest.fn(), }; @@ -92,6 +94,8 @@ describe('SummaryPanel', () => { idPhotoFile: contextValue.idPhotoFile, idPhotoName: contextValue.idPhotoName, optimizelyExperimentName: contextValue.optimizelyExperimentName, + portraitPhotoMode: contextValue.portraitPhotoMode, + idPhotoMode: contextValue.idPhotoMode, courseRunKey: null, }; await getPanel(); @@ -106,6 +110,8 @@ describe('SummaryPanel', () => { const verificationData = { facePhotoFile: contextValue.facePhotoFile, idPhotoFile: contextValue.idPhotoFile, + portraitPhotoMode: contextValue.portraitPhotoMode, + idPhotoMode: contextValue.idPhotoMode, optimizelyExperimentName: contextValue.optimizelyExperimentName, courseRunKey: null, }; @@ -120,6 +126,8 @@ describe('SummaryPanel', () => { const verificationData = { facePhotoFile: contextValue.facePhotoFile, idPhotoFile: contextValue.idPhotoFile, + portraitPhotoMode: contextValue.portraitPhotoMode, + idPhotoMode: contextValue.idPhotoMode, optimizelyExperimentName: contextValue.optimizelyExperimentName, courseRunKey: null, };