Merge pull request #160 from alleyinteractive/fix/single-send-templates

Fix: Single Send Templates

README.md

@@ -4,7 +4,7 @@ Contributors: alleyinteractive
 
 Tags: alleyinteractive, wp-newsletter-builder
 
-Stable tag: 0.3.31
+Stable tag: 0.3.32
 
 Requires at least: 6.2
 

hooks/useNewsletterMeta/index.ts

@@ -1,4 +1,5 @@
 import { usePostMeta } from '@alleyinteractive/block-editor-tools';
+import { useCallback } from '@wordpress/element';
 
 export interface NewsletterMeta {
   type: string;
@@ -29,6 +30,17 @@ function useNewsletterMeta() {
     nb_newsletter_sent_breaking_post_id: sentBreakingPostId = [],
   } = meta;
 
+  const resetTemplate = useCallback(() => {
+    setMeta({
+      nb_breaking_template: 0,
+      nb_breaking_content: '',
+      nb_breaking_subject: '',
+      nb_breaking_preview: '',
+      nb_breaking_list: [],
+      nb_breaking_should_send: false,
+    });
+  }, [setMeta]);
+
   return {
     meta: {
       type,
@@ -42,6 +54,7 @@ function useNewsletterMeta() {
       content,
       sentBreakingPostId,
     },
+    resetTemplate,
     setMeta,
   };
 }

plugin.php

@@ -3,7 +3,7 @@
  * Plugin Name: Newsletter Builder
  * Plugin URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Description: Interface to manage email newsletters
- * Version: 0.3.31
+ * Version: 0.3.32
  * Author: Alley Interactive
  * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Requires at least: 6.2

plugins/newsletter-from-post/components/invalid-template.tsx

@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
+interface InvalidTemplateProps {
+  invalid: boolean;
+}
+
+function InvalidTemplate({ invalid }: InvalidTemplateProps) {
+  return (
+    <>
+      {invalid ? (
+        <p style={{ color: 'red' }}>{__('Invalid Template: Template must have at least one Newsletter Single Post Block.', 'wp-newsletter-builder')}</p>
+      ) : null}
+    </>
+  );
+}
+
+export default InvalidTemplate;

plugins/newsletter-from-post/email-settings.tsx

@@ -16,8 +16,9 @@ import NewsletterSpinner from '@/components/newsletterSpinner';
 import useEmailLists, { Option } from '@/hooks/useEmailLists';
 import useNewsletterMeta from '@/hooks/useNewsletterMeta';
 
-import RequiredFields from './components/required-fields';
 import EmailTypeSelector from '../../components/emailTypeSelector';
+import InvalidTemplate from './components/invalid-template';
+import RequiredFields from './components/required-fields';
 
 interface CoreEditor {
   getEditedPostAttribute: (attribute: string) => string;
@@ -33,7 +34,8 @@ interface Window {
 
 function EmailSettings() {
   const [fetched, setFetched] = useState(false);
-  const { meta, setMeta } = useNewsletterMeta();
+  const [invalidTemplate, setInvalidTemplate] = useState(false);
+  const { meta, resetTemplate, setMeta } = useNewsletterMeta();
   const { emailListOptions, selectedEmailList } = useEmailLists();
   const manualSubject = meta.subject !== '';
   const manualPreview = meta.preview !== '';
@@ -76,13 +78,20 @@ function EmailSettings() {
     const blocks = parse(html);
     const postIndex = blocks.findIndex((block) => block.name === 'wp-newsletter-builder/post');
 
+    if (postIndex === -1) {
+      resetTemplate();
+      setInvalidTemplate(true);
+      return;
+    }
+
     blocks[postIndex] = createBlock('wp-newsletter-builder/post', {
       ...blocks[postIndex].attributes,
       postId,
     }, blocks[postIndex].innerBlocks);
 
+    setInvalidTemplate(false);
     setMeta({ nb_breaking_content: serialize(blocks) });
-  }, [postId, setMeta]);
+  }, [postId, resetTemplate, setMeta]);
 
   const areRequiredFieldsSet = meta.type === ''
     || meta.template === ''
@@ -120,7 +129,12 @@ function EmailSettings() {
       >
         <EmailTypeSelector
           contentHandler={contentHandler}
-          typeHandler={(newType) => { setMeta({ nb_breaking_email_type: newType }); }}
+          typeHandler={
+            (newType) => {
+              setMeta({ nb_breaking_email_type: newType });
+              setInvalidTemplate(false);
+            }
+          }
           imageHandler={(newImage) => { setMeta({ nb_breaking_header_img: newImage }); }}
           typeValue={meta.type}
           templateHandler={(newTemplate) => { setMeta({ nb_breaking_template: newTemplate }); }}
@@ -181,7 +195,11 @@ function EmailSettings() {
             onChange={(value) => { setMeta({ nb_breaking_should_send: value }); }}
             disabled={areRequiredFieldsSet}
           />
+        </div>
+        <div>
+          <h2 className="components-panel__body-title">{__('Newsletter Validation', 'wp-newsletter-builder')}</h2>
           <RequiredFields meta={meta} postTitle={postTitle} postExcerpt={postExcerpt} />
+          <InvalidTemplate invalid={invalidTemplate} />
         </div>
       </PanelBody>
     </PluginSidebar>