-
Notifications
You must be signed in to change notification settings - Fork 17
/
ExamAPIError.jsx
51 lines (47 loc) · 1.73 KB
/
ExamAPIError.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import React, { useContext } from 'react';
import { getConfig } from '@edx/frontend-platform';
import { Alert, Hyperlink, Icon } from '@edx/paragon';
import { Info } from '@edx/paragon/icons';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import ExamStateContext from '../context';
import messages from './messages';
const ExamAPIError = ({ intl }) => {
const state = useContext(ExamStateContext);
const { SITE_NAME, SUPPORT_URL } = getConfig();
const { apiErrorMsg } = state;
const shouldShowApiErrorMsg = !!apiErrorMsg && !apiErrorMsg.includes('<');
return (
<Alert variant="danger" data-testid="exam-api-error-component">
<Icon src={Info} className="alert-icon" />
<Alert.Heading data-testid="error-details">
{shouldShowApiErrorMsg ? apiErrorMsg : intl.formatMessage(messages.apiErrorDefault)}
</Alert.Heading>
<p>
{SITE_NAME && SUPPORT_URL ? (
<FormattedMessage
id="exam.apiError.supportText.withLink"
defaultMessage={
'If the issue persists, please reach out to {supportLink} for assistance, '
+ 'and return to the exam once you receive further instructions.'
}
values={{
supportLink: (
<Hyperlink
data-testid="support-link"
destination={SUPPORT_URL}
target="_blank"
>
{SITE_NAME} Support
</Hyperlink>
),
}}
/>
) : intl.formatMessage(messages.supportTextWithoutLink)}
</p>
</Alert>
);
};
ExamAPIError.propTypes = {
intl: intlShape.isRequired,
};
export default injectIntl(ExamAPIError);