Show notice in Beamer when MailPoet update is available

[MAILPOET-2038]

assets/css/src/components/_featureAnnouncement.scss

@@ -23,3 +23,34 @@
   top: -4px;
   width: 10px;
 }
+
+.mailpoet_in_beamer_update_notice {
+  background: #f00;
+  bottom: 0;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 20px;
+  margin: 0;
+  padding: 20px 10px;
+  position: fixed;
+  right: -400px;
+  text-align: center;
+  transition: right .2s ease-in;
+  width: 400px;
+  z-index: 10000000000; // really has to be this high
+
+  a {
+    color: #fff;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+
+  .beamer_show & {
+    right: 0;
+  }
+}

assets/js/src/announcements/feature_announcement.jsx

@@ -1,9 +1,35 @@
+import jQuery from 'jquery';
 import React from 'react';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
+import ReactStringReplace from 'react-string-replace';
 
 class FeatureAnnouncement extends React.Component {
+  static updateLastAnnouncementSeenValue() {
+    const data = { last_announcement_seen: Math.floor(Date.now() / 1000) };
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'user_flags',
+      action: 'set',
+      data,
+    });
+  }
+
+  static showPluginUpdateNotice() {
+    if (!window.mailpoet_update_available || document.getElementById('mailpoet_update_notice')) {
+      return;
+    }
+    const updateMailPoetNotice = ReactStringReplace(
+      MailPoet.I18n.t('updateMailPoetNotice'),
+      /\[link\](.*?)\[\/link\]/,
+      match => `<a href="update-core.php">${match}</a>`
+    ).join('');
+    jQuery('#beamerOverlay').append(
+      `<p id="mailpoet_update_notice" class="mailpoet_in_beamer_update_notice">${updateMailPoetNotice}</p>`
+    );
+  }
+
   constructor(props) {
     super(props);
     this.loadBeamer = this.loadBeamer.bind(this);
@@ -53,13 +79,8 @@ class FeatureAnnouncement extends React.Component {
     this.setState({ showDot: false });
     MailPoet.Modal.loading(false);
     window.Beamer.show();
-    const data = { last_announcement_seen: Math.floor(Date.now() / 1000) };
-    MailPoet.Ajax.post({
-      api_version: window.mailpoet_api_version,
-      endpoint: 'user_flags',
-      action: 'set',
-      data,
-    });
+    FeatureAnnouncement.updateLastAnnouncementSeenValue();
+    FeatureAnnouncement.showPluginUpdateNotice();
   }
 
   render() {

lib/Config/Env.php

@@ -42,6 +42,7 @@ class Env {
     self::$file = $file;
     self::$path = dirname(self::$file);
     self::$plugin_name = 'mailpoet';
+    self::$plugin_path = 'mailpoet/mailpoet.php';
     self::$base_url = WPFunctions::get()->pluginsUrl('', $file);
     self::$views_path = self::$path . '/views';
     self::$assets_path = self::$path . '/assets';

lib/Config/Menu.php

@@ -677,6 +677,7 @@ class Menu {
     $data['tracking_enabled'] = $this->settings->get('tracking.enabled');
     $data['premium_plugin_active'] = License::getLicense();
     $data['is_woocommerce_active'] = $this->woocommerce_helper->isWooCommerceActive();
+    $data['is_mailpoet_update_available'] = array_key_exists(Env::$plugin_path, $this->wp->getPluginUpdates());
 
     $user_id = $data['current_wp_user']['ID'];
 

lib/WP/Functions.php

@@ -209,6 +209,10 @@ class Functions {
     return get_plugin_page_hook($plugin_page, $parent_page);
   }
 
+  function getPluginUpdates() {
+    return get_plugin_updates();
+  }
+
   function getPlugins($plugin_folder = '') {
     return get_plugins($plugin_folder);
   }

views/newsletters.html

@@ -4,6 +4,7 @@
   <div id="newsletters_container"></div>
 
   <script type="text/javascript">
+    var mailpoet_update_available = <%= is_mailpoet_update_available ? 'true' : 'false' %>
     var mailpoet_listing_per_page = <%= items_per_page %>;
     var mailpoet_display_nps_poll = <%= settings.display_nps_poll ? 'true' : 'false' %>;
     var mailpoet_segments = <%= json_encode(segments) %>;
@@ -319,6 +320,7 @@
     'introDone': _x('Done', 'A label on a button'),
 
     'whatsNew': __("What’s new"),
+    'updateMailPoetNotice': __('[link]Update MailPoet[/link] to see the latest changes'),
 
     'congratulationsSendSuccessHeader': __('Congratulations, your newsletter is being sent!'),
     'congratulationsScheduleSuccessHeader': __('Congratulations, your newsletter is scheduled to be sent.'),