Create send test email action

[MAILPOET-2693]

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

@@ -1,64 +1,30 @@
 import React from 'react';
-import MailPoet from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
 
 import HelpTooltip from 'help-tooltip';
 import { GlobalContext } from 'context';
 import { t, onChange } from 'common/functions';
 import { Label, Inputs } from 'settings/components';
-import { useSetting } from 'settings/store/hooks';
+import { useSetting, useAction } from 'settings/store/hooks';
 
 export default function TestSending() {
   const [email, setEmail] = React.useState<string>((window as any).mailpoet_current_user_email);
   const [mailer] = useSetting('mta');
   const [fromAddress] = useSetting('sender', 'address');
   const { notices } = React.useContext<any>(GlobalContext);
-  const sendTestEmail = async (recipient) => {
+  const sendTestEmail = useAction('sendTestEmail');
+
+  const sendEmail = async () => {
     if (!fromAddress) {
-      return notices.error(<p>{t('cantSendEmail')}</p>, { scroll: true, static: true });
-    }
-
-    MailPoet.Modal.loading(true);
-    try {
-      await MailPoet.Ajax.post({
-        api_version: (window as any).mailpoet_api_version,
-        endpoint: 'mailer',
-        action: 'send',
-        data: {
-          mailer,
-          newsletter: {
-            subject: t('testEmailSubject'),
-            body: {
-              html: `<p>${t('testEmailBody')}</p>`,
-              text: t('testEmailBody'),
-            },
-          },
-          subscriber: recipient,
-        },
-      });
-      notices.success(<p>{t('emailSent')}</p>, { scroll: true });
-      trackTestEmailSent(mailer.method, true);
-    } catch (res) {
-      if (res.errors.length > 0) {
-        notices.error(
-          res.errors.map((err) => <p key={err.message}>{err.message}</p>),
-          { scroll: true }
-        );
+      notices.error(<p>{t('cantSendEmail')}</p>, { scroll: true, static: true });
+    } else {
+      const res: any = await sendTestEmail(email, mailer);
+      if (res.success) {
+        notices.success(<p>{t('emailSent')}</p>, { scroll: true });
+      } else {
+        notices.error(res.error.map((message) => <p key={message}>{message}</p>), { scroll: true });
       }
-      trackTestEmailSent(mailer.method, false);
     }
-    MailPoet.Modal.loading(false);
-  };
-
-  const trackTestEmailSent = (method, success) => {
-    MailPoet.trackEvent(
-      'User has sent a test email from Settings',
-      {
-        'Sending was successful': !!success,
-        'Sending method type': method,
-        'MailPoet Free version': (window as any).mailpoet_version,
-      }
-    );
   };
 
   return (
@@ -76,7 +42,7 @@ export default function TestSending() {
           type="button"
           id="mailpoet_mta_test"
           className="button-secondary"
-          onClick={() => sendTestEmail(email)}
+          onClick={sendEmail}
         >
           {t('sendTestEmail')}
         </button>

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

@@ -1,8 +1,9 @@
 import { select } from '@wordpress/data';
 import MailPoet from 'mailpoet';
+import { t } from 'common/functions';
 import { STORE_NAME } from '.';
 import {
-  Action, KeyActivationState, MssStatus, PremiumStatus, PremiumInstallationStatus,
+  Action, KeyActivationState, MssStatus, PremiumStatus, PremiumInstallationStatus, Settings,
 } from './types';
 
 export function setSetting(path: string[], value: any): Action {
@@ -203,3 +204,26 @@ export function* reinstall() {
   yield { type: 'TRACK_REINSTALLED' };
   return { type: 'SAVE_DONE' };
 }
+
+export function* sendTestEmail(recipient: string, mailer: Settings['mta']) {
+  MailPoet.Modal.loading(true);
+  const res = yield {
+    type: 'CALL_API',
+    endpoint: 'mailer',
+    action: 'send',
+    data: {
+      mailer,
+      newsletter: {
+        subject: t('testEmailSubject'),
+        body: {
+          html: `<p>${t('testEmailBody')}</p>`,
+          text: t('testEmailBody'),
+        },
+      },
+      subscriber: recipient,
+    },
+  };
+  yield { type: 'TRACK_TEST_EMAIL_SENT', success: res.success, method: mailer.method };
+  MailPoet.Modal.loading(false);
+  return res;
+}

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

@@ -38,3 +38,15 @@ export function TRACK_REINSTALLED() {
     { 'MailPoet Free version': MailPoet.version }
   );
 }
+
+export function TRACK_TEST_EMAIL_SENT({ success, method }) {
+  console.log({ success, method });
+  MailPoet.trackEvent(
+    'User has sent a test email from Settings',
+    {
+      'Sending was successful': !!success,
+      'Sending method type': method,
+      'MailPoet Free version': MailPoet.version,
+    }
+  );
+}