Add DefaultSender fields

I could not reuse DefaultSender component from old settings
because it doesn't use the Redux store.
[MAILPOET-2677]

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