64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { ActionRow, AlertModal, Button } from '@edx/paragon';
|
|
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
|
|
function TaskAlertModal(props) {
|
|
const {
|
|
isOpen, close, alertMessage, intl,
|
|
} = props;
|
|
|
|
const messages = {
|
|
taskAlertTitle: {
|
|
id: 'bulk.email.task.alert.title',
|
|
defaultMessage: 'Caution',
|
|
description: 'Title in the header of the alert',
|
|
},
|
|
};
|
|
return (
|
|
<AlertModal
|
|
title={intl.formatMessage(messages.taskAlertTitle)}
|
|
isBlocking
|
|
isOpen={isOpen}
|
|
onClose={close}
|
|
footerNode={(
|
|
<ActionRow>
|
|
<Button variant="tertiary" onClick={close} name="cancel">
|
|
<FormattedMessage
|
|
id="bulk.email.task.alert.cancel"
|
|
defaultMessage="Cancel"
|
|
description="Cancel button for the task alert"
|
|
/>
|
|
</Button>
|
|
<Button variant="primary" onClick={close} name="continue">
|
|
<FormattedMessage
|
|
id="bulk.email.form.recipients.Contine"
|
|
defaultMessage="Continue"
|
|
description="Continue button for the task alert"
|
|
>
|
|
{ // FormattedMessage wraps the translated string in a <span/> by default. This was
|
|
// causing strange click event target issues in safari. To solve this, we want to
|
|
// wrap the string in a fragment instead of a span, so that the whole button considered
|
|
// a "button" target, and not a "span inside a button"
|
|
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
msg => <>{msg}</>
|
|
}
|
|
</FormattedMessage>
|
|
</Button>
|
|
</ActionRow>
|
|
)}
|
|
>
|
|
{alertMessage}
|
|
</AlertModal>
|
|
);
|
|
}
|
|
|
|
TaskAlertModal.propTypes = {
|
|
isOpen: PropTypes.bool.isRequired,
|
|
close: PropTypes.func.isRequired,
|
|
alertMessage: PropTypes.node.isRequired,
|
|
intl: intlShape.isRequired,
|
|
};
|
|
|
|
export default injectIntl(TaskAlertModal);
|