Create sender warning component

[MAILPOET-1573]

assets/css/src/common.styl

@@ -71,3 +71,14 @@ progress::-webkit-progress-value
 progress::-moz-progress-bar
   background-color: progress-foreground
   border-radius: progress-border-radius
+
+/* double class is intentional here, we need to be very specific here to
+   something wrapping our warning message could override its style */
+p.sender_email_address_warning.sender_email_address_warning,
+  p.sender_email_address_warning.sender_email_address_warning a
+  color: #990000
+  text-align: left
+  align-self: flex-start;
+
+p.sender_email_address_warning:first-child
+  margin-top: 1em

assets/css/src/welcome_wizard.styl

@@ -43,7 +43,7 @@
     height: 30px
   input[type="submit"]
     margin: 50px 0 25px 0
-  a
+  a.sender_form_small
     font-size: 12px
     color: #595c65
 

assets/js/src/common/sender_email_address_warning.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+import ReactStringReplace from 'react-string-replace';
+
+/* https://github.com/mailcheck/mailcheck/wiki/List-of-Popular-Domains */
+const badDomains = [
+  /* Default domains included */
+  'aol.com', 'att.net', 'comcast.net', 'facebook.com', 'gmail.com', 'gmx.com', 'googlemail.com',
+  'google.com', 'hotmail.com', 'hotmail.co.uk', 'mac.com', 'me.com', 'mail.com', 'msn.com',
+  'live.com', 'sbcglobal.net', 'verizon.net', 'yahoo.com', 'yahoo.co.uk',
+
+  /* Other global domains */
+  'email.com', 'fastmail.fm', 'games.com' /* AOL */, 'gmx.net', 'hush.com', 'hushmail.com', 'icloud.com',
+  'iname.com', 'inbox.com', 'lavabit.com', 'love.com' /* AOL */, 'outlook.com', 'pobox.com', 'protonmail.com',
+  'rocketmail.com' /* Yahoo */, 'safe-mail.net', 'wow.com' /* AOL */, 'ygm.com' /* AOL */,
+  'ymail.com' /* Yahoo */, 'zoho.com', 'yandex.com',
+
+  /* United States ISP domains */
+  'bellsouth.net', 'charter.net', 'cox.net', 'earthlink.net', 'juno.com',
+
+  /* British ISP domains */
+  'btinternet.com', 'virginmedia.com', 'blueyonder.co.uk', 'freeserve.co.uk', 'live.co.uk',
+  'ntlworld.com', 'o2.co.uk', 'orange.net', 'sky.com', 'talktalk.co.uk', 'tiscali.co.uk',
+  'virgin.net', 'wanadoo.co.uk', 'bt.com',
+
+  /* Domains used in Asia */
+  'sina.com', 'sina.cn', 'qq.com', 'naver.com', 'hanmail.net', 'daum.net', 'nate.com', 'yahoo.co.jp', 'yahoo.co.kr', 'yahoo.co.id', 'yahoo.co.in', 'yahoo.com.sg', 'yahoo.com.ph', '163.com', '126.com', 'aliyun.com', 'foxmail.com',
+
+  /* French ISP domains */
+  'hotmail.fr', 'live.fr', 'laposte.net', 'yahoo.fr', 'wanadoo.fr', 'orange.fr', 'gmx.fr', 'sfr.fr', 'neuf.fr', 'free.fr',
+
+  /* German ISP domains */
+  'gmx.de', 'hotmail.de', 'live.de', 'online.de', 't-online.de' /* T-Mobile */, 'web.de', 'yahoo.de',
+
+  /* Italian ISP domains */
+  'libero.it', 'virgilio.it', 'hotmail.it', 'aol.it', 'tiscali.it', 'alice.it', 'live.it', 'yahoo.it', 'email.it', 'tin.it', 'poste.it', 'teletu.it',
+
+  /* Russian ISP domains */
+  'mail.ru', 'rambler.ru', 'yandex.ru', 'ya.ru', 'list.ru',
+
+  /* Belgian ISP domains */
+  'hotmail.be', 'live.be', 'skynet.be', 'voo.be', 'tvcablenet.be', 'telenet.be',
+
+  /* Argentinian ISP domains */
+  'hotmail.com.ar', 'live.com.ar', 'yahoo.com.ar', 'fibertel.com.ar', 'speedy.com.ar', 'arnet.com.ar',
+
+  /* Domains used in Mexico */
+  'yahoo.com.mx', 'live.com.mx', 'hotmail.es', 'hotmail.com.mx', 'prodigy.net.mx',
+
+  /* Domains used in Brazil */
+  'yahoo.com.br', 'hotmail.com.br', 'outlook.com.br', 'uol.com.br', 'bol.com.br', 'terra.com.br', 'ig.com.br', 'itelefonica.com.br', 'r7.com', 'zipmail.com.br', 'globo.com', 'globomail.com', 'oi.com.br'
+];
+
+const SenderEmailAddressWarning = ({ emailAddress }) => {
+  const domain = emailAddress.split('@').pop().toLowerCase();
+  if (badDomains.indexOf(domain) > -1) {
+    return (<React.Fragment>
+      <p className="sender_email_address_warning">{MailPoet.I18n.t('senderEmailAddressWarning1')}</p>
+      <p className="sender_email_address_warning">
+        {ReactStringReplace(
+          MailPoet.I18n.t('senderEmailAddressWarning2'),
+          /(%userDomain|%originalSender|<em>.*<\/em>)/,
+          (match) => {
+            if (match === '%userDomain') return 'user domain'; // TODO replace with the real domain
+            if (match === '%originalSender') return <em key="sender-email">{ emailAddress }</em>;
+            return <em key="reply-to">{match.replace(/<\/?em>/g, '')}</em>;
+          }
+        )}
+      </p>
+      <p className="sender_email_address_warning">
+        <a
+          href="https://kb.mailpoet.com/article/259-your-from-address-cannot-be-yahoo-com-gmail-com-outlook-com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {MailPoet.I18n.t('senderEmailAddressWarning3')}
+        </a>
+      </p>
+    </React.Fragment>);
+  }
+  return null;
+};
+
+SenderEmailAddressWarning.propTypes = {
+  emailAddress: PropTypes.string.isRequired,
+};
+
+export default SenderEmailAddressWarning;

