Add pending approval message and functionality to send page

Show a message to user about their pending approval and
allow them to update the status in place via ajax

[MAILPOET-4633]

mailpoet/assets/js/src/newsletters/send.tsx

@@ -25,6 +25,8 @@ import { extractEmailDomain } from 'common/functions';
 import { mapFilterType } from '../analytics';
 import { PremiumModal } from '../common/premium_modal';
 import { NewsLetter, NewsletterType } from './models';
+import { initStore as initSettingsStore } from '../settings/store';
+import { PendingNewsletterMessage } from './send/pending_newsletter_message';
 
 const automaticEmails = window.mailpoet_woocommerce_automatic_emails || {};
 
@@ -50,6 +52,7 @@ type NewsletterSendComponentState = {
   thumbnailPromise?: Promise<unknown>;
   showPremiumModal: boolean;
   validationError?: string | JSX.Element;
+  mssKeyPendingApproval: boolean;
 };
 const getTimingValueForTracking = (emailOpts: NewsLetter['options']) =>
   emailOpts.afterTimeType === 'immediate'
@@ -136,11 +139,10 @@ class NewsletterSendComponent extends Component<
       loading: true,
       thumbnailPromise: null,
       showPremiumModal: false,
+      mssKeyPendingApproval: window.mailpoet_mss_key_pending_approval,
     };
   }
 
-  displayName: 'NewsletterSend';
-
   componentDidMount() {
     // safe to ignore since even on rejection the state is updated
     void this.loadItem(this.props.match.params.id).always(() => {
@@ -687,10 +689,16 @@ class NewsletterSendComponent extends Component<
 
   closePremiumModal = () => this.setState({ showPremiumModal: false });
 
+  toggleLoadingState = (loading: boolean): void => this.setState({ loading });
+
+  updatePendingApprovalState = (mssKeyPendingApproval: boolean): void =>
+    this.setState({ mssKeyPendingApproval });
+
   render() {
     const {
       showPremiumModal,
       item: { status, queue, type, options },
+      mssKeyPendingApproval,
     } = this.state;
     const isPaused = status === 'sending' && queue && queue.status === 'paused';
     const sendButtonOptions = this.getSendButtonOptions();
@@ -698,7 +706,7 @@ class NewsletterSendComponent extends Component<
 
     const sendingDisabled = !!(
       window.mailpoet_subscribers_limit_reached ||
-      window.mailpoet_mss_key_pending_approval ||
+      mssKeyPendingApproval ||
       this.state.validationError !== undefined
     );
 
@@ -773,23 +781,12 @@ class NewsletterSendComponent extends Component<
               </a>
               .
             </p>
-            {window.mailpoet_mss_key_pending_approval && (
-              <div className="mailpoet_error">
-                {ReactStringReplace(
-                  MailPoet.I18n.t('pendingKeyApprovalNotice'),
-                  /\[link\](.*?)\[\/link\]/g,
-                  (match) => (
-                    <a
-                      key="pendingKeyApprovalNoticeLink"
-                      href="https://account.mailpoet.com/authorization"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {match}
-                    </a>
-                  ),
-                )}
-              </div>
+
+            {mssKeyPendingApproval && (
+              <PendingNewsletterMessage
+                toggleLoadingState={this.toggleLoadingState}
+                updatePendingState={this.updatePendingApprovalState}
+              />
             )}
 
             {showPremiumModal && (
@@ -805,4 +802,6 @@ class NewsletterSendComponent extends Component<
 }
 
 NewsletterSendComponent.contextType = GlobalContext;
+initSettingsStore(window);
+
 export const NewsletterSend = withRouter(NewsletterSendComponent);

mailpoet/assets/js/src/newsletters/send/pending_newsletter_message.tsx

@@ -1,21 +1,23 @@
-import { useAction, useSelector } from '../../settings/store/hooks';
+import { MouseEvent, useState } from 'react';
 import ReactStringReplace from 'react-string-replace';
-import { getLinkRegex, t } from 'common';
-import { useState } from '@wordpress/element';
+import { getLinkRegex, t, withBoundary } from 'common';
+import { useAction, useSelector } from '../../settings/store/hooks';
 
-export const PendingNewsletterMessage = ({
+function PendingNewsletterMessage({
   toggleLoadingState,
   updatePendingState,
 }: {
   toggleLoadingState: (loading: boolean) => void;
   updatePendingState: (approved: boolean) => void;
-}) => {
+}) {
   const getKeyActivationState = useSelector('getKeyActivationState');
   const getSettings = useSelector('getSettings');
   const [showRefreshButton, keepShowingRefresh] = useState(true);
   //
-  const verifyMssKey = useAction('verifyMssKey');
-  const recheckKey = async (e) => {
+  const verifyMssKey = useAction('verifyMssKey') as unknown as (
+    key: string,
+  ) => PromiseLike<void>;
+  const recheckKey = async (e: MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
     const state = getKeyActivationState();
     toggleLoadingState(true);
@@ -54,4 +56,11 @@ export const PendingNewsletterMessage = ({
         )}
     </div>
   );
-};
+}
+
+PendingNewsletterMessage.displayName = 'PendingNewsletterMessage';
+
+const PendingNewsletterMessageWithBoundary = withBoundary(
+  PendingNewsletterMessage,
+);
+export { PendingNewsletterMessageWithBoundary as PendingNewsletterMessage };

mailpoet/views/newsletters.html

@@ -49,6 +49,7 @@
       var mailpoet_authorized_emails = <%= json_encode(authorized_emails) %>;
       var mailpoet_verified_sender_domains = <%= json_encode(verified_sender_domains) %>;
       var mailpoet_all_sender_domains = <%= json_encode(all_sender_domains) %>;
+      var mailpoet_settings = <%= json_encode(settings) %>;
     <% endautoescape %>
     var mailpoet_beacon_articles = [
       '57fdc312c697911f2d324fd7',
@@ -59,6 +60,7 @@
     ];
 
     var mailpoet_newsletters_templates_recently_sent_count = <%= json_decode(newsletters_templates_recently_sent_count) %>;
+
   </script>
 <% endblock %>
 
@@ -306,6 +308,7 @@
     'finalNewsletterStep': __('Final Step: Last Details'),
     'saveDraftAndClose': __('Save as draft and close'),
     'pendingKeyApprovalNotice': __('You’ll soon be able to send once our team reviews your account. In the meantime, you can send previews to [link]your authorized emails[/link].'),
+    'pendingKeyApprovalNoticeRefresh': __('If you have already received approval email, click [link]here[/link] to update the status.'),
     'orSimply': __('or simply'),
     'goBackToDesign': __('go back to the Design page'),
     'websiteTimeIs': __("Your website’s time is"),