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

@@ -29,3 +29,7 @@
   display: inline-block;
   margin: 2px;
 }
+
+.mailpoet-settings-inputs .regular-text p {
+  font-size: 14px;
+}

assets/js/src/settings/pages/basics.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function Basics() {
-  return <p>Basics!</p>;
-}

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>
+    </>
+  );
+}

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>
+  );
+}

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';
+}

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'),