feat: display validation errors in pre-publish slot

src/editor/editor/index.js

@@ -23,7 +23,7 @@ export default compose( [
 		const meta = getEditedPostAttribute( 'meta' );
 		return {
 			postId: getCurrentPostId(),
-			isReady: Boolean( meta.is_ready_to_send ),
+			isReady: ( meta.campaign_validation_errors || [] ).length === 0,
 			activeSidebarName: getActiveGeneralSidebarName(),
 		};
 	} ),

src/editor/index.js

@@ -3,7 +3,7 @@
  */
 import domReady from '@wordpress/dom-ready';
 import { unregisterBlockStyle } from '@wordpress/blocks';
-import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+import { PluginDocumentSettingPanel, PluginPrePublishPanel } from '@wordpress/edit-post';
 import { __ } from '@wordpress/i18n';
 import { addFilter } from '@wordpress/hooks';
 import { registerPlugin } from '@wordpress/plugins';
@@ -13,6 +13,7 @@ import { registerPlugin } from '@wordpress/plugins';
  */
 import Sidebar from './sidebar/';
 import Editor from './editor/';
+import PrePublishSlot from './pre-publish-slot';
 
 /* Unregister core block styles that are unsupported in emails */
 domReady( () => {
@@ -46,6 +47,15 @@ registerPlugin( 'newspack-newsletters-sidebar', {
 	icon: null,
 } );
 
+registerPlugin( 'newspack-newsletters-pre-publish', {
+	render: () => (
+		<PluginPrePublishPanel>
+			<PrePublishSlot />
+		</PluginPrePublishPanel>
+	),
+	icon: null,
+} );
+
 registerPlugin( 'newspack-newsletters-edit', {
 	render: Editor,
 } );

src/editor/pre-publish-slot/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+export default withSelect( select => {
+	const { getEditedPostAttribute } = select( 'core/editor' );
+	const meta = getEditedPostAttribute( 'meta' );
+	return {
+		validationErrors: meta.campaign_validation_errors || [],
+	};
+} )( ( { validationErrors } ) => {
+	if ( validationErrors.length ) {
+		return (
+			<ul>
+				{ validationErrors.map( ( message, index ) => (
+					<li key={ index }>{ message }</li>
+				) ) }
+			</ul>
+		);
+	}
+	return __( 'Newsletter is ready to send', 'newspack-newsletters' );
+} );

src/editor/utils.js

@@ -1,24 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 const validateCampaign = campaign => {
 	const { recipients, settings, status } = campaign || {};
 	const { list_id: listId } = recipients || {};
 	const { from_name: senderName, reply_to: senderEmail } = settings || {};
-	let canPublish = true;
+
+	const messages = [];
 	if ( 'sent' === status || 'sending' === status ) {
-		canPublish = false;
+		messages.push( __( 'Newsletter has already been sent', 'newspack-newsletters' ) );
 	}
 	if ( ! listId ) {
-		canPublish = false;
+		messages.push(
+			__( 'A Mailchimp list must be selected before publishing.', 'newspack-newsletters' )
+		);
 	}
-	if ( ! senderName || ! senderName.length || ! senderEmail || ! senderEmail.length ) {
-		canPublish = false;
+	if ( ! senderName || senderName.length < 1 ) {
+		messages.push( __( 'Sender name must be set.', 'newspack-newsletters' ) );
 	}
-	return canPublish;
+	if ( ! senderEmail || senderEmail.length < 1 ) {
+		messages.push( __( 'Sender email must be set.', 'newspack-newsletters' ) );
+	}
+
+	return messages;
 };
 
 export const getEditPostPayload = campaign => ( {
 	meta: {
 		// This meta field does not have to be registered on the back end,
 		// as it is not used there.
-		is_ready_to_send: validateCampaign( campaign ),
+		campaign_validation_errors: validateCampaign( campaign ),
 	},
 } );