diff --git a/assets/js/src/common/confirm_alert.jsx b/assets/js/src/common/confirm_alert.jsx index 379b3e4ea4..9b43658191 100644 --- a/assets/js/src/common/confirm_alert.jsx +++ b/assets/js/src/common/confirm_alert.jsx @@ -1,78 +1,53 @@ import MailPoet from 'mailpoet'; import PropTypes from 'prop-types'; import React from 'react'; -import ReactDOM from 'react-dom'; +import ReactDOMServer from 'react-dom/server'; -class ConfirmAlert extends React.Component { - static propTypes = { - title: PropTypes.string, - message: PropTypes.string.isRequired, - cancelLabel: PropTypes.string, - confirmLabel: PropTypes.string, - onConfirm: PropTypes.func.isRequired, - } +const ConfirmAlert = (props) => { + MailPoet.Modal.popup({ + title: props.title, + template: ReactDOMServer.renderToString( + <> +
{props.message}
+ + + > + ), + onInit: () => { + document + .getElementById('mailpoet_alert_confirm') + .addEventListener('click', () => { + MailPoet.Modal.close(); + props.onConfirm(); + }); - static defaultProps = { - title: MailPoet.I18n.t('confirmTitle'), - cancelLabel: MailPoet.I18n.t('cancelLabel'), - confirmLabel: MailPoet.I18n.t('confirmLabel'), - } + document + .getElementById('mailpoet_alert_cancel') + .addEventListener('click', () => MailPoet.Modal.close()); + }, + }); + return null; +}; - constructor(props) { - super(props); - this.state = { show: true }; - } +ConfirmAlert.propTypes = { + title: PropTypes.string, + message: PropTypes.string.isRequired, + cancelLabel: PropTypes.string, + confirmLabel: PropTypes.string, + onConfirm: PropTypes.func.isRequired, +}; - componentWillUpdate = () => { - if (!this.state.show) { - this.setState({ show: true }); - } - } - - onClose = () => { - this.setState({ show: false }); - } - - onConfirm = () => { - this.onClose(); - this.props.onConfirm(); - } - - render() { - const { - title, message, confirmLabel, cancelLabel, - } = this.props; - - return (this.state.show - && ( -{message}
- - -