Show box to create newsletter when list is empty

[MAILPOET-2383]

assets/js/src/newsletters/automatic_emails/listings.jsx

@@ -5,6 +5,7 @@ import ListingHeading from 'newsletters/listings/heading.jsx';
 import FeatureAnnouncement from 'announcements/feature_announcement.jsx';
 import { checkMailerStatus, addStatsCTAAction } from 'newsletters/listings/utils.jsx';
 import Statistics from 'newsletters/listings/statistics.jsx';
+import NewsletterTypes from 'newsletters/types.jsx';
 import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
@@ -165,6 +166,7 @@ class Listings extends React.Component {
     super(props);
     this.state = {
       eventCounts: {},
+      newslettersCount: undefined,
     };
     this.afterGetItems = this.afterGetItems.bind(this);
   }
@@ -384,6 +386,13 @@ class Listings extends React.Component {
 
         {this.renderWarning()}
 
+        {this.state.newslettersCount === 0 && (
+          <NewsletterTypes
+            filter={(type) => type.slug === 'woocommerce'}
+            showHeader={false}
+          />
+        )}
+        {this.state.newslettersCount !== 0 && (
           <Listing
             limit={window.mailpoet_listing_per_page}
             location={location}
@@ -399,8 +408,15 @@ class Listings extends React.Component {
             auto_refresh
             sort_by="updated_at"
             sort_order="desc"
-          afterGetItems={this.afterGetItems}
+            afterGetItems={(state) => {
+              if (!state.loading) {
+                const total = state.groups.reduce((count, group) => (count + group.count), 0);
+                this.setState({ newslettersCount: total });
+              }
+              this.afterGetItems(state);
+            }}
           />
+        )}
       </div>
     );
   }

assets/js/src/newsletters/listings/notification.jsx

@@ -11,6 +11,7 @@ import {
   checkCronStatus,
   checkMailerStatus,
 } from 'newsletters/listings/utils.jsx';
+import NewsletterTypes from 'newsletters/types.jsx';
 
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
@@ -171,6 +172,13 @@ class NewsletterListNotification extends React.Component {
     }).isRequired,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      newslettersCount: undefined,
+    };
+  }
+
   updateStatus = (e) => {
     // make the event persist so that we can still override the selected value
     // in the ajax callback
@@ -343,6 +351,13 @@ class NewsletterListNotification extends React.Component {
 
         <ListingTabs tab="notification" />
 
+        {this.state.newslettersCount === 0 && (
+          <NewsletterTypes
+            filter={(type) => type.slug === 'notification'}
+            showHeader={false}
+          />
+        )}
+        {this.state.newslettersCount !== 0 && (
           <Listing
             limit={window.mailpoet_listing_per_page}
             location={this.props.location}
@@ -358,8 +373,16 @@ class NewsletterListNotification extends React.Component {
             auto_refresh
             sort_by="updated_at"
             sort_order="desc"
-          afterGetItems={(state) => { checkMailerStatus(state); checkCronStatus(state); }}
+            afterGetItems={(state) => {
+              if (!state.loading) {
+                const total = state.groups.reduce((count, group) => (count + group.count), 0);
+                this.setState({ newslettersCount: total });
+              }
+              checkMailerStatus(state);
+              checkCronStatus(state);
+            }}
           />
+        )}
       </div>
     );
   }

assets/js/src/newsletters/listings/standard.jsx

@@ -15,6 +15,7 @@ import {
   checkCronStatus,
   checkMailerStatus,
 } from 'newsletters/listings/utils.jsx';
+import NewsletterTypes from 'newsletters/types.jsx';
 import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
 import { GlobalContext } from 'context/index.jsx';
 
@@ -183,6 +184,13 @@ class NewsletterListStandard extends React.Component {
     }).isRequired,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      newslettersCount: undefined,
+    };
+  }
+
   renderItem = (newsletter, actions, meta) => {
     const rowClasses = classNames(
       'manage-column',
@@ -237,6 +245,13 @@ class NewsletterListStandard extends React.Component {
 
         <ListingTabs tab="standard" />
 
+        {this.state.newslettersCount === 0 && (
+          <NewsletterTypes
+            filter={(type) => type.slug === 'standard'}
+            showHeader={false}
+          />
+        )}
+        {this.state.newslettersCount !== 0 && (
           <Listing
             limit={window.mailpoet_listing_per_page}
             location={this.props.location}
@@ -252,8 +267,16 @@ class NewsletterListStandard extends React.Component {
             auto_refresh
             sort_by="sent_at"
             sort_order="desc"
-          afterGetItems={(state) => { checkMailerStatus(state); checkCronStatus(state); }}
+            afterGetItems={(state) => {
+              if (!state.loading) {
+                const total = state.groups.reduce((count, group) => (count + group.count), 0);
+                this.setState({ newslettersCount: total });
+              }
+              checkMailerStatus(state);
+              checkCronStatus(state);
+            }}
           />
+        )}
       </div>
     );
   }

assets/js/src/newsletters/listings/welcome.jsx

@@ -13,6 +13,7 @@ import {
   checkCronStatus,
   checkMailerStatus,
 } from 'newsletters/listings/utils.jsx';
+import NewsletterTypes from 'newsletters/types.jsx';
 import SubscribersLimitNotice from 'notices/subscribers_limit_notice.jsx';
 
 import classNames from 'classnames';
@@ -166,6 +167,13 @@ class NewsletterListWelcome extends React.Component {
     }).isRequired,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      newslettersCount: undefined,
+    };
+  }
+
   updateStatus = (e) => {
     // make the event persist so that we can still override the selected value
     // in the ajax callback
@@ -359,6 +367,13 @@ class NewsletterListWelcome extends React.Component {
 
         <ListingTabs tab="welcome" />
 
+        {this.state.newslettersCount === 0 && (
+          <NewsletterTypes
+            filter={(type) => type.slug === 'welcome'}
+            showHeader={false}
+          />
+        )}
+        {this.state.newslettersCount !== 0 && (
           <Listing
             limit={window.mailpoet_listing_per_page}
             location={this.props.location}
@@ -374,8 +389,16 @@ class NewsletterListWelcome extends React.Component {
             auto_refresh
             sort_by="updated_at"
             sort_order="desc"
-          afterGetItems={(state) => { checkMailerStatus(state); checkCronStatus(state); }}
+            afterGetItems={(state) => {
+              if (!state.loading) {
+                const total = state.groups.reduce((count, group) => (count + group.count), 0);
+                this.setState({ newslettersCount: total });
+              }
+              checkMailerStatus(state);
+              checkCronStatus(state);
+            }}
           />
+        )}
       </div>
     );
   }