Store the test email sending state in Redux store

[MAILPOET-2693]

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

@@ -5,30 +5,22 @@ import HelpTooltip from 'help-tooltip';
 import { GlobalContext } from 'context';
 import { t, onChange } from 'common/functions';
 import { Label, Inputs } from 'settings/components';
-import { useSetting, useAction } from 'settings/store/hooks';
+import { useSetting, useAction, useSelector } from 'settings/store/hooks';
+import Loading from 'common/loading';
+import Notice from 'notices/notice';
 
 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 { state, error } = useSelector('getTestEmailState')();
   const sendTestEmail = useAction('sendTestEmail');
 
-  const sendEmail = async () => {
-    if (!fromAddress) {
-      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 });
-      }
-    }
-  };
-
   return (
     <>
+      {state === 'sending' && <Loading />}
+      {state === 'success' && <Notice type="success" scroll><p>{t('emailSent')}</p></Notice>}
+      {state === 'failure' && <Notice type="error" scroll><p>{error.map((message) => <p key={message}>{message}</p>)}</p></Notice>}
       <Label title={t('testSending')} htmlFor="mailpoet_mta_test_email" />
       <Inputs>
         <input
@@ -42,7 +34,7 @@ export default function TestSending() {
           type="button"
           id="mailpoet_mta_test"
           className="button-secondary"
-          onClick={sendEmail}
+          onClick={() => sendTestEmail(fromAddress, mailer)}
         >
           {t('sendTestEmail')}
         </button>

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

@@ -206,7 +206,7 @@ export function* reinstall() {
 }
 
 export function* sendTestEmail(recipient: string, mailer: Settings['mta']) {
-  MailPoet.Modal.loading(true);
+  yield { type: 'START_TEST_EMAIL_SENDING' };
   const res = yield {
     type: 'CALL_API',
     endpoint: 'mailer',
@@ -224,8 +224,8 @@ export function* sendTestEmail(recipient: string, mailer: Settings['mta']) {
     },
   };
   yield { type: 'TRACK_TEST_EMAIL_SENT', success: res.success, method: mailer.method };
-  MailPoet.Modal.loading(false);
-  return res;
+  if (!res.success) return { type: 'TEST_EMAIL_FAILED', error: res.error };
+  return { type: 'TEST_EMAIL_SUCCESS' };
 }
 
 export function* loadSettings() {

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

@@ -30,6 +30,12 @@ export default function createReducer(defaultValue: State) {
           );
         }
         return { ...state, keyActivation };
+      case 'START_TEST_EMAIL_SENDING':
+        return { ...state, testEmail: { state: 'sending', error: null } };
+      case 'TEST_EMAIL_SUCCESS':
+        return { ...state, testEmail: { state: 'success', error: null } };
+      case 'TEST_EMAIL_FAILED':
+        return { ...state, testEmail: { state: 'failure', error: action.error } };
       default:
         return state;
     }

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

@@ -41,8 +41,11 @@ export default function makeDefaultState(window: any): State {
     key: data.premium.premium_key || data.mta.mailpoet_api_key,
     inProgress: false,
   };
+  const testEmail = {
+    state: 'none', error: null,
+  };
   return {
-    data, flags, save, keyActivation, segments, pages, paths, hosts,
+    data, flags, save, keyActivation, segments, pages, paths, hosts, testEmail,
   };
 }
 

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

@@ -80,3 +80,7 @@ export function getAmazonSesOptions(state: State) {
 export function getSendGridOptions(state: State) {
   return state.hosts.smtp.SendGrid;
 }
+
+export function getTestEmailState(state: State) {
+  return state.testEmail;
+}

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

@@ -252,6 +252,11 @@ export type KeyActivationState = {
   inProgress: boolean
 }
 
+export type TestEmailState =
+  | 'none'
+  | 'sending'
+  | 'success'
+  | 'failure'
 
 export type State = {
   data: Settings
@@ -272,7 +277,11 @@ export type State = {
     inProgress: boolean
     error: any
   }
-  keyActivation: KeyActivationState,
+  testEmail: {
+    state: TestEmailState
+    error: any
+  }
+  keyActivation: KeyActivationState
   hosts: Hosts
 }
 
@@ -284,3 +293,6 @@ export type Action =
   | { type: 'SAVE_DONE' }
   | { type: 'SAVE_FAILED'; error: any }
   | { type: 'UPDATE_KEY_ACTIVATION_STATE', fields: Partial<KeyActivationState> }
+  | { type: 'START_TEST_EMAIL_SENDING' }
+  | { type: 'TEST_EMAIL_SUCCESS' }
+  | { type: 'TEST_EMAIL_FAILED', error: any }