Add Activate and Cancel buttons

[MAILPOET-2693]

assets/css/src/settings.scss

@@ -38,6 +38,11 @@
     font-size: 14px;
   }
 
+  .mailpoet_mta_setup_save, .mailpoet_mta_setup_cancel {
+    display: inline-block;
+    margin: 0px 3px;
+    font-weight: bold;
+  }
 }
 
 .mailpoet_woocommerce_editor_button {

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { t } from 'common/functions';
+import { useAction } from 'settings/store/hooks';
+
+export default function ActivateOrCancel() {
+  const saveSettings = useAction('saveSettings');
+  const loadSettings = useAction('loadSettings');
+  const history = useHistory();
+  const activate = async () => {
+    await saveSettings();
+    history.push('/mta');
+  };
+  const cancel = async (e) => {
+    e.preventDefault();
+    await loadSettings();
+    history.push('/mta');
+  };
+  return (
+    <p>
+      <button
+        type="button"
+        onClick={activate}
+        className="mailpoet_mta_setup_save button button-primary"
+      >
+        {t('activate')}
+      </button>
+      <a
+        href=""
+        onClick={cancel}
+        className="mailpoet_mta_setup_cancel"
+      >
+        {t('orCancel')}
+      </a>
+    </p>
+  );
+}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import SendingMethod from './sending_method';
 import SPF from './spf';
 import TestSending from './test_sending';
+import ActivateOrCancel from './activate_or_cancel';
 
 export default function OtherSendingMethods() {
   return (
@@ -10,6 +11,7 @@ export default function OtherSendingMethods() {
 
       <SPF />
       <TestSending />
+      <ActivateOrCancel />
     </div>
   );
 }

assets/js/src/settings/store/actions.ts

@@ -227,3 +227,15 @@ export function* sendTestEmail(recipient: string, mailer: Settings['mta']) {
   MailPoet.Modal.loading(false);
   return res;
 }
+
+export function* loadSettings() {
+  const { success, error, res } = yield {
+    type: 'CALL_API',
+    endpoint: 'settings',
+    action: 'get',
+  };
+  if (!success) {
+    return { type: 'SAVE_FAILED', error };
+  }
+  return setSettings(res.data);
+}