diff --git a/src/id-verification/panels/SubmittedPanel.jsx b/src/id-verification/panels/SubmittedPanel.jsx
index 6397e07..ec92c43 100644
--- a/src/id-verification/panels/SubmittedPanel.jsx
+++ b/src/id-verification/panels/SubmittedPanel.jsx
@@ -1,7 +1,7 @@
-import React, { useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
import { getConfig } from '@edx/frontend-platform';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
import { useRedirect } from '../../hooks';
@@ -10,10 +10,11 @@ import messages from '../IdVerification.messages';
import BasePanel from './BasePanel';
-const SubmittedPanel = (props) => {
+const SubmittedPanel = () => {
const { userId } = useContext(IdVerificationContext);
const { location: returnUrl, text: returnText } = useRedirect();
const panelSlug = 'submitted';
+ const intl = useIntl();
useEffect(() => {
sendTrackEvent('edx.id_verification.submitted', {
@@ -25,24 +26,20 @@ const SubmittedPanel = (props) => {
return (
- {props.intl.formatMessage(messages['id.verification.submitted.text'])}
+ {intl.formatMessage(messages['id.verification.submitted.text'])}
- {props.intl.formatMessage(messages[returnText])}
+ {intl.formatMessage(messages[returnText])}
);
};
-SubmittedPanel.propTypes = {
- intl: intlShape.isRequired,
-};
-
-export default injectIntl(SubmittedPanel);
+export default SubmittedPanel;
diff --git a/src/id-verification/panels/TakeIdPhotoPanel.jsx b/src/id-verification/panels/TakeIdPhotoPanel.jsx
index 783d881..573dd93 100644
--- a/src/id-verification/panels/TakeIdPhotoPanel.jsx
+++ b/src/id-verification/panels/TakeIdPhotoPanel.jsx
@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
import { useNextPanelSlug } from '../routing-utilities';
import BasePanel from './BasePanel';
@@ -14,11 +14,12 @@ import ImageFileUpload from '../ImageFileUpload';
import CollapsibleImageHelp from '../CollapsibleImageHelp';
import SupportedMediaTypes from '../SupportedMediaTypes';
-const TakeIdPhotoPanel = (props) => {
+const TakeIdPhotoPanel = () => {
const panelSlug = 'take-id-photo';
const nextPanelSlug = useNextPanelSlug(panelSlug);
const { setIdPhotoFile, idPhotoFile, useCameraForId } = useContext(IdVerificationContext);
const [mounted, setMounted] = useState(false);
+ const intl = useIntl();
useEffect(() => {
// This prevents focus switching to the heading when taking a photo
@@ -30,31 +31,31 @@ const TakeIdPhotoPanel = (props) => {
name={panelSlug}
focusOnMount={!mounted}
title={useCameraForId
- ? props.intl.formatMessage(messages['id.verification.id.photo.title.camera'])
- : props.intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
+ ? intl.formatMessage(messages['id.verification.id.photo.title.camera'])
+ : intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
>
{idPhotoFile && !useCameraForId && (
)}
{useCameraForId ? (
- {props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
+ {intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
) : (
- {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
+ {intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
-
+
)}
@@ -62,15 +63,11 @@ const TakeIdPhotoPanel = (props) => {
- {props.intl.formatMessage(messages['id.verification.next'])}
+ {intl.formatMessage(messages['id.verification.next'])}
);
};
-TakeIdPhotoPanel.propTypes = {
- intl: intlShape.isRequired,
-};
-
-export default injectIntl(TakeIdPhotoPanel);
+export default TakeIdPhotoPanel;
diff --git a/src/id-verification/panels/TakePortraitPhotoPanel.jsx b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
index eccb0c5..956aa7f 100644
--- a/src/id-verification/panels/TakePortraitPhotoPanel.jsx
+++ b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
import { useNextPanelSlug } from '../routing-utilities';
import BasePanel from './BasePanel';
@@ -10,11 +10,12 @@ import IdVerificationContext from '../IdVerificationContext';
import messages from '../IdVerification.messages';
-const TakePortraitPhotoPanel = (props) => {
+const TakePortraitPhotoPanel = () => {
const panelSlug = 'take-portrait-photo';
const nextPanelSlug = useNextPanelSlug(panelSlug);
const { setFacePhotoFile, facePhotoFile } = useContext(IdVerificationContext);
const [mounted, setMounted] = useState(false);
+ const intl = useIntl();
useEffect(() => {
// This prevents focus switching to the heading when taking a photo
@@ -25,26 +26,22 @@ const TakePortraitPhotoPanel = (props) => {
- {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
+ {intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
- {props.intl.formatMessage(messages['id.verification.next'])}
+ {intl.formatMessage(messages['id.verification.next'])}
);
};
-TakePortraitPhotoPanel.propTypes = {
- intl: intlShape.isRequired,
-};
-
-export default injectIntl(TakePortraitPhotoPanel);
+export default TakePortraitPhotoPanel;
diff --git a/src/id-verification/tests/panels/SubmittedPanel.test.jsx b/src/id-verification/tests/panels/SubmittedPanel.test.jsx
index 215e312..4e53fa3 100644
--- a/src/id-verification/tests/panels/SubmittedPanel.test.jsx
+++ b/src/id-verification/tests/panels/SubmittedPanel.test.jsx
@@ -1,10 +1,9 @@
-import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
render, cleanup, act, screen,
} from '@testing-library/react';
import '@edx/frontend-platform/analytics';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import IdVerificationContext from '../../IdVerificationContext';
import SubmittedPanel from '../../panels/SubmittedPanel';
@@ -12,13 +11,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
sendTrackEvent: jest.fn(),
}));
-const IntlSubmittedPanel = injectIntl(SubmittedPanel);
-
describe('SubmittedPanel', () => {
- const defaultProps = {
- intl: {},
- };
-
const contextValue = {
facePhotoFile: 'test.jpg',
idPhotoFile: 'test.jpg',
@@ -43,7 +36,7 @@ describe('SubmittedPanel', () => {
-
+
@@ -59,7 +52,7 @@ describe('SubmittedPanel', () => {
-
+
@@ -75,7 +68,7 @@ describe('SubmittedPanel', () => {
-
+
diff --git a/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx b/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
index 8f92a20..a8f28b8 100644
--- a/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
+++ b/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
render, cleanup, act, screen, fireEvent,
} from '@testing-library/react';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import IdVerificationContext from '../../IdVerificationContext';
import TakeIdPhotoPanel from '../../panels/TakeIdPhotoPanel';
+import messages from '../../IdVerification.messages';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendTrackEvent: jest.fn(),
@@ -13,13 +13,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
jest.mock('../../Camera');
-const IntlTakeIdPhotoPanel = injectIntl(TakeIdPhotoPanel);
-
describe('TakeIdPhotoPanel', () => {
- const defaultProps = {
- intl: {},
- };
-
const contextValue = {
facePhotoFile: 'test.jpg',
idPhotoFile: null,
@@ -37,7 +31,7 @@ describe('TakeIdPhotoPanel', () => {
-
+
@@ -52,7 +46,7 @@ describe('TakeIdPhotoPanel', () => {
-
+
@@ -70,7 +64,7 @@ describe('TakeIdPhotoPanel', () => {
-
+
@@ -85,7 +79,7 @@ describe('TakeIdPhotoPanel', () => {
-
+
@@ -98,4 +92,24 @@ describe('TakeIdPhotoPanel', () => {
const text = await screen.findByTestId('upload-text');
expect(text.textContent).toContain('Please upload a photo of your identification card');
});
+
+ it('shows correct text if useCameraForId', async () => {
+ contextValue.useCameraForId = true;
+ await act(async () => render((
+
+
+
+
+
+
+
+ )));
+
+ // check that upload title and text are correct
+ const title = await screen.findByText(messages['id.verification.id.photo.title.camera'].defaultMessage);
+ expect(title).toBeVisible();
+
+ const text = await screen.findByText(messages['id.verification.id.photo.instructions.camera'].defaultMessage);
+ expect(text).toBeVisible();
+ });
});
diff --git a/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx b/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx
index 816fafc..f546c37 100644
--- a/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx
+++ b/src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx
@@ -1,10 +1,9 @@
/* eslint-disable react/jsx-no-useless-fragment */
-import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
render, cleanup, act, screen, fireEvent,
} from '@testing-library/react';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import IdVerificationContext from '../../IdVerificationContext';
import TakePortraitPhotoPanel from '../../panels/TakePortraitPhotoPanel';
@@ -16,13 +15,7 @@ jest.mock('../../Camera', () => function CameraMock() {
return <>>;
});
-const IntlTakePortraitPhotoPanel = injectIntl(TakePortraitPhotoPanel);
-
describe('TakePortraitPhotoPanel', () => {
- const defaultProps = {
- intl: {},
- };
-
const contextValue = {
facePhotoFile: null,
idPhotoFile: null,
@@ -39,7 +32,7 @@ describe('TakePortraitPhotoPanel', () => {
-
+
@@ -54,7 +47,7 @@ describe('TakePortraitPhotoPanel', () => {
-
+
@@ -73,7 +66,7 @@ describe('TakePortraitPhotoPanel', () => {
-
+