Use React notices in set FROM address modal

[MAILPOET-2804]

assets/js/src/common/set_from_address_modal.tsx

@@ -3,6 +3,7 @@ import ReactStringReplace from 'react-string-replace';
 import jQuery from 'jquery';
 import MailPoet from 'mailpoet';
 import Modal from 'common/modal/modal.jsx';
+import { GlobalContext } from 'context';
 
 const mailPoetApiVersion = (window as any).mailpoet_api_version as string;
 
@@ -30,9 +31,22 @@ const getErrorMessage = (error: any|null): string => {
   return error.message || MailPoet.I18n.t('setFromAddressEmailUnknownError');
 };
 
-const getSuccessMessage = (): string => MailPoet.I18n.t('setFromAddressEmailSuccess').replace(
+const getSuccessMessage = (): JSX.Element => (
+  <p>
+    { ReactStringReplace(
+      MailPoet.I18n.t('setFromAddressEmailSuccess'),
       /\[link\](.*?)\[\/link\]/g,
-  '<a href="?page=mailpoet-settings#basics" rel="noopener noreferrer">$1</a>'
+      (match) => (
+        <a
+          key="setFromAddressModalBasicsTabLink"
+          href="?page=mailpoet-settings#basics"
+          rel="noopener noreferrer"
+        >
+          {match}
+        </a>
+      )
+    )}
+  </p>
 );
 
 const removeUnauthorizedEmailNotices = () => {
@@ -52,6 +66,7 @@ type Props = {
 
 const SetFromAddressModal = ({ onRequestClose }: Props) => {
   const [address, setAddress] = useState(null);
+  const { notices } = React.useContext<any>(GlobalContext);
 
   return (
     <Modal
@@ -109,7 +124,7 @@ const SetFromAddressModal = ({ onRequestClose }: Props) => {
               await handleSave(address);
               onRequestClose();
               removeUnauthorizedEmailNotices();
-              MailPoet.Notice.success(getSuccessMessage());
+              notices.success(getSuccessMessage(), { timeout: false });
             } catch (e) {
               const error = e.errors && e.errors[0] ? e.errors[0] : null;
               const message = getErrorMessage(error);

assets/js/src/old_settings/premium_tab/premium_tab.jsx

@@ -3,6 +3,8 @@ import React, { useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import MailPoet from 'mailpoet';
 import SetFromAddressModal from 'common/set_from_address_modal.tsx';
+import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
 import KeyMessages from 'old_settings/premium_tab/messages/key_messages.jsx';
 import { MssStatus, MssMessages } from 'old_settings/premium_tab/messages/mss_messages.jsx';
 import { PremiumStatus, PremiumMessages } from 'old_settings/premium_tab/messages/premium_messages.jsx';
@@ -279,13 +281,17 @@ if (container) {
     return mssActive ? MssStatus.KEY_VALID_MSS_ACTIVE : MssStatus.KEY_VALID_MSS_NOT_ACTIVE;
   };
 
-  ReactDOM.render(
+  const App = () => (
+    <GlobalContext.Provider value={useGlobalContextValue(window)}>
+      <Notices />
       <PremiumTab
         activationKey={window.mailpoet_activation_key}
         premiumStatus={getPremiumStatus()}
         mssStatus={getMssStatus()}
         premiumPluginActive={!!window.mailpoet_premium_version}
-    />,
-    container
+      />
+    </GlobalContext.Provider>
   );
+
+  ReactDOM.render(<App />, container);
 }