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'])}
-{props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
-