Refactor send email preview component to remove hardcoded text and add point for extensibility

MAILPOET-6431

packages/js/email-editor/src/components/preview/send-preview-email.tsx

@@ -4,7 +4,7 @@
 import { Button, Modal, TextControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { check, Icon } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	useEffect,
 	useRef,
@@ -13,13 +13,23 @@ import {
 } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { isEmail } from '@wordpress/url';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
-import { SendingPreviewStatus, storeName } from '../../store';
+import {
+	SendingPreviewStatus,
+	storeName,
+	editorCurrentPostType,
+} from '../../store';
 import { recordEvent, recordEventOnce } from '../../events';
 
+const sendingMethodConfigurationLink = applyFilters(
+	'mailpoet_email_editor_check_sending_method_configuration_link',
+	'admin.php?page=mailpoet-settings#mta'
+) as string;
+
 function RawSendPreviewEmail() {
 	const sendToRef = useRef( null );
 
@@ -34,6 +44,7 @@ function RawSendPreviewEmail() {
 		isSendingPreviewEmail,
 		sendingPreviewStatus,
 		isModalOpened,
+		errorMessage,
 	} = useSelect( ( select ) => select( storeName ).getPreviewState(), [] );
 
 	const handleSendPreviewEmail = () => {
@@ -66,13 +77,26 @@ function RawSendPreviewEmail() {
 		>
 			{ sendingPreviewStatus === SendingPreviewStatus.ERROR ? (
 				<div className="mailpoet-send-preview-modal-notice-error">
+					<p>
 						{ __(
 							'Sorry, we were unable to send this email.',
 							'mailpoet'
 						) }
+					</p>
+
+					<strong>
+						{ errorMessage &&
+							sprintf(
+								// translators: %s is an error message.
+								__( 'Error: %s', 'mailpoet' ),
+								errorMessage
+							) }
+					</strong>
+
 					<ul>
 						<li>
-							{ createInterpolateElement(
+							{ sendingMethodConfigurationLink &&
+								createInterpolateElement(
 									__(
 										'Please check your <link>sending method configuration</link> with your hosting provider.',
 										'mailpoet'
@@ -81,7 +105,9 @@ function RawSendPreviewEmail() {
 										link: (
 											// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
 											<a
-											href="admin.php?page=mailpoet-settings#mta"
+												href={
+													sendingMethodConfigurationLink
+												}
 												target="_blank"
 												rel="noopener noreferrer"
 												onClick={ () =>
@@ -104,10 +130,7 @@ function RawSendPreviewEmail() {
 									link: (
 										// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
 										<a
-											href={ new URL(
+											href={ `https://account.mailpoet.com/?s=1&g=1&utm_source=mailpoet_email_editor&utm_medium=plugin&utm_source_platform=${ editorCurrentPostType }` }
-												'free-plan',
-												'https://www.mailpoet.com/'
-											).toString() }
 											key="sign-up-for-free"
 											target="_blank"
 											rel="noopener noreferrer"

packages/js/email-editor/src/store/actions.ts

@@ -209,6 +209,9 @@ export function* requestSendingNewsletterPreview( email: string ) {
 			state: {
 				sendingPreviewStatus: SendingPreviewStatus.ERROR,
 				isSendingPreviewEmail: false,
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				errorMessage: JSON.stringify( errorResponse?.error ),
 			},
 		};
 	}

packages/js/email-editor/src/store/types.ts

@@ -202,6 +202,7 @@ export type State = {
 		isModalOpened: boolean;
 		isSendingPreviewEmail: boolean;
 		sendingPreviewStatus: SendingPreviewStatus | null;
+		errorMessage?: string;
 	};
 	personalizationTags: {
 		list: PersonalizationTag[];