assets/js/src/welcome_wizard/steps/sender_step.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 import jQuery from 'jquery';
 
+import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx'
+
 const WelcomeWizardSenderStep = props => (
   <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
     <h1>{MailPoet.I18n.t('welcomeWizardLetsStartTitle')}</h1>
@@ -41,8 +43,9 @@ const WelcomeWizardSenderStep = props => (
           onChange={e => props.update_sender({ address: e.target.value })}
         />
       </label>
+      <SenderEmailAddressWarning emailAddress={props.sender.address} />
       <input className="button button-primary" type="submit" value={MailPoet.I18n.t('next')} />
-      <a onClick={props.finish} href="#finish">{MailPoet.I18n.t('noThanksSkip')}</a>
+      <a onClick={props.finish} href="#finish" className="sender_form_small">{MailPoet.I18n.t('noThanksSkip')}</a>
     </form>
   </div>
 );

views/layout.html

@@ -66,6 +66,9 @@ jQuery('.toplevel_page_mailpoet-newsletters.menu-top-last')
 
 <%= localize({
   'ajaxFailedErrorMessage': __('An error has happened while performing a request, the server has responded with response code %d'),
+  'senderEmailAddressWarning1': _x('You might not reach the inbox of your subscribers if you use this email address.', 'In the last step, before sending a newsletter. URL: ?page=mailpoet-newsletters#/send/2'),
+  'senderEmailAddressWarning2': _x('Use an address like info@%userDomain for the Sender and put %originalSender in the the <em>Reply-to</em> field below.', 'In the last step, before sending a newsletter. URL: ?page=mailpoet-newsletters#/send/2'),
+  'senderEmailAddressWarning3': _x('Read more.'),
 }) %>
 <% block translations %><% endblock %>