Add feature announcement

[MAILPOET-1522]

assets/css/src/in_app_announcements.styl

@@ -46,3 +46,8 @@
     font-size: 28px
   video
     margin-top: 20px
+
+.new_subscriber_notification_announcement
+  h2
+    font-size: 28px
+  text-align: center

assets/js/src/settings/announcement.jsx

@@ -0,0 +1,13 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import Announcement from './new_subscriber_announcement.jsx';
+
+const container = document.getElementById('new_subscriber_announcement');
+
+
+ReactDOM.render(
+  <Announcement
+    installedAt={window.mailpoet_installed_at}
+    imageUrl={window.mailpoet_new_subscriber_announcement_image}
+  />, container
+);

assets/js/src/settings/new_subscriber_announcement.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+import moment from 'moment';
+import InAppAnnouncement from 'in_app_announcements/in_app_announcement.jsx';
+
+const NewSubscriberNotificationAnnouncement = props => (
+  <InAppAnnouncement
+    validUntil={moment(props.installedAt).add(3, 'months').toDate()}
+    height="700px"
+    showOnlyOnceSlug="new_subscriber_notification"
+    showToNewUser={false}
+  >
+    <div className="new_subscriber_notification_announcement">
+      <h1>{MailPoet.I18n.t('announcementHeader')}</h1>
+      <img src={props.imageUrl} width="600px" height="460px" alt="" />
+      <p>{MailPoet.I18n.t('announcementParagraph')}</p>
+    </div>
+  </InAppAnnouncement>
+);
+
+NewSubscriberNotificationAnnouncement.propTypes = {
+  installedAt: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string.isRequired,
+};
+
+module.exports = NewSubscriberNotificationAnnouncement;

lib/Analytics/Reporter.php

@@ -9,6 +9,7 @@ use MailPoet\Models\Segment;
 use MailPoet\Models\Setting;
 use MailPoet\Models\Subscriber;
 use MailPoet\Settings\Pages;
+use MailPoet\Subscribers\SendNewSubscriberNotification;
 
 class Reporter {
 
@@ -47,6 +48,7 @@ class Reporter {
       'Newsletter task scheduler (cron)' => $isCronTriggerMethodWP ? 'visitors' : 'script',
       'Open and click tracking' => (boolean)Setting::getValue('tracking.enabled', false),
       'Premium key valid' => $checker->isPremiumKeyValid(),
+      'New subscriber notifications' => SendNewSubscriberNotification::isDisabled(Setting::getValue(SendNewSubscriberNotification::SETTINGS_KEY)),
       'Number of standard newsletters sent in last 3 months' => $newsletters['sent_newsletters'],
       'Number of active post notifications' => $newsletters['notifications_count'],
       'Number of active welcome emails' => $newsletters['welcome_newsletters_count'],

lib/Subscribers/SendNewSubscriberNotification.php

@@ -58,7 +58,7 @@ class SendNewSubscriberNotification {
     }
   }
 
-  private function isDisabled($settings) {
+  public static function isDisabled($settings) {
     if(!is_array($settings)) {
       return true;
     }

views/settings.html

@@ -190,10 +190,17 @@
         });
       });
     });
+    var mailpoet_in_app_announcements = <%= json_encode(settings.in_app_announcements) %>;
+    var mailpoet_new_subscriber_announcement_image = '<%= image_url('in_app_announcements/new-subscriber-notification.png') %>';
+    var mailpoet_installed_at = <%= json_encode(settings.installed_at) %>;
+    <% set newUser = (is_new_user == true) ? 'true' : 'false' %>
+    var mailpoet_is_new_user = <%= newUser %>;
   </script>
 <% endblock %>
 <% block translations %>
   <%= localize({
-    'reinstallConfirmation': __('Are you sure? All of your MailPoet data will be permanently erased (newsletters, statistics, subscribers, etc.).')
+    'reinstallConfirmation': __('Are you sure? All of your MailPoet data will be permanently erased (newsletters, statistics, subscribers, etc.).'),
+    'announcementHeader': __('Get notified when someone subscribes'),
+    'announcementParagraph': __('It’s been a popular feature request from our users, we hope you get lots of emails about all your new subscribers! (You can turn this feature off if it’s too many emails.)'),
   }) %>
 <% endblock %>

views/settings/basics.html

@@ -304,7 +304,7 @@
     <tr>
       <th scope="row">
         <label for="subscription_unsubscribe_page">
-          <%= __('New subscriber notifications') %>
+          <%= __('New subscriber notifications') %> <span id="new_subscriber_announcement" class="new_subscriber_announcement" />
         </label>
         <p class="description">
           <%= __('Enter the email address that should receive notifications when someone subscribes.') %>

webpack.config.js

@@ -273,6 +273,7 @@ var adminConfig = {
       'subscribers/importExport/import.js',
       'subscribers/importExport/export.js',
       'welcome_wizard/wizard.jsx',
+      'settings/announcement.jsx',
       'nps_poll.jsx'
     ],
     form_editor: [