diff --git a/mailpoet/assets/js/src/newsletters/send.tsx b/mailpoet/assets/js/src/newsletters/send.tsx
index f5aed45674..1e28c534bd 100644
--- a/mailpoet/assets/js/src/newsletters/send.tsx
+++ b/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;
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<
.
- {window.mailpoet_mss_key_pending_approval && (
-
- {ReactStringReplace(
- MailPoet.I18n.t('pendingKeyApprovalNotice'),
- /\[link\](.*?)\[\/link\]/g,
- (match) => (
-
- {match}
-
- ),
- )}
-
+
+ {mssKeyPendingApproval && (
+
)}
{showPremiumModal && (
@@ -805,4 +802,6 @@ class NewsletterSendComponent extends Component<
}
NewsletterSendComponent.contextType = GlobalContext;
+initSettingsStore(window);
+
export const NewsletterSend = withRouter(NewsletterSendComponent);
diff --git a/mailpoet/assets/js/src/newsletters/send/pending_newsletter_message.tsx b/mailpoet/assets/js/src/newsletters/send/pending_newsletter_message.tsx
index cc2a7b1828..d1b034d5b1 100644
--- a/mailpoet/assets/js/src/newsletters/send/pending_newsletter_message.tsx
+++ b/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;
+ const recheckKey = async (e: MouseEvent) => {
e.preventDefault();
const state = getKeyActivationState();
toggleLoadingState(true);
@@ -54,4 +56,11 @@ export const PendingNewsletterMessage = ({
)}
);
-};
+}
+
+PendingNewsletterMessage.displayName = 'PendingNewsletterMessage';
+
+const PendingNewsletterMessageWithBoundary = withBoundary(
+ PendingNewsletterMessage,
+);
+export { PendingNewsletterMessageWithBoundary as PendingNewsletterMessage };
diff --git a/mailpoet/views/newsletters.html b/mailpoet/views/newsletters.html
index 910b5724c5..cbc12d6c4b 100644
--- a/mailpoet/views/newsletters.html
+++ b/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) %>;
+
<% 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"),