Fix beamer auto-opening, because of their new auto-refresh feature

MAILPOET-1720

assets/js/src/announcements/feature_announcement.jsx

@@ -8,33 +8,47 @@ class FeatureAnnouncement extends React.Component {
     super(props);
     this.loadBeamer = this.loadBeamer.bind(this);
     this.beamerCallback = this.beamerCallback.bind(this);
+    this.showBeamer = this.showBeamer.bind(this);
 
     this.state = {
       showDot: props.hasNews,
       beamerLoaded: typeof window.Beamer !== 'undefined',
+      beamerInitialized: false,
     };
   }
 
-  loadBeamer(e) {
+  loadBeamer() {
-    e.preventDefault();
+    window.beamer_config = {
-    if (!this.state.beamerLoaded) {
+      product_id: 'VvHbhYWy7118',
-      window.beamer_config = {
+      language: window.mailpoet_user_locale,
-        product_id: 'VvHbhYWy7118',
+      callback: this.beamerCallback,
-        selector: 'beamer-selector',
+    };
-        language: window.mailpoet_user_locale,
+    MailPoet.Modal.loading(true);
-        callback: this.beamerCallback,
+    window.mailpoet_feature_announcement_has_news = false;
-      };
+    this.setState({ beamerLoaded: true });
-      MailPoet.Modal.loading(true);
+    const s = document.createElement('script');
-      this.setState({ beamerLoaded: true });
+    s.type = 'text/javascript';
-      window.mailpoet_feature_announcement_has_news = false;
+    s.src = 'https://app.getbeamer.com/js/beamer-embed.js';
-      const s = document.createElement('script');
+    document.getElementsByTagName('body')[0].appendChild(s);
-      s.type = 'text/javascript';
-      s.src = 'https://app.getbeamer.com/js/beamer-embed.js';
-      document.getElementsByTagName('body')[0].appendChild(s);
-    }
   }
 
   beamerCallback() {
+    // We show Beamer panel only on first callback after initialization
+    if (this.state.beamerInitialized) {
+      return;
+    }
+    this.showBeamer();
+    this.setState({ beamerInitialized: true });
+  }
+
+  showBeamer(event) {
+    if (event) {
+      event.preventDefault();
+    }
+    if (!this.state.beamerLoaded) {
+      this.loadBeamer();
+      return;
+    }
     this.setState({ showDot: false });
     MailPoet.Modal.loading(false);
     window.Beamer.show();
@@ -58,15 +72,13 @@ class FeatureAnnouncement extends React.Component {
       <div className="mailpoet_feature_announcement">
         <button
           type="button"
-          id="beamer-selector"
+          onClick={this.showBeamer}
-          onClick={this.loadBeamer}
           className={buttonClasses}
           title={MailPoet.I18n.t('whatsNew')}
         >
           <span className="mailpoet_feature_announcement_icon dashicons dashicons-carrot" />
         </button>
       </div>
-
     );
   }
 }