From f8d88c70a424e92b9b92ba0f17d6f1799ea49a0e Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Wed, 11 Mar 2020 14:23:04 +0100
Subject: [PATCH] Add DefaultSender fields

I could not reuse DefaultSender component from old settings
because it doesn't use the Redux store.
[MAILPOET-2677]
---
 assets/css/src/settings.scss                  |  4 ++
 assets/js/src/settings/pages/basics.tsx       |  5 --
 .../settings/pages/basics/default_sender.tsx  | 66 +++++++++++++++++++
 assets/js/src/settings/pages/basics/index.tsx | 12 ++++
 assets/js/src/settings/store/selectors.ts     |  4 ++
 views/settings.html                           | 10 ++-
 6 files changed, 93 insertions(+), 8 deletions(-)
 delete mode 100644 assets/js/src/settings/pages/basics.tsx
 create mode 100644 assets/js/src/settings/pages/basics/default_sender.tsx
 create mode 100644 assets/js/src/settings/pages/basics/index.tsx

diff --git a/assets/css/src/settings.scss b/assets/css/src/settings.scss
index 7e7d400d70..6b9fee6b33 100644
--- a/assets/css/src/settings.scss
+++ b/assets/css/src/settings.scss
@@ -29,3 +29,7 @@
   display: inline-block;
   margin: 2px;
 }
+
+.mailpoet-settings-inputs .regular-text p {
+  font-size: 14px;
+}
diff --git a/assets/js/src/settings/pages/basics.tsx b/assets/js/src/settings/pages/basics.tsx
deleted file mode 100644
index 6013c7a848..0000000000
--- a/assets/js/src/settings/pages/basics.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function Basics() {
-  return <p>Basics!</p>;
-}
diff --git a/assets/js/src/settings/pages/basics/default_sender.tsx b/assets/js/src/settings/pages/basics/default_sender.tsx
new file mode 100644
index 0000000000..7b87be61b3
--- /dev/null
+++ b/assets/js/src/settings/pages/basics/default_sender.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import { Label, Inputs } from 'settings/components';
+import { useSetting, useSettingSetter, useSelector } from 'settings/store/hooks';
+import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
+
+export default function DefaultSender() {
+  const isMssActive = useSelector('isMssActive')();
+  const senderName = useSetting('sender', 'name');
+  const setSenderName = useSettingSetter('sender', 'name');
+  const senderEmail = useSetting('sender', 'address');
+  const setSenderEmail = useSettingSetter('sender', 'address');
+  const replyToName = useSetting('reply_to', 'name');
+  const setReplyToName = useSettingSetter('reply_to', 'name');
+  const replyToEmail = useSetting('reply_to', 'address');
+  const setReplyToEmail = useSettingSetter('reply_to', 'address');
+  return (
+    <>
+      <Label
+        title={MailPoet.I18n.t('defaultSenderTitle')}
+        description={MailPoet.I18n.t('defaultSenderDescription')}
+        htmlFor="sender-name"
+      />
+      <Inputs>
+        <label htmlFor="sender-name">{MailPoet.I18n.t('from')}</label>
+        <input
+          type="text"
+          id="sender-name"
+          placeholder={MailPoet.I18n.t('yourName')}
+          data-automation-id="settings-page-from-name-field"
+          value={senderName}
+          onChange={(event) => setSenderName(event.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="from@mydomain.com"
+          data-automation-id="settings-page-from-email-field"
+          value={senderEmail}
+          onChange={(event) => setSenderEmail(event.target.value)}
+        />
+        <div className="regular-text">
+          <SenderEmailAddressWarning
+            emailAddress={senderEmail}
+            mssActive={isMssActive}
+          />
+        </div>
+        <label htmlFor="reply_to-name">Reply-to</label>
+        <input
+          type="text"
+          id="reply_to-name"
+          placeholder={MailPoet.I18n.t('yourName')}
+          data-automation-id="settings-page-from-name-field"
+          value={replyToName}
+          onChange={(event) => setReplyToName(event.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="reply_to@mydomain.com"
+          data-automation-id="settings-page-from-email-field"
+          value={replyToEmail}
+          onChange={(event) => setReplyToEmail(event.target.value)}
+        />
+      </Inputs>
+    </>
+  );
+}
diff --git a/assets/js/src/settings/pages/basics/index.tsx b/assets/js/src/settings/pages/basics/index.tsx
new file mode 100644
index 0000000000..bae72a8f4b
--- /dev/null
+++ b/assets/js/src/settings/pages/basics/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { SaveButton } from 'settings/components';
+import DefaultSender from './default_sender';
+
+export default function Basics() {
+  return (
+    <div className="mailpoet-settings-grid">
+      <DefaultSender />
+      <SaveButton />
+    </div>
+  );
+}
diff --git a/assets/js/src/settings/store/selectors.ts b/assets/js/src/settings/store/selectors.ts
index 478f88eb09..7c308a2d26 100644
--- a/assets/js/src/settings/store/selectors.ts
+++ b/assets/js/src/settings/store/selectors.ts
@@ -28,3 +28,7 @@ export function hasWooCommerce(state: State) {
 export function isNewUser(state: State) {
   return state.flags.newUser;
 }
+
+export function isMssActive(state: State) {
+  return _.get(state, 'mta.method') === 'MailPoet';
+}
diff --git a/views/settings.html b/views/settings.html
index 7a9680ee5f..41137b9687 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -35,13 +35,17 @@
     'saveSettings': __('Save settings'),
     'settingsSaved': __('Settings saved'),
 
+    'defaultSenderTitle': __('Default sender'),
+    'defaultSenderDescription': __('These email addresses will be selected by default for each new email.'),
+    'from': __('From'),
+    'yourName': __('Your name'),
+    'replyTo': __('Reply-to'),
+
+
     'reinstallConfirmation': __('Are you sure? All of your MailPoet data will be permanently erased (newsletters, statistics, subscribers, etc.).'),
     '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'),
 
     'premiumTabActivationKeyLabel': __('Activation Key', 'mailpoet'),
     'premiumTabDescription': __('This key is used to validate your free or paid subscription. Paying customers will enjoy automatic upgrades of their Premium plugin and access to faster support.', 'mailpoet'),