Andal.LND/frontend-app-account
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide image upload flow

Browse Source
This commit is contained in:
Bianca Severino
2020-07-16 14:15:22 -04:00
parent 997a3c0b98
commit fd3c8ede6d
4 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/id-verification/IdVerification.messages.js
View File

@@ -121,6 +121,11 @@ const messages = defineMessages({
defaultMessage: 'It looks like we\'re unable to access your camera. You will need to upload image files of you and your photo id.',
description: 'Text indicating that the camera could not be accessed and image upload will be enabled.',
},
'id.verification.camera.access.failure.temporary': {
id: 'id.verification.camera.access.failure.temporary',
defaultMessage: 'It looks like we\'re unable to access your camera. Please verify that your webcam is connected and that you have allowed your browser to access it.',
description: 'Text indicating that the camera could not be accessed.',
},
'id.verification.photo.tips.title': {
id: 'id.verification.photo.tips.title',
defaultMessage: 'Helpful Photo Tips',

35
src/id-verification/panels/RequestCameraAccessPanel.jsx
View File

@@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import React, { useState, useEffect, useContext } from 'react';
import { Link } from 'react-router-dom';
import { Collapsible } from '@edx/paragon';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import { useNextPanelSlug } from '../routing-utilities';
@@ -10,10 +10,21 @@ import { IdVerificationContext, MEDIA_ACCESS } from '../IdVerificationContext';
import messages from '../IdVerification.messages';
function RequestCameraAccessPanel(props) {
const [returnUrl, setReturnUrl] = useState('dashboard');
const [returnText, setReturnText] = useState('id.verification.return.dashboard');
const panelSlug = 'request-camera-access';
const nextPanelSlug = useNextPanelSlug(panelSlug);
const { tryGetUserMedia, mediaAccess } = useContext(IdVerificationContext);
// If the user accessed IDV through a course,
// link back to that course rather than the dashboard
useEffect(() => {
if (sessionStorage.getItem('courseRunKey')) {
setReturnUrl(`courses/${sessionStorage.getItem('courseRunKey')}`);
setReturnText('id.verification.return.course');
}
}, []);
return (
<BasePanel
name={panelSlug}
@@ -35,18 +46,6 @@ function RequestCameraAccessPanel(props) {
<button className="btn btn-primary" onClick={tryGetUserMedia}>
{props.intl.formatMessage(messages['id.verification.camera.access.enable'])}
</button>
<Collapsible.Advanced className="mr-auto">
<Collapsible.Visible whenClosed>
<Collapsible.Trigger tag="button" className="btn btn-link px-0">
{props.intl.formatMessage(messages['id.verification.camera.access.problems'])}
</Collapsible.Trigger>
</Collapsible.Visible>
<Collapsible.Body>
<Link to={nextPanelSlug} className="btn btn-link">
{props.intl.formatMessage(messages['id.verification.camera.access.skip'])}
</Link>
</Collapsible.Body>
</Collapsible.Advanced>
</div>
</div>
)}
@@ -67,12 +66,12 @@ function RequestCameraAccessPanel(props) {
{[MEDIA_ACCESS.UNSUPPORTED, MEDIA_ACCESS.DENIED].includes(mediaAccess) && (
<div>
<p>
{props.intl.formatMessage(messages['id.verification.camera.access.failure'])}
{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary'])}
</p>
<div className="action-row">
<Link to={nextPanelSlug} className="btn btn-primary">
{props.intl.formatMessage(messages['id.verification.next'])}
</Link>
<a className="btn btn-primary" href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}>
{props.intl.formatMessage(messages[returnText])}
</a>
</div>
</div>
)}

9
src/id-verification/panels/TakeIdPhotoPanel.jsx
View File

@@ -8,15 +8,18 @@ import ImageFileUpload from '../ImageFileUpload';
import ImagePreview from '../ImagePreview';
import Camera from '../Camera';
import CameraHelp from '../CameraHelp';
import { IdVerificationContext, MEDIA_ACCESS } from '../IdVerificationContext';
import { IdVerificationContext } from '../IdVerificationContext';
import messages from '../IdVerification.messages';
function TakeIdPhotoPanel(props) {
const panelSlug = 'take-id-photo';
const nextPanelSlug = useNextPanelSlug(panelSlug);
const { setIdPhotoFile, idPhotoFile, mediaAccess } = useContext(IdVerificationContext);
const shouldUseCamera = mediaAccess === MEDIA_ACCESS.GRANTED;
const { setIdPhotoFile, idPhotoFile } = useContext(IdVerificationContext);
const shouldUseCamera = true;
// to reenable upload component:
// const shouldUseCamera = mediaAccess === MEDIA_ACCESS.GRANTED;
return (
<BasePanel
name={panelSlug}

8
src/id-verification/panels/TakePortraitPhotoPanel.jsx
View File

@@ -8,15 +8,17 @@ import ImageFileUpload from '../ImageFileUpload';
import ImagePreview from '../ImagePreview';
import Camera from '../Camera';
import CameraHelp from '../CameraHelp';
import { IdVerificationContext, MEDIA_ACCESS } from '../IdVerificationContext';
import { IdVerificationContext } from '../IdVerificationContext';
import messages from '../IdVerification.messages';
function TakePortraitPhotoPanel(props) {
const panelSlug = 'take-portrait-photo';
const nextPanelSlug = useNextPanelSlug(panelSlug);
const { setFacePhotoFile, facePhotoFile, mediaAccess } = useContext(IdVerificationContext);
const shouldUseCamera = mediaAccess === MEDIA_ACCESS.GRANTED;
const { setFacePhotoFile, facePhotoFile } = useContext(IdVerificationContext);
const shouldUseCamera = true;
// to reenable upload component:
// const shouldUseCamera = mediaAccess === MEDIA_ACCESS.GRANTED;
return (
<BasePanel