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 %>