feat: handle campaign validation via post meta field

Automattic · Apr 13, 2020 · 58d090d · 58d090d
1 parent 193edcb
commit 58d090d
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 106 deletions.
diff --git a/src/editor/editor/index.js b/src/editor/editor/index.js
@@ -4,47 +4,46 @@
 import { compose } from '@wordpress/compose';
 import apiFetch from '@wordpress/api-fetch';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import { getEditPostPayload } from '../utils';
 import './style.scss';
 
 export default compose( [
 	withDispatch( dispatch => {
-		const { lockPostSaving, unlockPostSaving } = dispatch( 'core/editor' );
-		return { lockPostSaving, unlockPostSaving };
+		const { lockPostSaving, unlockPostSaving, editPost } = dispatch( 'core/editor' );
+		return { lockPostSaving, unlockPostSaving, editPost };
 	} ),
 	withSelect( select => {
-		const { getCurrentPostId } = select( 'core/editor' );
-		return { postId: getCurrentPostId() };
+		const { getCurrentPostId, getEditedPostAttribute } = select( 'core/editor' );
+		const { getActiveGeneralSidebarName } = select( 'core/edit-post' );
+		const meta = getEditedPostAttribute( 'meta' );
+		return {
+			postId: getCurrentPostId(),
+			isReady: Boolean( meta.is_ready_to_send ),
+			activeSidebarName: getActiveGeneralSidebarName(),
+		};
 	} ),
 ] )( props => {
-	const [ campaign, setCampaign ] = useState();
 	useEffect(() => {
-		const { recipients, settings, status } = campaign || {};
-		const { list_id: listId } = recipients || {};
-		const { from_name: senderName, reply_to: senderEmail } = settings || {};
-		let canPublish = true;
-		if ( 'sent' === status || 'sending' === status ) {
-			canPublish = false;
+		// Fetch initially if the sidebar is be hidden.
+		if ( props.activeSidebarName !== 'edit-post/document' ) {
+			apiFetch( { path: `/newspack-newsletters/v1/mailchimp/${ props.postId }` } ).then( result => {
+				props.editPost( getEditPostPayload( result.campaign ) );
+			} );
 		}
-		if ( ! listId ) {
-			canPublish = false;
-		}
-		if ( ! senderName || ! senderName.length || ! senderEmail || ! senderEmail.length ) {
-			canPublish = false;
-		}
-		if ( canPublish ) {
+	}, []);
+
+	useEffect(() => {
+		if ( props.isReady ) {
 			props.unlockPostSaving( 'newspack-newsletters-post-lock' );
 		} else {
 			props.lockPostSaving( 'newspack-newsletters-post-lock' );
 		}
-		const { postId } = props;
-		apiFetch( { path: `/newspack-newsletters/v1/mailchimp/${ postId }` } ).then( result =>
-			setCampaign( result.campaign )
-		);
-	}, []);
+	}, [ props.isReady ]);
+
 	return null;
 } );
diff --git a/src/editor/index.js b/src/editor/index.js
@@ -3,7 +3,7 @@
  */
 import domReady from '@wordpress/dom-ready';
 import { unregisterBlockStyle } from '@wordpress/blocks';
-import { PluginDocumentSettingPanel, PluginPrePublishPanel } from '@wordpress/edit-post';
+import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
 import { __ } from '@wordpress/i18n';
 import { addFilter } from '@wordpress/hooks';
 import { registerPlugin } from '@wordpress/plugins';
@@ -13,7 +13,6 @@ 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( () => {
@@ -47,15 +46,6 @@ registerPlugin( 'newspack-newsletters-sidebar', {
 	icon: null,
 } );
 
-registerPlugin( 'newspack-newsletters-pre-publish', {
-	render: () => (
-		<PluginPrePublishPanel>
-			<PrePublishSlot />
-		</PluginPrePublishPanel>
-	),
-	icon: null,
-} );
-
 registerPlugin( 'newspack-newsletters-edit', {
 	render: Editor,
 } );
diff --git a/src/editor/pre-publish-slot/index.js b/src/editor/pre-publish-slot/index.js
diff --git a/src/editor/sidebar/index.js b/src/editor/sidebar/index.js
@@ -3,7 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { withSelect, subscribe } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch, subscribe } from '@wordpress/data';
 import { Component, Fragment } from '@wordpress/element';
 import {
 	Button,
@@ -14,6 +15,11 @@ import {
 	Spinner,
 	TextControl,
 } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { getEditPostPayload } from '../utils';
 import './style.scss';
 
 class Sidebar extends Component {
@@ -63,20 +69,6 @@ class Sidebar extends Component {
 		};
 		apiFetch( params ).then( result => this.setStateFromAPIResponse( result ) );
 	};
-	sendMailchimpCampaign = () => {
-		const { senderEmail, senderName } = this.state;
-		this.setState( { inFlight: true } );
-		const { postId } = this.props;
-		const params = {
-			path: `/newspack-newsletters/v1/mailchimp/${ postId }/send`,
-			data: {
-				sender_email: senderEmail,
-				sender_name: senderName,
-			},
-			method: 'POST',
-		};
-		apiFetch( params ).then( result => this.setStateFromAPIResponse( result ) );
-	};
 	setList = listId => {
 		this.setState( { inFlight: true } );
 		const { postId } = this.props;
@@ -100,6 +92,8 @@ class Sidebar extends Component {
 		apiFetch( params ).then( result => this.setStateFromAPIResponse( result ) );
 	};
 	setStateFromAPIResponse = result => {
+		this.props.editPost( getEditPostPayload( result.campaign ) );
+
 		this.setState( {
 			campaign: result.campaign,
 			lists: result.lists.lists,
@@ -227,7 +221,13 @@ class Sidebar extends Component {
 	}
 }
 
-export default withSelect( select => {
-	const { getCurrentPostId, isPublishingPost, isSavingPost } = select( 'core/editor' );
-	return { postId: getCurrentPostId(), isPublishingPost, isSavingPost };
-} )( Sidebar );
+export default compose( [
+	withSelect( select => {
+		const { getCurrentPostId, isPublishingPost, isSavingPost } = select( 'core/editor' );
+		return { postId: getCurrentPostId(), isPublishingPost, isSavingPost };
+	} ),
+	withDispatch( dispatch => {
+		const { editPost } = dispatch( 'core/editor' );
+		return { editPost };
+	} ),
+] )( Sidebar );
diff --git a/src/editor/utils.js b/src/editor/utils.js
@@ -0,0 +1,24 @@
+const validateCampaign = campaign => {
+	const { recipients, settings, status } = campaign || {};
+	const { list_id: listId } = recipients || {};
+	const { from_name: senderName, reply_to: senderEmail } = settings || {};
+	let canPublish = true;
+	if ( 'sent' === status || 'sending' === status ) {
+		canPublish = false;
+	}
+	if ( ! listId ) {
+		canPublish = false;
+	}
+	if ( ! senderName || ! senderName.length || ! senderEmail || ! senderEmail.length ) {
+		canPublish = false;
+	}
+	return canPublish;
+};
+
+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 ),
+	},
+} );