Merge pull request #1520 from mailpoet/in-app-background-images

Add announcement for newsletter background image [MAILPOET-1430]

assets/css/src/admin.styl

@@ -35,4 +35,4 @@
 @require 'newsletter_templates'
 @require 'welcome_wizard'
 @require 'intro'
-@require 'in-app-announcements'
+@require 'in_app_announcements'

assets/css/src/in_app_announcements.styl

@@ -39,3 +39,10 @@
   position: relative
   top: -3px
   left: 8px
+
+.mailpoet_in_app_announcement_background_videos
+  text-align: center
+  h2
+    font-size: 28px
+  video
+    margin-top: 20px

assets/css/src/newsletter_editor/components/heading.styl

@@ -20,3 +20,8 @@
 
   p
     margin: 0
+
+.mailpoet_editor_announcement
+  position: absolute
+  right: 20px
+  top: 90px

assets/css/src/newsletter_editor/layout.styl

@@ -4,6 +4,7 @@ $content-border-color = $structure-border-color
 #mailpoet_editor
   width: 100%
   clear: both
+  position: relative
 
 #mailpoet_editor_heading
   padding-left: 15px

assets/js/src/newsletter_editor/background_image_announcement.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import InAppAnnouncement from 'in_app_announcements/in_app_announcement.jsx';
+
+const BackgroundImageAnnouncement = props => (
+  <InAppAnnouncement
+    validUntil={new Date('2018-10-06')}
+    height="700px"
+    showOnlyOnceSlug="background_image"
+  >
+    <div className="mailpoet_in_app_announcement_background_videos">
+      <h2>
+        {MailPoet.I18n.t('announcementBackgroundImagesHeading').replace('%username%', props.username)}
+      </h2>
+      <p>{MailPoet.I18n.t('announcementBackgroundImagesMessage')}</p>
+      <video src={props.videoUrl} controls autoPlay><track kind="captions" /></video>
+    </div>
+  </InAppAnnouncement>
+);
+
+BackgroundImageAnnouncement.propTypes = {
+  username: React.PropTypes.string.isRequired,
+  videoUrl: React.PropTypes.string.isRequired,
+};
+
+module.exports = BackgroundImageAnnouncement;

assets/js/src/newsletter_editor/initializer.jsx

@@ -3,7 +3,8 @@ import Breadcrumb from 'newsletters/breadcrumb.jsx';
 import MailPoet from 'mailpoet';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import moment from 'moment';
