diff --git a/src/id-verification/Camera.jsx b/src/id-verification/Camera.jsx index 90d2ee9..d3c558a 100644 --- a/src/id-verification/Camera.jsx +++ b/src/id-verification/Camera.jsx @@ -262,7 +262,6 @@ class Camera extends React.Component { const dataUri = this.cameraPhoto.getDataUri(config); this.setState({ dataUri }); this.props.onImageCapture(dataUri); - this.props.setPhotoMode('camera'); } playShutterClick() { @@ -360,7 +359,6 @@ 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/CameraHelp.jsx b/src/id-verification/CameraHelp.jsx index 61a5382..0250494 100644 --- a/src/id-verification/CameraHelp.jsx +++ b/src/id-verification/CameraHelp.jsx @@ -1,30 +1,14 @@ -import React, { useContext } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { Collapsible } from '@edx/paragon'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; import messages from './IdVerification.messages'; -import IdVerificationContext from './IdVerificationContext'; function CameraHelp(props) { - const { optimizelyExperimentName } = useContext(IdVerificationContext); - return (
- { optimizelyExperimentName - && ( - -

- {props.intl.formatMessage(messages['id.verification.camera.help.upload.answer'])} -

- - )} +

+ {useCameraForId + ? props.intl.formatMessage(messages['id.verification.photo.upload.help.text']) + : props.intl.formatMessage(messages['id.verification.photo.camera.help.text'])} +

+ - )} - - ); - } - - return null; + {useCameraForId + ? props.intl.formatMessage(messages['id.verification.photo.upload.help.button']) + : props.intl.formatMessage(messages['id.verification.photo.camera.help.button'])} + + + ); } CollapsibleImageHelp.propTypes = { intl: intlShape.isRequired, - isPortrait: PropTypes.bool.isRequired, }; export default injectIntl(CollapsibleImageHelp); diff --git a/src/id-verification/IdVerification.messages.js b/src/id-verification/IdVerification.messages.js index da7f234..513ce42 100644 --- a/src/id-verification/IdVerification.messages.js +++ b/src/id-verification/IdVerification.messages.js @@ -11,11 +11,6 @@ const messages = defineMessages({ defaultMessage: 'support', description: 'Website support.', }, - 'id.verification.continue.upload': { - id: 'id.verification.continue.upload', - defaultMessage: 'Continue with Upload', - description: 'Button to continue with upload.', - }, 'id.verification.example.card.alt': { id: 'id.verification.example.card.alt', defaultMessage: 'Example of a valid identification card with a full name and photo.', @@ -401,26 +396,11 @@ const messages = defineMessages({ defaultMessage: 'Take a Photo of Yourself', description: 'Title for the Portrait Photo page if camera access is enabled.', }, - 'id.verification.portrait.photo.title.upload': { - id: 'id.verification.portrait.photo.title.upload', - defaultMessage: 'Upload a Photo of Yourself', - description: 'Title for the Portrait Photo page if camera access is disabled.', - }, - 'id.verification.portrait.photo.preview.alt': { - id: 'id.verification.portrait.photo.preview.alt', - defaultMessage: 'Preview of photo of user\'s face.', - description: 'Alt text for the portrait photo preview.', - }, 'id.verification.portrait.photo.instructions.camera': { id: 'id.verification.portrait.photo.instructions.camera', defaultMessage: 'When your face is in position, use the Take Photo button below to take your photo.', description: 'Instructions to use the camera to take a portrait photo..', }, - 'id.verification.portrait.photo.instructions.upload': { - id: 'id.verification.portrait.photo.instructions.upload', - defaultMessage: 'Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. Supported formats: ', - description: 'Instructions for portrait photo upload.', - }, 'id.verification.camera.help.sight.question': { id: 'id.verification.camera.help.sight.question', defaultMessage: 'What if I can\'t see the camera image or if I can\'t see my photo to determine which side is visible?', @@ -451,16 +431,6 @@ const messages = defineMessages({ defaultMessage: 'If you require assistance with taking a photo for submission, contact {siteName} support for additional suggestions.', description: 'Confirming what to do if the user has difficult holding their head relative to the camera.', }, - 'id.verification.camera.help.upload.question': { - id: 'id.verification.camera.help.upload.question', - defaultMessage: 'What if I want to upload a photo instead?', - description: 'Question on what to do if the user would like to upload a photo instead.', - }, - 'id.verification.camera.help.upload.answer': { - id: 'id.verification.camera.help.upload.answer', - defaultMessage: 'On the next page you will have the option to switch to upload mode. By selecting that option, you will be able to upload a photo instead.', - description: 'Confirming what to do if the user would like to upload a photo.', - }, 'id.verification.id.photo.unclear.question': { id: 'id.verification.id.photo.unclear.question', defaultMessage: 'Is your ID card image not clear or too blurry?', @@ -686,26 +656,6 @@ const messages = defineMessages({ defaultMessage: 'Switch to Camera Mode', description: 'Button used to switch to camera mode.', }, - 'id.verification.choose.mode.title': { - id: 'id.verification.choose.mode.title', - defaultMessage: 'Photo Requirements Options', - description: 'Title for section that allows user to choose photo mode.', - }, - 'id.verification.choose.mode.help.text': { - id: 'id.verification.choose.mode.hep.text', - defaultMessage: 'To complete verification, please select one of the following options to submit photos. You will be able to switch between these options throughout the process if needed.', - description: 'Help text for section that allows user to choose photo mode.', - }, - 'id.verification.choose.mode.radio.upload': { - id: 'id.verification.choose.mode.radio.upload', - defaultMessage: 'Upload photos from my device', - description: 'Radio button to choose to upload photos.', - }, - 'id.verification.choose.mode.radio.camera': { - id: 'id.verification.choose.mode.radio.camera', - defaultMessage: 'Take pictures using my camera', - description: 'Radio button to choose to use camera for photos.', - }, }); export default messages; diff --git a/src/id-verification/IdVerificationContextProvider.jsx b/src/id-verification/IdVerificationContextProvider.jsx index 62584f0..3a2f92a 100644 --- a/src/id-verification/IdVerificationContextProvider.jsx +++ b/src/id-verification/IdVerificationContextProvider.jsx @@ -45,12 +45,8 @@ export default function IdVerificationContextProvider({ children }) { } }, [authenticatedUser]); - 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(''); + // Default to upload for the ID image + const [useCameraForId, setUseCameraForId] = useState(false); // 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 @@ -86,31 +82,23 @@ export default function IdVerificationContextProvider({ children }) { // when determining the context value nameOnAccount. nameOnAccount: verifiedName || authenticatedUser.name, profileDataManager, - optimizelyExperimentName, - shouldUseCamera, - portraitPhotoMode, - idPhotoMode, + useCameraForId, reachedSummary, setFacePhotoFile, setIdPhotoFile, setIdPhotoName, - setOptimizelyExperimentName, - setShouldUseCamera, - setPortraitPhotoMode, - setIdPhotoMode, + setUseCameraForId, setReachedSummary, tryGetUserMedia: async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); setMediaAccess(MEDIA_ACCESS.GRANTED); setMediaStream(stream); - setShouldUseCamera(true); // stop the stream, as we are not using it yet const tracks = stream.getTracks(); tracks.forEach(track => track.stop()); } catch (err) { setMediaAccess(MEDIA_ACCESS.DENIED); - setShouldUseCamera(false); } }, stopUserMedia: () => { diff --git a/src/id-verification/IdVerificationPage.jsx b/src/id-verification/IdVerificationPage.jsx index a8a7944..53dfc42 100644 --- a/src/id-verification/IdVerificationPage.jsx +++ b/src/id-verification/IdVerificationPage.jsx @@ -14,7 +14,6 @@ import './getUserMediaShim'; import IdVerificationContextProvider from './IdVerificationContextProvider'; import { VerifiedNameContextProvider } from './VerifiedNameContext'; import ReviewRequirementsPanel from './panels/ReviewRequirementsPanel'; -import ChooseModePanel from './panels/ChooseModePanel'; import RequestCameraAccessPanel from './panels/RequestCameraAccessPanel'; import PortraitPhotoContextPanel from './panels/PortraitPhotoContextPanel'; import TakePortraitPhotoPanel from './panels/TakePortraitPhotoPanel'; @@ -57,7 +56,6 @@ function IdVerificationPage(props) { - diff --git a/src/id-verification/ImageFileUpload.jsx b/src/id-verification/ImageFileUpload.jsx index 9411220..64a752a 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, setPhotoMode, intl }) { +export default function ImageFileUpload({ onFileChange, intl }) { const [error, setError] = useState(null); const errorTypes = { invalidFileType: 'invalidFileType', @@ -28,7 +28,6 @@ export default function ImageFileUpload({ onFileChange, setPhotoMode, intl }) { const fileReader = new FileReader(); fileReader.addEventListener('load', () => { onFileChange(fileReader.result); - setPhotoMode('upload'); }); fileReader.readAsDataURL(fileObject); } @@ -59,6 +58,5 @@ export default function ImageFileUpload({ onFileChange, setPhotoMode, 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 4671853..30407dd 100644 --- a/src/id-verification/data/service.js +++ b/src/id-verification/data/service.js @@ -64,9 +64,6 @@ export async function submitIdVerification(verificationData) { facePhotoFile: 'face_image', 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/ChooseModePanel.jsx b/src/id-verification/panels/ChooseModePanel.jsx deleted file mode 100644 index e03f9a6..0000000 --- a/src/id-verification/panels/ChooseModePanel.jsx +++ /dev/null @@ -1,67 +0,0 @@ -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'; - -import { useNextPanelSlug } from '../routing-utilities'; -import BasePanel from './BasePanel'; -import IdVerificationContext from '../IdVerificationContext'; -import messages from '../IdVerification.messages'; - -function ChooseModePanel(props) { - const panelSlug = 'choose-mode'; - 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 ( - -

- {props.intl.formatMessage(messages['id.verification.choose.mode.help.text'])} -

-
- - onPhotoModeChange(false)} - /> - onPhotoModeChange(true)} - /> - -
-
- - {props.intl.formatMessage(messages['id.verification.next'])} - -
- - ); -} - -ChooseModePanel.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(ChooseModePanel); diff --git a/src/id-verification/panels/RequestCameraAccessPanel.jsx b/src/id-verification/panels/RequestCameraAccessPanel.jsx index 739902a..040a1dd 100644 --- a/src/id-verification/panels/RequestCameraAccessPanel.jsx +++ b/src/id-verification/panels/RequestCameraAccessPanel.jsx @@ -19,7 +19,7 @@ function RequestCameraAccessPanel(props) { const panelSlug = 'request-camera-access'; const nextPanelSlug = useNextPanelSlug(panelSlug); const { - tryGetUserMedia, mediaAccess, userId, optimizelyExperimentName, + tryGetUserMedia, mediaAccess, userId, } = useContext(IdVerificationContext); const browserName = Bowser.parse(window.navigator.userAgent).browser.name; @@ -54,12 +54,6 @@ function RequestCameraAccessPanel(props) { ); - const nextButtonLink = ( - - {props.intl.formatMessage(messages['id.verification.continue.upload'])} - - ); - return (
- {optimizelyExperimentName ? nextButtonLink : returnLink} + {returnLink}
)} @@ -117,7 +111,7 @@ function RequestCameraAccessPanel(props) {

- {optimizelyExperimentName ? nextButtonLink : returnLink} + {returnLink}
)} diff --git a/src/id-verification/panels/ReviewRequirementsPanel.jsx b/src/id-verification/panels/ReviewRequirementsPanel.jsx index d183113..f663a30 100644 --- a/src/id-verification/panels/ReviewRequirementsPanel.jsx +++ b/src/id-verification/panels/ReviewRequirementsPanel.jsx @@ -13,31 +13,15 @@ import messages from '../IdVerification.messages'; import exampleCard from '../assets/example-card.png'; function ReviewRequirementsPanel(props) { - const { - userId, profileDataManager, setOptimizelyExperimentName, - } = useContext(IdVerificationContext); + const { userId, profileDataManager } = useContext(IdVerificationContext); const panelSlug = 'review-requirements'; const nextPanelSlug = useNextPanelSlug(panelSlug); - const getExperiments = () => { - const { - experimentVariables: { - experimentName = '', - } = {}, - } = window; - - if (experimentName) { - setOptimizelyExperimentName(experimentName); - } - }; - useEffect(() => { sendTrackEvent('edx.id_verification.started', { category: 'id_verification', user_id: userId, }); - - getExperiments(); }, [userId]); function renderManagedProfileMessage() { diff --git a/src/id-verification/panels/SummaryPanel.jsx b/src/id-verification/panels/SummaryPanel.jsx index 05d501d..b632b87 100644 --- a/src/id-verification/panels/SummaryPanel.jsx +++ b/src/id-verification/panels/SummaryPanel.jsx @@ -26,10 +26,7 @@ function SummaryPanel(props) { nameOnAccount, idPhotoName, stopUserMedia, - optimizelyExperimentName, setReachedSummary, - portraitPhotoMode, - idPhotoMode, } = useContext(IdVerificationContext); const nameToBeUsed = idPhotoName || nameOnAccount || ''; const [isSubmitting, setIsSubmitting] = useState(false); @@ -79,11 +76,6 @@ function SummaryPanel(props) { */ verificationData.idPhotoName = nameOnAccount; } - if (optimizelyExperimentName) { - verificationData.optimizelyExperimentName = optimizelyExperimentName; - verificationData.portraitPhotoMode = portraitPhotoMode; - verificationData.idPhotoMode = idPhotoMode; - } const result = await submitIdVerification(verificationData); if (result.success) { stopUserMedia(); @@ -208,7 +200,7 @@ function SummaryPanel(props) { - {!optimizelyExperimentName && } +