Merge pull request #1512 from mailpoet/in-app-announcements

In app announcements component [MAILPOET-1413]

assets/css/src/admin.styl

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

assets/css/src/in-app-announcements.styl

@@ -0,0 +1,28 @@
+.mailpoet_in_app_announcement_pulsing_dot
+  display: inline-block
+  width: 10px
+  height: 10px
+  border-radius: 50%
+  background: #ff5301
+  cursor: pointer
+  box-shadow: 0 0 0 rgba(255, 83, 1, 0.4)
+  animation: mailpoet_in_app_dot_pulse 2s infinite
+
+@-webkit-keyframes mailpoet_in_app_dot_pulse
+  0%
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4)
+  70%
+    -webkit-box-shadow: 0 0 0 10px rgba(255, 83, 1, 0)
+  100%
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 83, 1, 0)
+
+@keyframes mailpoet_in_app_dot_pulse
+  0%
+    -moz-box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4)
+    box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4)
+  70%
+    -moz-box-shadow: 0 0 0 10px rgba(255, 83, 1, 0)
+    box-shadow: 0 0 0 10px rgba(255, 83, 1, 0)
+  100%
+    -moz-box-shadow: 0 0 0 0 rgba(255, 83, 1, 0)
+    box-shadow: 0 0 0 0 rgba(255, 83, 1, 0)

assets/js/src/in_app_announcements/in_app_announcement.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import InAppAnnouncementDot from './in_app_announcement_dot.jsx';
+
+const InAppAnnouncement = (props) => {
+  if (props.newUser !== null &&
+    window.mailpoet_is_new_user !== props.newUser
+  ) {
+    return null;
+  }
+
+  if (props.validUntil < (new Date().getTime() / 1000)) {
+    return null;
+  }
+
+  return (
+    <InAppAnnouncementDot
+      className={props.className}
+      width={props.width}
+      height={props.height}
+    >
+      {props.children}
+    </InAppAnnouncementDot>);
+};
+
+InAppAnnouncement.propTypes = {
+  width: React.PropTypes.string,
+  height: React.PropTypes.string,
+  className: React.PropTypes.string,
+  children: React.PropTypes.element.isRequired,
+  validUntil: React.PropTypes.number,
+  newUser: (props, propName, componentName) => {
+    const propValue = props[propName];
+    if (propValue !== null && propValue !== true && propValue !== false) {
+      return new Error(`Invalid property in ${componentName}. newUser must be of type boolean`);
+    }
+    if (typeof window.mailpoet_is_new_user === 'undefined') {
+      return new Error(`Missing data for evaluation of ${componentName} display condition. ${propName} requires window.mailpoet_is_new_user`);
+    }
+    return null;
+  },
+};
+
+InAppAnnouncement.defaultProps = {
+  width: '900px',
+  height: '600px',
+  className: null,
+  validUntil: null,
+  newUser: null,
+};
+
+module.exports = InAppAnnouncement;

assets/js/src/in_app_announcements/in_app_announcement_dot.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import classNames from 'classnames';
+import MailPoet from 'mailpoet';
+
+const InAppAnnouncementDot = props => (
+  <span
+    role="button"
+    tabIndex="-1"
+    className={classNames('mailpoet_in_app_announcement_pulsing_dot', props.className)}
+    onClick={() => {
+      MailPoet.Modal.popup({
+        template: ReactDOMServer.renderToString(props.children),
+        width: props.width,
+        height: props.height,
+      });
+    }}
+  />
+);
+
+InAppAnnouncementDot.propTypes = {
+  width: React.PropTypes.string,
+  height: React.PropTypes.string,
+  className: React.PropTypes.string,
+  children: React.PropTypes.element.isRequired,
+};
+
+InAppAnnouncementDot.defaultProps = {
+  width: 'auto',
+  height: 'auto',
+  className: null,
+};
+
+module.exports = InAppAnnouncementDot;