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

Add announcement for newsletter background image [MAILPOET-1430]

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;