From cdbb8d7c62e66a128d803225a2a63c769dac1d19 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Mon, 21 Jan 2019 16:03:37 +0100
Subject: [PATCH] Display sender warning on settings page

[MAILPOET-1573]
---
 assets/js/src/settings/default_sender.jsx | 79 +++++++++++++++++++++++
 assets/js/src/settings/settings.jsx       | 13 ++++
 assets/js/src/webpack_admin_index.jsx     |  1 +
 views/settings.html                       |  3 +
 views/settings/basics.html                | 35 ++--------
 5 files changed, 103 insertions(+), 28 deletions(-)
 create mode 100644 assets/js/src/settings/default_sender.jsx
 create mode 100644 assets/js/src/settings/settings.jsx

diff --git a/assets/js/src/settings/default_sender.jsx b/assets/js/src/settings/default_sender.jsx
new file mode 100644
index 0000000000..f89f89d1b0
--- /dev/null
+++ b/assets/js/src/settings/default_sender.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { partial } from 'underscore';
+import MailPoet from 'mailpoet';
+import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
+
+class DefaultSender extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      senderAddress: props.senderAddress,
+      senderName: props.senderName,
+      replyToName: props.replyToName,
+      replyToAddress: props.replyToAddress,
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(field, e) {
+    const newState = {};
+    newState[field] = e.target.value;
+    this.setState(newState);
+  }
+
+  render() {
+    return (<React.Fragment>
+      <p>
+        <label htmlFor="settings[from_name]">{MailPoet.I18n.t('from')}</label>
+        <input
+          type="text"
+          id="settings[from_name]"
+          name="sender[name]"
+          value={this.state.senderName}
+          onChange={partial(this.onChange, 'senderName')}
+          placeholder={MailPoet.I18n.t('yourName')}
+        />
+        <input
+          type="email"
+          id="settings[from_email]"
+          name="sender[address]"
+          value={this.state.senderAddress}
+          onChange={partial(this.onChange, 'senderAddress')}
+          placeholder="from@mydomain.com"
+        />
+      </p>
+      <p>
+        <label htmlFor="settings[reply_name]">{MailPoet.I18n.t('replyTo')}</label>
+        <input
+          type="text"
+          id="settings[reply_name]"
+          name="reply_to[name]"
+          value={this.state.replyToName}
+          onChange={partial(this.onChange, 'replyToName')}
+          placeholder={MailPoet.I18n.t('yourName')}
+        />
+        <input
+          type="email"
+          id="settings[reply_email]"
+          name="reply_to[address]"
+          value={this.state.replyToAddress}
+          onChange={partial(this.onChange, 'replyToAddress')}
+          placeholder="reply_to@mydomain.com"
+        />
+      </p>
+      <div className="regular-text">
+        <SenderEmailAddressWarning emailAddress={this.state.senderAddress} />
+      </div>
+    </React.Fragment>);
+  }
+}
+
+DefaultSender.propTypes = {
+  senderAddress: PropTypes.string.isRequired,
+  senderName: PropTypes.string.isRequired,
+  replyToAddress: PropTypes.string.isRequired,
+  replyToName: PropTypes.string.isRequired,
+};
+
+export default DefaultSender;
diff --git a/assets/js/src/settings/settings.jsx b/assets/js/src/settings/settings.jsx
new file mode 100644
index 0000000000..30c066ff72
--- /dev/null
+++ b/assets/js/src/settings/settings.jsx
@@ -0,0 +1,13 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+const DefaultSender = require('settings/default_sender.jsx').default;
+
+ReactDOM.render(
+  React.createElement(DefaultSender, {
+    senderAddress: window.mailpoet_settings_sender_adddress,
+    senderName: window.mailpoet_settings_sender_name,
+    replyToAddress: window.mailpoet_settings_reply_to_address,
+    replyToName: window.mailpoet_settings_reply_to_name,
+  }),
+  document.getElementById('settings_sender_container')
+);
diff --git a/assets/js/src/webpack_admin_index.jsx b/assets/js/src/webpack_admin_index.jsx
index 5e3855c3c0..44ab385897 100644
--- a/assets/js/src/webpack_admin_index.jsx
+++ b/assets/js/src/webpack_admin_index.jsx
@@ -7,6 +7,7 @@
 import 'subscribers/subscribers.jsx'; // side effect - renders ReactDOM to document
 import 'newsletters/newsletters.jsx'; // side effect - renders ReactDOM to window
 import 'segments/segments.jsx'; // side effect - renders ReactDOM to document
+import 'settings/settings.jsx'; // side effect - renders ReactDOM to document
 import 'forms/forms.jsx'; // side effect - renders ReactDOM to document
 import 'settings/tabs.js'; // side effect - assigns to MailPoet.Router, executes code on doc ready
 import 'help/help.jsx'; // side effect - renders ReactDOM to document
diff --git a/views/settings.html b/views/settings.html
index 9c77cd9762..af307c6f3c 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -220,5 +220,8 @@
     'announcementHeader': __('Get notified when someone subscribes'),
     'announcementParagraph1': __('It’s been a popular feature request from our users, we hope you get lots of emails about all your new subscribers!'),
     'announcementParagraph2': __('(You can turn this feature off if it’s too many emails.)'),
+    'yourName': __('Your name'),
+    'from': __('From'),
+    'replyTo': __('Reply-to'),
   }) %>
 <% endblock %>
diff --git a/views/settings/basics.html b/views/settings/basics.html
index 842abd7f18..6442df58d9 100644
--- a/views/settings/basics.html
+++ b/views/settings/basics.html
@@ -10,34 +10,13 @@
         </p>
       </th>
       <td>
-        <!-- default from name & email -->
-        <p>
-          <label for="settings[from_name]"><%= __('From') %></label>
-          <input type="text"
-            id="settings[from_name]"
-            name="sender[name]"
-            value="<%= settings.sender.name %>"
-            placeholder="<%= __('Your name') %>" />
-          <input type="email"
-            id="settings[from_email]"
-            name="sender[address]"
-            value="<%= settings.sender.address %>"
-            placeholder="from@mydomain.com" />
-        </p>
-        <!-- default reply_to name & email -->
-        <p>
-          <label for="settings[reply_name]"><%= __('Reply-to') %></label>
-          <input type="text"
-            id="settings[reply_name]"
-            name="reply_to[name]"
-            value="<%= settings.reply_to.name %>"
-            placeholder="<%= __('Your name') %>" />
-          <input type="email"
-            id="settings[reply_email]"
-            name="reply_to[address]"
-            value="<%= settings.reply_to.address %>"
-            placeholder="reply_to@mydomain.com" />
-        </p>
+        <div id="settings_sender_container"></div>
+        <script type="text/javascript">
+          var mailpoet_settings_sender_name = "<%= settings.sender.name %>";
+          var mailpoet_settings_sender_adddress = "<%= settings.sender.address %>";
+          var mailpoet_settings_reply_to_name = "<%= settings.reply_to.name %>";
+          var mailpoet_settings_reply_to_address = "<%= settings.reply_to.address %>";
+        </script>
       </td>
     </tr>
     <!-- email addresses receiving notifications -->