Add Beamer for a What's New announcement [MAILPOET-1627]

assets/js/src/announcements/feature_announcement.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
+
+let beamerLoaded = false;
+
+const loadBeamer = (e) => {
+  let s;
+  e.preventDefault();
+  if (!beamerLoaded) {
+    MailPoet.Modal.loading(true);
+    beamerLoaded = true;
+    window.mailpoet_feature_announcement_has_news = false;
+    s = document.createElement('script');
+    s.type = 'text/javascript';
+    s.src = 'https://app.getbeamer.com/js/beamer-embed.js';
+    document.getElementsByTagName('body')[0].appendChild(s);
+  }
+};
+
+const FeatureAnnouncement = (props) => {
+  const buttonClasses = classNames(
+    'button mailpoet_feature_announcement_button',
+    props.hasNews ? 'mailpoet_feature_announcement_dot' : ''
+  );
+
+  return (
+    <div className="mailpoet_feature_announcement">
+      <a href="" id="beamer-selector" onClick={loadBeamer} className={buttonClasses} title={MailPoet.I18n.t('whatsNew')}>
+        <span className="mailpoet_feature_announcement_icon dashicons dashicons-carrot" />
+      </a>
+    </div>
+  );
+};
+
+FeatureAnnouncement.propTypes = {
+  hasNews: PropTypes.bool,
+};
+
+FeatureAnnouncement.defaultProps = {
+  hasNews: false,
+};
+
+export default FeatureAnnouncement;

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

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
 import ListingHeading from 'newsletters/listings/heading.jsx';
+import FeatureAnnouncement from 'announcements/feature_announcement.jsx';
 
 import {
   MailerMixin,
@@ -335,6 +336,8 @@ const NewsletterListNotification = createReactClass({ // eslint-disable-line rea
       <div>
         <ListingHeading />
 
+        <FeatureAnnouncement hasNews={window.mailpoet_feature_announcement_has_news} />
+
         <ListingTabs tab="notification" />
 
         <Listing

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

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
 import ListingHeading from 'newsletters/listings/heading.jsx';
+import FeatureAnnouncement from 'announcements/feature_announcement.jsx';
 
 import {
   QueueMixin,
@@ -114,6 +115,8 @@ const NewsletterListNotificationHistory = createReactClass({ // eslint-disable-l
       <div>
         <ListingHeading />
 
+        <FeatureAnnouncement hasNews={window.mailpoet_feature_announcement_has_news} />
+
         <ListingTabs tab="notification" />
 
         <Link

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

@@ -9,6 +9,7 @@ import confirmAlert from 'common/confirm_alert.jsx';
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
 import ListingHeading from 'newsletters/listings/heading.jsx';
+import FeatureAnnouncement from 'announcements/feature_announcement.jsx';
 
 import {
   QueueMixin,
@@ -227,6 +228,8 @@ const NewsletterListStandard = createReactClass({ // eslint-disable-line react/p
       <div>
         <ListingHeading />
 
+        <FeatureAnnouncement hasNews={window.mailpoet_feature_announcement_has_news} />
+
         <ListingTabs tab="standard" />
 
         <Listing

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

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
 import ListingHeading from 'newsletters/listings/heading.jsx';
+import FeatureAnnouncement from 'announcements/feature_announcement.jsx';
 
 import {
   StatisticsMixin,
@@ -340,6 +341,8 @@ const NewsletterListWelcome = createReactClass({ // eslint-disable-line react/pr
       <div>
         <ListingHeading />
 
+        <FeatureAnnouncement hasNews={window.mailpoet_feature_announcement_has_news} />
+
         <ListingTabs tab="welcome" />
 
         <Listing