diff --git a/mailpoet/assets/js/src/common/sender_email_address_warning.jsx b/mailpoet/assets/js/src/common/sender_email_address_warning.jsx index 9933480d54..d923d852e3 100644 --- a/mailpoet/assets/js/src/common/sender_email_address_warning.jsx +++ b/mailpoet/assets/js/src/common/sender_email_address_warning.jsx @@ -11,6 +11,7 @@ function SenderEmailAddressWarning({ emailAddress, mssActive, isEmailAuthorized, + showSenderDomainWarning, }) { const [showAuthorizedEmailModal, setShowAuthorizedEmailModal] = useState(false); @@ -21,6 +22,8 @@ function SenderEmailAddressWarning({ setShowAuthorizedEmailModal(true); }; + const emailAddressDomain = emailAddress.split('@').pop().toLowerCase(); + if (mssActive) { if (!isEmailAuthorized) { return ( @@ -56,9 +59,42 @@ function SenderEmailAddressWarning({ ); } + if (showSenderDomainWarning) { + return ( + <> + {showAuthorizedEmailModal && ( + // TODO: Change me. This should open the sender domain modal + { + setShowAuthorizedEmailModal(false); + }} + setAuthorizedAddress={setAuthorizedEmailAddress} + /> + )} +

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

+ + ); + } return null; } - const emailAddressDomain = emailAddress.split('@').pop().toLowerCase(); if (window.mailpoet_free_domains.indexOf(emailAddressDomain) > -1) { return ( <> @@ -100,10 +136,12 @@ SenderEmailAddressWarning.propTypes = { emailAddress: PropTypes.string.isRequired, mssActive: PropTypes.bool.isRequired, isEmailAuthorized: PropTypes.bool, + showSenderDomainWarning: PropTypes.bool, }; SenderEmailAddressWarning.defaultProps = { isEmailAuthorized: true, // don't show error message by default + showSenderDomainWarning: false, }; export { SenderEmailAddressWarning }; diff --git a/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx b/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx index 6df347a22c..76085008a8 100644 --- a/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx +++ b/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx @@ -1,15 +1,30 @@ import { useEffect, useState } from 'react'; +import { MailPoet } from 'mailpoet'; import { Label, Inputs } from 'settings/components'; import { isEmail, t, onChange, setLowercaseValue } from 'common/functions'; import { Input } from 'common/form/input/input'; import { useSetting, useSelector, useAction } from 'settings/store/hooks'; import { SenderEmailAddressWarning } from 'common/sender_email_address_warning.jsx'; +/** + * @param {string} email - Email address + * @param {ApiActionType} type - action type + * @returns {Promise} + */ +const makeApiRequest = (domain: string) => + MailPoet.Ajax.post({ + api_version: MailPoet.apiVersion, + endpoint: 'settings', + action: 'checkDomainDmarcPolicy', + data: { domain }, + }); + export function DefaultSender() { const isMssActive = useSelector('isMssActive')(); const [senderName, setSenderName] = useSetting('sender', 'name'); const [senderEmail, setSenderEmail] = useSetting('sender', 'address'); const [isAuthorized, setIsAuthorized] = useState(true); + const [showSenderDomainWarning, setShowSenderDomainWarning] = useState(false); const [replyToName, setReplyToName] = useSetting('reply_to', 'name'); const [replyToEmail, setReplyToEmail] = useSetting('reply_to', 'address'); const setErrorFlag = useAction('setErrorFlag'); @@ -22,6 +37,36 @@ export function DefaultSender() { } setIsAuthorized(window.mailpoet_authorized_emails.includes(email)); }; + + const checkSenderEmailDomain = (email: string) => { + const emailAddressDomain = email.split('@').pop().toLowerCase(); + + const isDomainVerified = + window.mailpoet_verified_sender_domains.includes(emailAddressDomain); + if (isDomainVerified) { + // do nothing if the email domain is verified + return; + } + + // check domain DMARC policy + makeApiRequest(emailAddressDomain) + .then((res) => { + const isDmarcPolicyRetricted = Boolean( + res?.data?.isDmarcPolicyRetricted, + ); + setShowSenderDomainWarning(isDmarcPolicyRetricted); + }) + .catch(() => { + // do nothing for now when the request fails + }); + }; + + const performActionOnBlur = (data: string) => { + isAuthorizedEmail(data); + + checkSenderEmailDomain(data); + }; + const updateSenderEmailController = (email: string) => { setIsAuthorized(true); setSenderEmail(email); @@ -66,7 +111,7 @@ export function DefaultSender() { data-automation-id="from-email-field" value={senderEmail} onChange={onChange(setLowercaseValue(updateSenderEmailController))} - onBlur={onChange(isAuthorizedEmail)} + onBlur={onChange(performActionOnBlur)} />
{invalidSenderEmail && ( @@ -79,6 +124,7 @@ export function DefaultSender() { emailAddress={senderEmail} mssActive={isMssActive} isEmailAuthorized={isAuthorized} + showSenderDomainWarning={showSenderDomainWarning} />