diff --git a/mailpoet/assets/js/src/common/authorize_sender_email_modal.tsx b/mailpoet/assets/js/src/common/authorize_sender_email_modal.tsx new file mode 100644 index 0000000000..5869169fa3 --- /dev/null +++ b/mailpoet/assets/js/src/common/authorize_sender_email_modal.tsx @@ -0,0 +1,86 @@ +import { useEffect, useState } from 'react'; +import ReactStringReplace from 'react-string-replace'; +import PropTypes from 'prop-types'; +import { MailPoet } from 'mailpoet'; +import { Modal } from 'common/modal/modal'; +import { Loader } from 'common'; + +type ApiActionType = 'create' | 'confirm'; + +/** + * @param {string} email - Email address + * @param {ApiActionType} type - action type + * @returns {Promise} + */ +const makeApiRequest = (email: string, type: ApiActionType = 'create') => + MailPoet.Ajax.post({ + api_version: MailPoet.apiVersion, + endpoint: 'settings', + action: + type === 'create' + ? 'authorizeSenderEmailAddress' + : 'confirmSenderEmailAddressIsAuthorized', + data: { + email, + }, + }); + +type Props = { + senderEmail: string; + onRequestClose: () => void; +}; + +function AuthorizeSenderEmailModal({ senderEmail, onRequestClose }: Props) { + const [apiResponseType, setApiResponseType] = useState(null); + + const senderEmailAddress = String(senderEmail).toLowerCase(); + + useEffect(() => { + if (!senderEmailAddress) { + return; + } + + makeApiRequest(senderEmailAddress) + .then((res) => { + setApiResponseType(Boolean(res?.data)); + }) + .catch(() => { + setApiResponseType(false); + }); + }, [senderEmailAddress]); + + return ( + + {apiResponseType && ( +

+ {ReactStringReplace( + MailPoet.I18n.t('authorizeSenderEmailModalDescription'), + /\[bold\](.*?)\[\/bold\]/g, + (match, i) => ( + {match} + ), + )} +

+ )} + + {apiResponseType === false && ( +

{MailPoet.I18n.t('authorizeSenderEmailMessageError')}

+ )} + + +
+ ); +} + +AuthorizeSenderEmailModal.propTypes = { + senderEmail: PropTypes.string.isRequired, +}; + +export { AuthorizeSenderEmailModal }; diff --git a/mailpoet/views/layout.html b/mailpoet/views/layout.html index 1bd109ae32..bf9fcc0dcc 100644 --- a/mailpoet/views/layout.html +++ b/mailpoet/views/layout.html @@ -120,6 +120,11 @@ jQuery('#adminmenu #toplevel_page_mailpoet-newsletters') 'reviewRequestRateUsNow': _x('Rate us now', 'Review our plugin on WordPress.org.'), 'reviewRequestNotNow': __('Not now'), + 'authorizeSenderEmailModalTitle': __('Authorizing your email address: [senderEmail]', 'mailpoet'), + 'authorizeSenderEmailModalDescription': __('Check your inbox now to confirm your email address. Please find the email with the subject: [bold]"email address to authorize"[/bold]', 'mailpoet'), + 'authorizeSenderEmailMessageSuccess': __('The email address has been authorized. You can now send emails using this address with MailPoet.', 'mailpoet'), + 'authorizeSenderEmailMessageError': __('An error occured when performing the request. Please try again later', 'mailpoet'), + 'sent': __('Sent'), 'notSentYet': __('Not sent yet!'),