Display sender warning on send page

[MAILPOET-1573]

assets/js/src/common/sender_email_address_warning.jsx

@@ -49,7 +49,7 @@ const badDomains = [
   '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'
+  '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 }) => {

assets/js/src/newsletters/send/sender_address_field.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import FormFieldText from 'form/fields/text.jsx';
+import PropTypes from 'prop-types';
+import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
+
+class SenderField extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      emailAddress: props.item.sender_address,
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(event) {
+    this.setState({ emailAddress: event.target.value });
+    this.props.onValueChange(event);
+  }
+
+  render() {
+    return (<React.Fragment>
+      <FormFieldText
+        {...this.props}
+        onValueChange={this.onChange}
+      />
+      <div className="regular-text">
+        <SenderEmailAddressWarning emailAddress={this.state.emailAddress} />
+      </div>
+    </React.Fragment>);
+  }
+}
+
+SenderField.propTypes = {
+  item: PropTypes.shape({
+    sender_address: PropTypes.string.isRequired,
+  }).isRequired,
+  onValueChange: PropTypes.func,
+};
+
+SenderField.defaultProps = {
+  onValueChange: function onValueChange() {
+    // no-op
+  },
+};
+
+export default SenderField;

assets/js/src/newsletters/send/standard.jsx

@@ -5,6 +5,7 @@ import Hooks from 'wp-js-hooks';
 import PropTypes from 'prop-types';
 
 import DateTime from 'newsletters/send/date_time.jsx';
+import SenderField from 'newsletters/send/sender_address_field.jsx';
 
 const currentTime = window.mailpoet_current_time || '00:00';
 const defaultDateTime = `${window.mailpoet_current_date} 00:00:00`;
@@ -156,7 +157,8 @@ let fields = [
       },
       {
         name: 'sender_address',
-        type: 'text',
+        type: 'reactComponent',
+        component: SenderField,
         placeholder: MailPoet.I18n.t('senderAddressPlaceholder'),
         validation: {
           'data-parsley-required': true,

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

@@ -3,7 +3,7 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 import jQuery from 'jquery';
 
-import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx'
+import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
 
 const WelcomeWizardSenderStep = props => (
   <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">