+import BackgroundImageAnnouncement from './background_image_announcement.jsx';
+import displayTutorial from './tutorial.jsx';
 
 const renderBreadcrumb = (newsletterType) => {
   const breadcrumbContainer = document.getElementById('mailpoet_editor_breadcrumb');
@@ -17,27 +18,15 @@ const renderBreadcrumb = (newsletterType) => {
   ReactDOM.render(breadcrumb, breadcrumbContainer);
 };
 
-function displayTutorial() {
-  const key = `user_seen_editor_tutorial${window.config.currentUserId}`;
-  if (window.config.dragDemoUrlSettings) {
-    return;
-  }
-  if (moment(window.config.installedAt).isBefore(moment().subtract(7, 'days'))) {
-    return;
-  }
-  MailPoet.Modal.popup({
-    title: MailPoet.I18n.t('tutorialVideoTitle'),
-    template: `<video style="height:640px;" src="${window.config.dragDemoUrl}" controls autoplay></video>`,
-    onCancel: () => {
-      MailPoet.Ajax.post({
-        api_version: window.mailpoet_api_version,
-        endpoint: 'settings',
-        action: 'set',
-        data: { [key]: 1 },
-      });
-    },
-  });
-}
+const renderAnnouncement = () => {
+  const container = document.getElementById('mailpoet_editor_announcement');
+  ReactDOM.render(
+    <BackgroundImageAnnouncement
+      username={window.config.currentUserFirstName || window.config.currentUserUsername}
+      videoUrl={window.config.backgroundImageDemoUrl}
+    />, container
+  );
+};
 
 const initializeEditor = (config) => {
   const editorContainer = document.getElementById('mailpoet_editor');
@@ -73,6 +62,7 @@ const initializeEditor = (config) => {
       });
 
       renderBreadcrumb(newsletter.type);
+      renderAnnouncement();
 
       if (newsletter.status === 'sending' && newsletter.queue && newsletter.queue.status === null) {
         MailPoet.Ajax.post({

assets/js/src/newsletter_editor/tutorial.jsx

@@ -0,0 +1,26 @@
+import MailPoet from 'mailpoet';
+import moment from 'moment';
+
+const displayTutorial = () => {
+  const key = `user_seen_editor_tutorial${window.config.currentUserId}`;
+  if (window.config.dragDemoUrlSettings) {
+    return;
+  }
+  if (moment(window.config.installedAt).isBefore(moment().subtract(7, 'days'))) {
+    return;
+  }
+  MailPoet.Modal.popup({
+    title: MailPoet.I18n.t('tutorialVideoTitle'),
+    template: `<video style="height:640px;" src="${window.config.dragDemoUrl}" controls autoplay></video>`,
+    onCancel: () => {
+      MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
+        endpoint: 'settings',
+        action: 'set',
+        data: { [key]: 1 },
+      });
+    },
+  });
+};
+
+export default displayTutorial;

lib/Config/Menu.php

@@ -637,7 +637,7 @@ class Menu {
     $data = array(
       'shortcodes' => ShortcodesHelper::getShortcodes(),
       'settings' => Setting::getAll(),
-      'current_wp_user' => Subscriber::getCurrentWPUser(),
+      'current_wp_user' => array_merge(Subscriber::getCurrentWPUser()->asArray(), wp_get_current_user()->to_array()),
       'sub_menu' => self::MAIN_PAGE_SLUG,
       'mss_active' => Bridge::isMPSendingServiceEnabled()
     );

views/newsletter/editor.html

@@ -240,6 +240,7 @@
 <h1 style="display:none"><%= __('Newsletter Editor') %></h1>
 <div id="mailpoet_editor">
   <div id="mailpoet_editor_breadcrumb" class="mailpoet_breadcrumbs"></div>
+  <div id="mailpoet_editor_announcement" class="mailpoet_editor_announcement"></div>
   <div id="mailpoet_editor_top"></div>
   <div id="mailpoet_editor_heading"></div>
   <div class="clearfix"></div>
@@ -359,7 +360,8 @@
     'cancelColorSelection': _x('Cancel', 'cancel color selection'),
     'newsletterIsPaused': __('Email sending has been paused.'),
     'tutorialVideoTitle': __('Before you start, this how you drag and drop in MailPoet'),
-
+    'announcementBackgroundImagesHeading': __('Hey %username%, you can now put text over any image.'),
+    'announcementBackgroundImagesMessage': __('Simply edit any column block to add a background image. It works in pretty much every email client, even on mobile.'),
     'selectType': __('Select type'),
     'events': __('Events'),
     'conditions': _x('Conditions', 'Configuration options for automatic email events'),
@@ -1297,10 +1299,14 @@
         ) %>',
       },
       dragDemoUrl: '<%= image_url("newsletter_editor/editor-drag-demo.mp4") %>',
+      backgroundImageDemoUrl: '<%= image_url("newsletter_editor/background-image-demo.mp4") %>',
       currentUserId: '<%= current_wp_user.wp_user_id %>',
+      currentUserFirstName: '<%= current_wp_user.first_name %>',
+      currentUserUsername: '<%= current_wp_user.login %>',
       dragDemoUrlSettings: '<%= settings["user_seen_editor_tutorial" ~ current_wp_user.wp_user_id] %>',
       installedAt: '<%= settings["installed_at"] %>',
     };
+    var mailpoet_in_app_announcements = <%= json_encode(settings.in_app_announcements) %>;
     wp.hooks.doAction('mailpoet_newsletters_editor_initialize', config);
   </script>
 <% endblock %>