Improve the annoucements component that it could be displayed only once

[MAILPOET-1525]

assets/js/src/in_app_announcements/in_app_announcement.jsx

@@ -1,7 +1,36 @@
 import React from 'react';
+import MailPoet from 'mailpoet';
 import InAppAnnouncementDot from './in_app_announcement_dot.jsx';
 
 class InAppAnnouncement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.saveDisplayed = this.saveDisplayed.bind(this);
+
+    this.state = {
+      announcementsSettings: window.mailpoet_in_app_announcements || null,
+    };
+  }
+
+  saveDisplayed() {
+    const settings = Object.assign({}, this.state.announcementsSettings);
+    settings.displayed.push(this.props.showOnlyOnceSlug);
+    return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'settings',
+      action: 'set',
+      data: { in_app_announcements: settings },
+    }).then(() => (this.setState({ announcementsSettings: settings }))
+    ).fail((response) => {
+      if (response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map(error => error.message),
+          { scroll: true }
+        );
+      }
+    });
+  }
+
   render() {
     if (this.props.newUser !== null &&
       window.mailpoet_is_new_user !== this.props.newUser
@@ -19,11 +48,21 @@ class InAppAnnouncement extends React.Component {
       return null;
     }
 
+    if (this.props.showOnlyOnceSlug &&
+      this.state.announcementsSettings.displayed.includes(this.props.showOnlyOnceSlug)
+    ) {
+      return null;
+    }
+
     return (
       <InAppAnnouncementDot
         className={this.props.className}
         width={this.props.width}
         height={this.props.height}
+        onUserTrigger={() => {
+          if (!this.props.showOnlyOnceSlug) { return; }
+          this.saveDisplayed();
+        }}
       >
         {this.props.children}
       </InAppAnnouncementDot>
@@ -56,6 +95,23 @@ InAppAnnouncement.propTypes = {
   premiumUser: (props, propName, componentName) => (
     validateBooleanWithWindowDependency(props, propName, componentName, 'mailpoet_premium_active')
   ),
+  showOnlyOnceSlug: (props, propName, componentName) => {
+    const propValue = props[propName];
+    if (propValue !== null && typeof propValue !== 'string') {
+      return new Error(`Invalid property in ${componentName}. ${propName} must be of type string`);
+    }
+    if (propValue === null) {
+      return null;
+    }
+    if (
+      typeof window.mailpoet_in_app_announcements === 'undefined'
+    ) {
+      return new Error(
+        `Missing data for evaluation of ${componentName} display condition. ${propName} requires window.mailpoet_in_app_announcements`
+      );
+    }
+    return null;
+  },
 };
 
 InAppAnnouncement.defaultProps = {
@@ -65,6 +121,7 @@ InAppAnnouncement.defaultProps = {
   validUntil: null,
   newUser: null,
   premiumUser: null,
+  showOnlyOnceSlug: null,
 };
 
 module.exports = InAppAnnouncement;

assets/js/src/in_app_announcements/in_app_announcement_dot.jsx

@@ -14,21 +14,24 @@ const InAppAnnouncementDot = props => (
         width: props.width,
         height: props.height,
       });
+      if (props.onUserTrigger) props.onUserTrigger();
     }}
   />
 );
 
 InAppAnnouncementDot.propTypes = {
+  children: React.PropTypes.element.isRequired,
   width: React.PropTypes.string,
   height: React.PropTypes.string,
   className: React.PropTypes.string,
-  children: React.PropTypes.element.isRequired,
+  onUserTrigger: React.PropTypes.func,
 };
 
 InAppAnnouncementDot.defaultProps = {
   width: 'auto',
   height: 'auto',
   className: null,
+  onUserTrigger: null,
 };
 
 module.exports = InAppAnnouncementDot;