Add sending method field

[MAILPOET-2693]

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

@@ -2,6 +2,6 @@ export { default as Basics } from './basics/basics';
 export { default as Advanced } from './advanced/advanced';
 export { default as KeyActivation } from './key_activation/key_activation';
 export { default as SendWith } from './send_with/send_with';
-export { default as OtherSendingMethods } from './send_with/other_sending_methods';
+export { default as OtherSendingMethods } from './send_with/other/other_sending_methods';
 export { default as SignupConfirmation } from './signup_confirmation/signup_confirmation';
 export { default as WooCommerce } from './woo_commerce/woo_commerce';

assets/js/src/settings/pages/send_with/other/other_sending_methods.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import SendingMethod from './sending_method';
+
+export default function OtherSendingMethods() {
+  return (
+    <div className="mailpoet-settings-grid">
+      <SendingMethod />
+    </div>
+  );
+}

assets/js/src/settings/pages/send_with/other/sending_method.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Label, Inputs } from 'settings/components';
+import { t, onChange } from 'common/functions';
+import { useSetting } from 'settings/store/hooks';
+
+export default function SendingMethod() {
+  const [provider, setProvider] = useSetting('smtp_provider');
+  const [, setMethod] = useSetting('mta', 'method');
+  const updateProvider = (value: 'server' | 'manual' | 'AmazonSES' | 'SendGrid') => {
+    setProvider(value);
+    switch (value) {
+      case 'server': setMethod('PHPMail'); break;
+      case 'manual': setMethod('SMTP'); break;
+      case 'AmazonSES': setMethod('AmazonSES'); break;
+      case 'SendGrid': setMethod('AmazonSES'); break;
+      default:
+    }
+  };
+
+  return (
+    <>
+      <Label title={t('method')} htmlFor="mailpoet_smtp_method" />
+      <Inputs>
+        <select id="mailpoet_smtp_method" value={provider} onChange={onChange(updateProvider)}>
+          <option value="server">{t('hostOption')}</option>
+          <option value="manual">{t('smtpOption')}</option>
+          <optgroup label={t('selectProvider')}>
+            <option value="AmazonSES">Amazon SES</option>
+            <option value="SendGrid">SendGrid</option>
+          </optgroup>
+        </select>
+      </Inputs>
+    </>
+  );
+}

assets/js/src/settings/pages/send_with/other_sending_methods.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function OtherSendingMethods() {
-  return (
-    <div className="mailpoet-settings-grid">Sending methods form</div>
-  );
-}