Add from address authorization modal

[MAILPOET-2681]

assets/js/src/settings/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import jQuery from 'jquery';
+import 'parsleyjs';
 import ReactDOM from 'react-dom';
 import { HashRouter } from 'react-router-dom';
 import { GlobalContext, useGlobalContextValue } from 'context';

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

@@ -1,9 +1,11 @@
 import React, { useContext } from 'react';
 import MailPoet from 'mailpoet';
-import { useSelector, useAction } from 'settings/store/hooks';
+import { useSelector, useAction, useSetting } from 'settings/store/hooks';
 import { GlobalContext } from 'context';
 import { t } from 'common/functions';
+import { MssStatus } from 'settings/store/types';
 import { Label, Inputs } from 'settings/components';
+import SetFromAddressModal from 'common/set_from_address_modal';
 import { KeyMessages, MssMessages, PremiumMessages } from './messages';
 
 export default function KeyActivation() {
@@ -14,6 +16,8 @@ export default function KeyActivation() {
   const verifyPremiumKey = useAction('verifyPremiumKey');
   const installPremiumPlugin = useAction('installPremiumPlugin');
   const activatePremiumPlugin = useAction('activatePremiumPlugin');
+  const [senderAddress] = useSetting('sender', 'address');
+  const [unauthorizedAddresses] = useSetting('authorized_emails_addresses_check');
 
   const verifyKey = async (event) => {
     if (!state.key) {
@@ -27,9 +31,15 @@ export default function KeyActivation() {
       premiumInstallationStatus: null,
     });
     MailPoet.Modal.loading(true);
-    await verifyMssKey(state.key, isTrusted);
+    const mssStatus: MssStatus = (await verifyMssKey(state.key, isTrusted)) as any;
     await verifyPremiumKey(state.key);
     MailPoet.Modal.loading(false);
+    if (isTrusted) {
+      const authorizedAddressNeeded = !senderAddress || unauthorizedAddresses;
+      if (mssStatus === 'valid_mss_active' && authorizedAddressNeeded) {
+        setState({ showFromAddressModal: true });
+      }
+    }
   };
 
   return (
@@ -81,6 +91,11 @@ export default function KeyActivation() {
           </div>
         )}
       </Inputs>
+      {state.showFromAddressModal && (
+        <SetFromAddressModal
+          onRequestClose={() => setState({ showFromAddressModal: false })}
+        />
+      )}
     </div>
   );
 }

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

@@ -1,7 +1,7 @@
 import { select } from '@wordpress/data';
 import MailPoet from 'mailpoet';
 import { STORE_NAME } from '.';
-import { Action, KeyActivationState } from './types';
+import { Action, KeyActivationState, MssStatus } from './types';
 
 export function setSetting(path: string[], value: any): Action {
   return { type: 'SET_SETTING', path, value };
@@ -88,7 +88,8 @@ export function* verifyMssKey(key: string, activateMssIfKeyValid: boolean) {
   } else {
     fields.mssStatus = 'valid_mss_not_active';
   }
-  return updateKeyActivationState(fields);
+  yield updateKeyActivationState(fields);
+  return fields.mssStatus;
 }
 
 export function* verifyPremiumKey(key: string) {

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

@@ -27,6 +27,7 @@ export default function makeDefaultState(window: any): State {
     premiumStatus,
     mssMessage: null,
     premiumMessage: null,
+    showFromAddressModal: false,
     premiumInstallationStatus: null,
     key: data.premium.premium_key || data.mta.mailpoet_api_key,
   };

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

@@ -163,6 +163,7 @@ export default function normalizeSettings(data: any): Settings {
         data: asIs,
       }),
     }),
+    authorized_emails_addresses_check: asIs,
   });
   return settingsSchema(data) as Settings;
 }

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

@@ -162,6 +162,14 @@ export type Settings = {
       data: any
     }
   }
+  authorized_emails_addresses_check: null | {
+    invalid_sender_address?: string
+    invalid_senders_in_newsletters?: Array<{
+      'subject': string
+      'sender_address': string
+      'newsletter_id': number | string
+    }>
+  }
 }
 type Segment = {
   id: string
@@ -209,6 +217,7 @@ export type KeyActivationState = {
   mssStatus: MssStatus
   mssMessage: string
   premiumInstallationStatus: PremiumInstallationStatus
+  showFromAddressModal: boolean
 }
 
 export type State = {