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

assets/css/src/admin.styl

@@ -34,6 +34,7 @@
 @require 'newsletter_templates'
 @require 'welcome_wizard'
 @require 'intro'
+@require 'feature_announcement'
 @require 'in_app_announcements'
 @require 'newsletter_congratulate.styl'
 @require 'discounts'

assets/css/src/feature_announcement.styl

@@ -0,0 +1,22 @@
+.mailpoet_feature_announcement
+  float: right
+
+.mailpoet_feature_announcement_button
+  padding: 0 !important
+  position: relative
+
+.mailpoet_feature_announcement_icon
+  font-size: 1.5em
+  line-height: 1.5em
+  margin: 0 0.2em
+
+.mailpoet_feature_announcement_dot::before
+  content: ""
+  display: block
+  position: absolute
+  top: -4px
+  right: -4px
+  height: 10px
+  width: 10px
+  background: #d54e21
+  border-radius: 10px

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

lib/Config/Menu.php

@@ -582,6 +582,12 @@ 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['automatic_emails'] = array(
       array(
         'slug' => 'woocommerce',

lib/Twig/I18n.php

@@ -2,6 +2,8 @@
 
 namespace MailPoet\Twig;
 
+use MailPoet\Config\Localizer;
+
 if(!defined('ABSPATH')) exit;
 
 class I18n extends \Twig_Extension {
@@ -22,6 +24,7 @@ class I18n extends \Twig_Extension {
       '__' => 'translate',
       '_n' => 'pluralize',
       '_x' => 'translateWithContext',
+      'get_locale' => 'getLocale',
       'date' => 'date'
     );
 
@@ -67,6 +70,11 @@ class I18n extends \Twig_Extension {
     return call_user_func_array('_x', $this->setTextDomain($args));
   }
 
+  function getLocale() {
+    $localizer = new Localizer;
+    return $localizer->locale();
+  }
+
   function date() {
     $args = func_get_args();
     $date = (isset($args[0])) ? $args[0] : null;

views/newsletters.html

@@ -23,6 +23,7 @@
     var mailpoet_premium_active = <%= json_encode(premium_plugin_active) %>;
     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_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') %>';
@@ -314,6 +315,8 @@
     '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"),
+
     'congratulationsSendSuccessHeader': __('Congratulations, your newsletter is being sent!'),
     'congratulationsScheduleSuccessHeader': __('Congratulations, your newsletter is scheduled to be sent.'),
     'congratulationsWooSuccessHeader': __('Congratulations, your WooCommerce email has been activated.'),
@@ -337,4 +340,25 @@
   });
 </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 %>

webpack.config.js

@@ -135,6 +135,13 @@ var baseConfig = {
           'babel-loader',
         ]
       },
+      {
+        include: path.resolve(__dirname, 'assets/js/src/announcements/feature_announcement.jsx'),
+        use: [
+          'expose-loader?' + globalPrefix + '.FeatureAnnouncement',
+          'babel-loader',
+        ]
+      },
       {
         include: path.resolve(__dirname, 'assets/js/src/form/fields/selection.jsx'),
         use: [
@@ -235,6 +242,7 @@ var adminConfig = {
       'newsletters/listings/tabs.jsx',
       'newsletters/listings/mixins.jsx',
       'newsletters/listings/heading.jsx',
+      'announcements/feature_announcement.jsx',
       'newsletters/types/automatic_emails/events_list.jsx',
       'newsletters/types/automatic_emails/breadcrumb.jsx',
       'newsletters/types/welcome/scheduling.jsx',