diff --git a/assets/js/src/announcements/feature_announcement.jsx b/assets/js/src/announcements/feature_announcement.jsx
index a612775573..828803189e 100644
--- a/assets/js/src/announcements/feature_announcement.jsx
+++ b/assets/js/src/announcements/feature_announcement.jsx
@@ -3,36 +3,70 @@ import classNames from 'classnames';
import MailPoet from 'mailpoet';
import PropTypes from 'prop-types';
-let beamerLoaded = false;
+class FeatureAnnouncement extends React.Component {
+ constructor(props) {
+ super(props);
+ this.loadBeamer = this.loadBeamer.bind(this);
+ this.beamerCallback = this.beamerCallback.bind(this);
-const loadBeamer = (e) => {
- let s;
- e.preventDefault();
- if (!beamerLoaded) {
- MailPoet.Modal.loading(true);
- beamerLoaded = true;
- window.mailpoet_feature_announcement_has_news = false;
- s = document.createElement('script');
- s.type = 'text/javascript';
- s.src = 'https://app.getbeamer.com/js/beamer-embed.js';
- document.getElementsByTagName('body')[0].appendChild(s);
+ this.state = {
+ showDot: props.hasNews,
+ beamerLoaded: typeof window.Beamer !== 'undefined',
+ };
}
-};
-const FeatureAnnouncement = (props) => {
- const buttonClasses = classNames(
- 'button mailpoet_feature_announcement_button',
- props.hasNews ? 'mailpoet_feature_announcement_dot' : ''
- );
+ loadBeamer(e) {
+ e.preventDefault();
+ if (!this.state.beamerLoaded) {
+ window.beamer_config = {
+ product_id: 'VvHbhYWy7118',
+ selector: 'beamer-selector',
+ language: window.mailpoet_user_locale,
+ callback: this.beamerCallback,
+ };
+ MailPoet.Modal.loading(true);
+ this.setState({ beamerLoaded: true });
+ window.mailpoet_feature_announcement_has_news = false;
+ const s = document.createElement('script');
+ s.type = 'text/javascript';
+ s.src = 'https://app.getbeamer.com/js/beamer-embed.js';
+ document.getElementsByTagName('body')[0].appendChild(s);
+ }
+ }
- return (
-
- );
-};
+ beamerCallback() {
+ this.setState({ showDot: false });
+ MailPoet.Modal.loading(false);
+ window.Beamer.show();
+ MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'settings',
+ action: 'set',
+ data: { last_announcement_seen: Math.floor(Date.now() / 1000) },
+ });
+ }
+
+ render() {
+ const buttonClasses = classNames(
+ 'button mailpoet_feature_announcement_button',
+ this.state.showDot ? 'mailpoet_feature_announcement_dot' : ''
+ );
+ return (
+
+
+ );
+ }
+}
FeatureAnnouncement.propTypes = {
hasNews: PropTypes.bool,
diff --git a/lib/Config/Menu.php b/lib/Config/Menu.php
index e4b1aa2bd7..976d68191e 100644
--- a/lib/Config/Menu.php
+++ b/lib/Config/Menu.php
@@ -34,6 +34,7 @@ if(!defined('ABSPATH')) exit;
class Menu {
const MAIN_PAGE_SLUG = 'mailpoet-newsletters';
+ const LAST_ANNOUNCEMENT_DATE = '2018-12-05 10:00:00';
public $renderer;
private $access_control;
@@ -582,11 +583,8 @@ class Menu {
$data['premium_plugin_active'] = License::getLicense();
$data['is_woocommerce_active'] = class_exists('WooCommerce');
- // If the last_announcement_date is newer than the user's last_announcement_seen setting,
- // a small red dot is added on top of the What's New announcement button
- $last_announcement_date = strtotime('2018-12-05 10:00:00');
$data['feature_announcement_has_news'] = empty($data['settings']['last_announcement_seen'])
- || $data['settings']['last_announcement_seen'] < $last_announcement_date;
+ || $data['settings']['last_announcement_seen'] < strtotime(self::LAST_ANNOUNCEMENT_DATE);
$data['automatic_emails'] = array(
array(
diff --git a/views/newsletters.html b/views/newsletters.html
index c03e9f3241..a8b3ec9ed6 100644
--- a/views/newsletters.html
+++ b/views/newsletters.html
@@ -24,6 +24,7 @@
var mailpoet_woocommerce_active = <%= json_encode(is_woocommerce_active) %>;
var mailpoet_automatic_emails = <%= json_encode(automatic_emails) %>;
var mailpoet_feature_announcement_has_news = <%= json_encode(feature_announcement_has_news) %>;
+ var mailpoet_user_locale = '<%= get_locale() %>';
var mailpoet_in_app_announcements = mailpoet_settings.in_app_announcements;
var mailpoet_free_welcome_emails_image = '<%= cdn_url('in-app-announcements/hello-illustration-for-welcome-emails.20181121-1440.png') %>';
var mailpoet_congratulations_success_image = '<%= cdn_url('newsletter/congrat-illu-success.20181121-1440.png') %>';
@@ -315,7 +316,7 @@
'freeWelcomeEmailsHeading': __('Welcome Emails are now free for everyone'),
'freeWelcomeEmailsParagraph': __('Say “Hello!” automatically to all your new subscribers. They’ll appreciate the extra touch.'),
- 'whatsNew': __("What's new"),
+ 'whatsNew': __("What’s new"),
'congratulationsSendSuccessHeader': __('Congratulations, your newsletter is being sent!'),
'congratulationsScheduleSuccessHeader': __('Congratulations, your newsletter is scheduled to be sent.'),
@@ -340,25 +341,4 @@
});
<% endif %>
-
-
-
<% endblock %>