Fix PR remarks, encapsulate logic in a React component [MAILPOET-1627]

assets/js/src/announcements/feature_announcement.jsx

@@ -3,36 +3,70 @@ import classNames from 'classnames';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
 
-let beamerLoaded = false;
+class FeatureAnnouncement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.loadBeamer = this.loadBeamer.bind(this);
+    this.beamerCallback = this.beamerCallback.bind(this);
 
-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);
+    this.state = {
+      showDot: props.hasNews,
+      beamerLoaded: typeof window.Beamer !== 'undefined',
+    };
   }
-};
 
-const FeatureAnnouncement = (props) => {
-  const buttonClasses = classNames(
-    'button mailpoet_feature_announcement_button',
-    props.hasNews ? 'mailpoet_feature_announcement_dot' : ''
-  );
+  loadBeamer(e) {
+    e.preventDefault();
+    if (!this.state.beamerLoaded) {
+      window.beamer_config = {
+        product_id: 'VvHbhYWy7118',
+        selector: 'beamer-selector',
+        language: window.mailpoet_user_locale,
+        callback: this.beamerCallback,
+      };
+      MailPoet.Modal.loading(true);
+      this.setState({ beamerLoaded: true });
+      window.mailpoet_feature_announcement_has_news = false;
+      const s = document.createElement('script');
+      s.type = 'text/javascript';
+      s.src = 'https://app.getbeamer.com/js/beamer-embed.js';
+      document.getElementsByTagName('body')[0].appendChild(s);
+    }
+  }
 
-  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>
-  );
-};
+  beamerCallback() {
+    this.setState({ showDot: false });
+    MailPoet.Modal.loading(false);
+    window.Beamer.show();
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'settings',
+      action: 'set',
+      data: { last_announcement_seen: Math.floor(Date.now() / 1000) },
+    });
+  }
+
+  render() {
+    const buttonClasses = classNames(
+      'button mailpoet_feature_announcement_button',
+      this.state.showDot ? 'mailpoet_feature_announcement_dot' : ''
+    );
+    return (
+      <div className="mailpoet_feature_announcement">
+        <a
+          href=""
+          id="beamer-selector"
+          onClick={this.loadBeamer}
+          className={buttonClasses}
+          title={MailPoet.I18n.t('whatsNew')}
+        >
+          <span className="mailpoet_feature_announcement_icon dashicons dashicons-carrot" />
+        </a>
+      </div>
+
+    );
+  }
+}
 
 FeatureAnnouncement.propTypes = {
   hasNews: PropTypes.bool,

lib/Config/Menu.php

@@ -34,6 +34,7 @@ if(!defined('ABSPATH')) exit;
 
 class Menu {
   const MAIN_PAGE_SLUG = 'mailpoet-newsletters';
+  const LAST_ANNOUNCEMENT_DATE = '2018-12-05 10:00:00';
 
   public $renderer;
   private $access_control;
@@ -582,11 +583,8 @@ class Menu {
     $data['premium_plugin_active'] = License::getLicense();
     $data['is_woocommerce_active'] = class_exists('WooCommerce');
 
-    // If the last_announcement_date is newer than the user's last_announcement_seen setting,
-    // a small red dot is added on top of the What's New announcement button
-    $last_announcement_date = strtotime('2018-12-05 10:00:00');
     $data['feature_announcement_has_news'] = empty($data['settings']['last_announcement_seen'])
-      || $data['settings']['last_announcement_seen'] < $last_announcement_date;
+      || $data['settings']['last_announcement_seen'] < strtotime(self::LAST_ANNOUNCEMENT_DATE);
 
     $data['automatic_emails'] = array(
       array(

views/newsletters.html

@@ -24,6 +24,7 @@
     var mailpoet_woocommerce_active = <%= json_encode(is_woocommerce_active) %>;
     var mailpoet_automatic_emails = <%= json_encode(automatic_emails) %>;
     var mailpoet_feature_announcement_has_news = <%= json_encode(feature_announcement_has_news) %>;
+    var mailpoet_user_locale = '<%= get_locale() %>';
     var mailpoet_in_app_announcements = mailpoet_settings.in_app_announcements;
     var mailpoet_free_welcome_emails_image = '<%= cdn_url('in-app-announcements/hello-illustration-for-welcome-emails.20181121-1440.png') %>';
     var mailpoet_congratulations_success_image = '<%= cdn_url('newsletter/congrat-illu-success.20181121-1440.png') %>';
@@ -315,7 +316,7 @@
     'freeWelcomeEmailsHeading': __('Welcome Emails are now free for everyone'),
     'freeWelcomeEmailsParagraph': __('Say “Hello!” automatically to all your new subscribers. They’ll appreciate the extra touch.'),
 
-    'whatsNew': __("What's new"),
+    'whatsNew': __("What’s new"),
 
     'congratulationsSendSuccessHeader': __('Congratulations, your newsletter is being sent!'),
     'congratulationsScheduleSuccessHeader': __('Congratulations, your newsletter is scheduled to be sent.'),
@@ -340,25 +341,4 @@
   });
 </script>
 <% endif %>
-
-<script>
-// Beamer
-var beamer_config = {
-  product_id : "VvHbhYWy7118",
-  selector : "beamer-selector",
-  language: '<%= get_locale() %>',
-  callback : function(){
-    MailPoet.Modal.loading(false);
-    Beamer.show();
-    $('.mailpoet_feature_announcement_dot').removeClass('mailpoet_feature_announcement_dot');
-    MailPoet.Ajax.post({
-      api_version: window.mailpoet_api_version,
-      endpoint: 'settings',
-      action: 'set',
-      data: { 'last_announcement_seen': Math.floor(Date.now() / 1000) },
-    });
-  }
-};
-</script>
-
 <% endblock %>