Skip to content

Commit 6be87b4

Browse files
diana-villalvazo-wgudiana-villalvazo-wgu
authored
refactor: Replace of injectIntl with useIntl() (#1303)
1 parent 2137e98 commit 6be87b4

File tree

9 files changed

+77
-87
lines changed

9 files changed

+77
-87
lines changed

‎src/id-verification/AccessBlocked.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { getConfig } from '@edx/frontend-platform';
4-
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
4+
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
55

66
import messages from './IdVerification.messages';
77
import { ERROR_REASONS } from './IdVerificationContext';
88

9-
const AccessBlocked = ({ error, intl }) => {
9+
const AccessBlocked = ({ error }) => {
10+
const intl = useIntl();
1011
const handleMessage = () => {
1112
if (error === ERROR_REASONS.COURSE_ENROLLMENT) {
1213
return <p>{intl.formatMessage(messages['id.verification.access.blocked.enrollment'])}</p>;
@@ -42,8 +43,7 @@ const AccessBlocked = ({ error, intl }) => {
4243
};
4344

4445
AccessBlocked.propTypes = {
45-
intl: intlShape.isRequired,
4646
error: PropTypes.string.isRequired,
4747
};
4848

49-
export default injectIntl(AccessBlocked);
49+
export default AccessBlocked;

‎src/id-verification/CameraHelp.jsx‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { Collapsible } from '@openedx/paragon';
4-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
4+
import { useIntl } from '@edx/frontend-platform/i18n';
55

66
import { getConfig } from '@edx/frontend-platform';
77
import messages from './IdVerification.messages';
88

9-
const CameraHelp = (props) => (
10-
<div>
11-
<Collapsible
12-
styling="card"
13-
title={props.intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
14-
className="mb-4 shadow"
15-
defaultOpen={props.isOpen}
16-
>
17-
<p>
18-
{props.intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}
19-
</p>
20-
</Collapsible>
21-
<Collapsible
22-
styling="card"
23-
title={props.intl.formatMessage(messages[`id.verification.camera.help.difficulty.question.${props.isPortrait ? 'portrait' : 'id'}`])}
24-
className="mb-4 shadow"
25-
defaultOpen={props.isOpen}
26-
>
27-
<p>
28-
{props.intl.formatMessage(
29-
messages['id.verification.camera.help.difficulty.answer'],
30-
{ siteName: getConfig().SITE_NAME },
31-
)}
32-
</p>
33-
</Collapsible>
34-
</div>
35-
);
9+
const CameraHelp = (props) => {
10+
const intl = useIntl();
11+
12+
return (
13+
<div>
14+
<Collapsible
15+
styling="card"
16+
title={intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
17+
className="mb-4 shadow"
18+
defaultOpen={props.isOpen}
19+
>
20+
<p>
21+
{intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}
22+
</p>
23+
</Collapsible>
24+
<Collapsible
25+
styling="card"
26+
title={intl.formatMessage(messages[`id.verification.camera.help.difficulty.question.${props.isPortrait ? 'portrait' : 'id'}`])}
27+
className="mb-4 shadow"
28+
defaultOpen={props.isOpen}
29+
>
30+
<p>
31+
{intl.formatMessage(
32+
messages['id.verification.camera.help.difficulty.answer'],
33+
{ siteName: getConfig().SITE_NAME },
34+
)}
35+
</p>
36+
</Collapsible>
37+
</div>
38+
);
39+
};
3640

3741
CameraHelp.propTypes = {
38-
intl: intlShape.isRequired,
3942
isOpen: PropTypes.bool,
4043
isPortrait: PropTypes.bool,
4144
};
@@ -45,4 +48,4 @@ CameraHelp.defaultProps = {
4548
isPortrait: false,
4649
};
4750

48-
export default injectIntl(CameraHelp);
51+
export default CameraHelp;

‎src/id-verification/CameraHelpWithUpload.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { useState, useContext } from 'react';
1+
import { useState, useContext } from 'react';
22
import PropTypes from 'prop-types';
33
import { Collapsible } from '@openedx/paragon';
4-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
4+
import { useIntl } from '@edx/frontend-platform/i18n';
55
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
66

77
import messages from './IdVerification.messages';
@@ -11,6 +11,7 @@ import ImagePreview from './ImagePreview';
1111
import SupportedMediaTypes from './SupportedMediaTypes';
1212

1313
const CameraHelpWithUpload = (props) => {
14+
const intl = useIntl();
1415
const { setIdPhotoFile, idPhotoFile, userId } = useContext(IdVerificationContext);
1516
const [hasUploadedImage, setHasUploadedImage] = useState(false);
1617

@@ -27,29 +28,28 @@ const CameraHelpWithUpload = (props) => {
2728
<div>
2829
<Collapsible
2930
styling="card"
30-
title={props.intl.formatMessage(messages['id.verification.id.photo.unclear.question'])}
31+
title={intl.formatMessage(messages['id.verification.id.photo.unclear.question'])}
3132
data-testid="collapsible"
3233
className="mb-4 shadow"
3334
defaultOpen={props.isOpen}
3435
>
35-
{idPhotoFile && hasUploadedImage && <ImagePreview src={idPhotoFile} alt={props.intl.formatMessage(messages['id.verification.id.photo.preview.alt'])} />}
36+
{idPhotoFile && hasUploadedImage && <ImagePreview src={idPhotoFile} alt={intl.formatMessage(messages['id.verification.id.photo.preview.alt'])} />}
3637
<p>
37-
{props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
38+
{intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
3839
<SupportedMediaTypes />
3940
</p>
40-
<ImageFileUpload onFileChange={setAndTrackIdPhotoFile} intl={props.intl} />
41+
<ImageFileUpload onFileChange={setAndTrackIdPhotoFile} />
4142
</Collapsible>
4243
</div>
4344
);
4445
};
4546

4647
CameraHelpWithUpload.propTypes = {
47-
intl: intlShape.isRequired,
4848
isOpen: PropTypes.bool,
4949
};
5050

5151
CameraHelpWithUpload.defaultProps = {
5252
isOpen: false,
5353
};
5454

55-
export default injectIntl(CameraHelpWithUpload);
55+
export default CameraHelpWithUpload;

‎src/id-verification/ImageFileUpload.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React, { useCallback, useState } from 'react';
2-
import { intlShape } from '@edx/frontend-platform/i18n';
1+
import { useCallback, useState } from 'react';
2+
import { useIntl } from '@edx/frontend-platform/i18n';
33
import PropTypes from 'prop-types';
44
import { Alert } from '@openedx/paragon';
55
import messages from './IdVerification.messages';
66
import SupportedMediaTypes from './SupportedMediaTypes';
77

8-
const ImageFileUpload = ({ onFileChange, intl }) => {
8+
const ImageFileUpload = ({ onFileChange }) => {
9+
const intl = useIntl();
910
const [error, setError] = useState(null);
1011
const errorTypes = {
1112
invalidFileType: 'invalidFileType',
@@ -58,7 +59,6 @@ const ImageFileUpload = ({ onFileChange, intl }) => {
5859

5960
ImageFileUpload.propTypes = {
6061
onFileChange: PropTypes.func.isRequired,
61-
intl: intlShape.isRequired,
6262
};
6363

6464
export default ImageFileUpload;

‎src/id-verification/panels/RequestCameraAccessPanel.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const RequestCameraAccessPanel = () => {
110110
<p data-testid="camera-unsupported-failure">
111111
{intl.formatMessage(messages['id.verification.camera.access.failure.unsupported'])}
112112
</p>
113-
<UnsupportedCameraDirectionsPanel browserName={browserName} intl={intl} />
113+
<UnsupportedCameraDirectionsPanel browserName={browserName} />
114114
<div className="action-row">
115115
{returnLink}
116116
</div>

‎src/id-verification/panels/SummaryPanel.jsx‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
Alert, Hyperlink, Form, Button, Spinner,
55
} from '@openedx/paragon';
66
import { Link, useNavigate } from 'react-router-dom';
7-
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
7+
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
88

99
import { submitIdVerification } from '../data/service';
1010
import { useNextPanelSlug } from '../routing-utilities';
@@ -16,7 +16,8 @@ import messages from '../IdVerification.messages';
1616
import CameraHelpWithUpload from '../CameraHelpWithUpload';
1717
import SupportedMediaTypes from '../SupportedMediaTypes';
1818

19-
const SummaryPanel = (props) => {
19+
const SummaryPanel = () => {
20+
const intl = useIntl();
2021
const panelSlug = 'summary';
2122
const nextPanelSlug = useNextPanelSlug(panelSlug);
2223
const {
@@ -51,7 +52,7 @@ const SummaryPanel = (props) => {
5152
profileDataManager,
5253
support: (
5354
<Hyperlink destination={getConfig().SUPPORT_URL} target="_blank">
54-
{props.intl.formatMessage(messages['id.verification.support'])}
55+
{intl.formatMessage(messages['id.verification.support'])}
5556
</Hyperlink>
5657
),
5758
}}
@@ -94,26 +95,26 @@ const SummaryPanel = (props) => {
9495
onClick={handleClick}
9596
data-testid="submit-button"
9697
>
97-
{props.intl.formatMessage(messages['id.verification.review.confirm'])}
98+
{intl.formatMessage(messages['id.verification.review.confirm'])}
9899
</Button>
99100
);
100101
};
101102

102103
function getError() {
103104
if (submissionError.status === 400) {
104105
if (submissionError.message.includes('face_image')) {
105-
return props.intl.formatMessage(messages['id.verification.submission.alert.error.face']);
106+
return intl.formatMessage(messages['id.verification.submission.alert.error.face']);
106107
}
107108
if (submissionError.message.includes('Photo ID image')) {
108-
return props.intl.formatMessage(messages['id.verification.submission.alert.error.id']);
109+
return intl.formatMessage(messages['id.verification.submission.alert.error.id']);
109110
}
110111
if (submissionError.message.includes('Name')) {
111-
return props.intl.formatMessage(messages['id.verification.submission.alert.error.name']);
112+
return intl.formatMessage(messages['id.verification.submission.alert.error.name']);
112113
}
113114
if (submissionError.message.includes('unsupported format')) {
114115
return (
115116
<>
116-
{props.intl.formatMessage(messages['id.verification.submission.alert.error.unsupported'])}
117+
{intl.formatMessage(messages['id.verification.submission.alert.error.unsupported'])}
117118
<SupportedMediaTypes />
118119
</>
119120
);
@@ -130,7 +131,7 @@ const SummaryPanel = (props) => {
130131
values={{
131132
support_link: (
132133
<Alert.Link href="https://support.edx.org/hc/en-us">
133-
{props.intl.formatMessage(
134+
{intl.formatMessage(
134135
messages['id.verification.review.error'],
135136
{ siteName: getConfig().SITE_NAME },
136137
)}
@@ -144,7 +145,7 @@ const SummaryPanel = (props) => {
144145
return (
145146
<BasePanel
146147
name={panelSlug}
147-
title={props.intl.formatMessage(messages['id.verification.review.title'])}
148+
title={intl.formatMessage(messages['id.verification.review.title'])}
148149
>
149150
{submissionError && (
150151
<Alert
@@ -157,50 +158,50 @@ const SummaryPanel = (props) => {
157158
</Alert>
158159
)}
159160
<p>
160-
{props.intl.formatMessage(messages['id.verification.review.description'])}
161+
{intl.formatMessage(messages['id.verification.review.description'])}
161162
</p>
162163
<div className="row mb-4">
163164
<div className="col-6">
164165
<label htmlFor="photo-of-face" className="font-weight-bold">
165-
{props.intl.formatMessage(messages['id.verification.review.portrait.label'])}
166+
{intl.formatMessage(messages['id.verification.review.portrait.label'])}
166167
</label>
167168
<ImagePreview
168169
id="photo-of-face"
169170
src={facePhotoFile}
170-
alt={props.intl.formatMessage(messages['id.verification.review.portrait.alt'])}
171+
alt={intl.formatMessage(messages['id.verification.review.portrait.alt'])}
171172
/>
172173
<Link
173174
className="btn btn-outline-primary"
174175
to="/id-verification/take-portrait-photo"
175176
state={{ fromSummary: true }}
176177
data-testid="portrait-retake"
177178
>
178-
{props.intl.formatMessage(messages['id.verification.review.portrait.retake'])}
179+
{intl.formatMessage(messages['id.verification.review.portrait.retake'])}
179180
</Link>
180181
</div>
181182
<div className="col-6">
182183
<label htmlFor="photo-of-id/edit" className="font-weight-bold">
183-
{props.intl.formatMessage(messages['id.verification.review.id.label'])}
184+
{intl.formatMessage(messages['id.verification.review.id.label'])}
184185
</label>
185186
<ImagePreview
186187
id="photo-of-id"
187188
src={idPhotoFile}
188-
alt={props.intl.formatMessage(messages['id.verification.review.id.alt'])}
189+
alt={intl.formatMessage(messages['id.verification.review.id.alt'])}
189190
/>
190191
<Link
191192
className="btn btn-outline-primary"
192193
to="/id-verification/take-id-photo"
193194
state={{ fromSummary: true }}
194195
data-testid="id-retake"
195196
>
196-
{props.intl.formatMessage(messages['id.verification.review.id.retake'])}
197+
{intl.formatMessage(messages['id.verification.review.id.retake'])}
197198
</Link>
198199
</div>
199200
</div>
200201
<CameraHelpWithUpload />
201202
<div className="form-group">
202203
<label htmlFor="name-to-be-used" className="font-weight-bold">
203-
{props.intl.formatMessage(messages['id.verification.name.label'])}
204+
{intl.formatMessage(messages['id.verification.name.label'])}
204205
</label>
205206
{renderManagedProfileMessage()}
206207
<div className="d-flex">
@@ -236,8 +237,4 @@ const SummaryPanel = (props) => {
236237
);
237238
};
238239

239-
SummaryPanel.propTypes = {
240-
intl: intlShape.isRequired,
241-
};
242-
243-
export default injectIntl(SummaryPanel);
240+
export default SummaryPanel;

‎src/id-verification/panels/TakeIdPhotoPanel.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const TakeIdPhotoPanel = () => {
5555
{intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
5656
<SupportedMediaTypes />
5757
</p>
58-
<ImageFileUpload onFileChange={setIdPhotoFile} intl={intl} />
58+
<ImageFileUpload onFileChange={setIdPhotoFile} />
5959
</div>
6060
)}
6161
</div>

‎src/id-verification/tests/AccessBlocked.test.jsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,13 @@ import {
44
render, cleanup, act, screen,
55
} from '@testing-library/react';
66
import '@edx/frontend-platform/analytics';
7-
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
7+
import { IntlProvider } from '@edx/frontend-platform/i18n';
88

99
import { ERROR_REASONS } from '../IdVerificationContext';
1010
import AccessBlocked from '../AccessBlocked';
1111

12-
const IntlAccessBlocked = injectIntl(AccessBlocked);
13-
1412
describe('AccessBlocked', () => {
1513
const defaultProps = {
16-
intl: {},
1714
error: '',
1815
};
1916

@@ -27,7 +24,7 @@ describe('AccessBlocked', () => {
2724
await act(async () => render((
2825
<Router>
2926
<IntlProvider locale="en">
30-
<IntlAccessBlocked {...defaultProps} />
27+
<AccessBlocked {...defaultProps} />
3128
</IntlProvider>
3229
</Router>
3330
)));
@@ -43,7 +40,7 @@ describe('AccessBlocked', () => {
4340
await act(async () => render((
4441
<Router>
4542
<IntlProvider locale="en">
46-
<IntlAccessBlocked {...defaultProps} />
43+
<AccessBlocked {...defaultProps} />
4744
</IntlProvider>
4845
</Router>
4946
)));
@@ -59,7 +56,7 @@ describe('AccessBlocked', () => {
5956
await act(async () => render((
6057
<Router>
6158
<IntlProvider locale="en">
62-
<IntlAccessBlocked {...defaultProps} />
59+
<AccessBlocked {...defaultProps} />
6360
</IntlProvider>
6461
</Router>
6562
)));

0 commit comments

Comments
 (0)