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"),