Remove dot announcement

[MAILPOET-1862]

assets/css/src/admin.scss

@@ -34,7 +34,6 @@
 @import 'components/welcomeWizard';
 @import 'components/intro';
 @import 'components/featureAnnouncement';
-@import 'components/inAppAnnouncements';
 @import 'components/newsletterCongratulate.scss';
 @import 'components/discounts';
 @import 'components/reviewRequest';

assets/css/src/components/_inAppAnnouncements.scss

@@ -1,27 +0,0 @@
-.mailpoet_in_app_announcement_pulsing_dot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: #ff5301;
-  cursor: pointer;
-  box-shadow: 0 0 0 rgba(255, 83, 1, 0.4);
-  animation: mailpoet_in_app_dot_pulse 2s infinite;
-}
-
-@keyframes mailpoet_in_app_dot_pulse {
-  0% { box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); }
-  70% { box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); }
-}
-
-.mailpoet_drag_and_drop_tutorial {
-  text-align: center;
-}
-
-.new_subscriber_notification_announcement {
-  h2 {
-    font-size: 28px;
-  }
-  text-align: center;
-}

assets/js/src/announcements/in_app_announcement.jsx

@@ -1,122 +0,0 @@
-import PropTypes from 'prop-types';
-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 },
-    }).always(() => (this.setState({ announcementsSettings: settings })));
-  }
-
-  render() {
-    if (this.props.showToNewUser !== null
-      && window.mailpoet_is_new_user !== this.props.showToNewUser
-    ) {
-      return null;
-    }
-
-    if (this.props.validUntil !== null
-      && this.props.validUntil < new Date()
-    ) {
-      return null;
-    }
-
-    if (this.props.showToPremiumUser !== null
-      && window.mailpoet_premium_active !== this.props.showToPremiumUser
-    ) {
-      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>
-    );
-  }
-}
-
-const validateBooleanWithWindowDependency = (props, propName, componentName, windowProperty) => {
-  const propValue = props[propName];
-  if (propValue !== null && propValue !== true && propValue !== false) {
-    return new Error(`Invalid property in ${componentName}. newUser must be of type boolean`);
-  }
-  if (propValue !== null && typeof window[windowProperty] === 'undefined') {
-    return new Error(
-      `Missing data for evaluation of ${componentName} display condition. ${propName} requires window.${windowProperty}`
-    );
-  }
-  return null;
-};
-
-InAppAnnouncement.propTypes = {
-  width: PropTypes.string,
-  height: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.element.isRequired,
-  validUntil: PropTypes.instanceOf(Date),
-  showToNewUser: (props, propName, componentName) => (
-    validateBooleanWithWindowDependency(props, propName, componentName, 'mailpoet_is_new_user')
-  ),
-  showToPremiumUser: (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 = {
-  width: '900px',
-  height: '600px',
-  className: null,
-  validUntil: null,
-  showToNewUser: null,
-  showToPremiumUser: null,
-  showOnlyOnceSlug: null,
-};
-
-export default InAppAnnouncement;

assets/js/src/announcements/in_app_announcement_dot.jsx

@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import classNames from 'classnames';
-import MailPoet from 'mailpoet';
-
-const InAppAnnouncementDot = (props) => {
-  const onClick = () => {
-    MailPoet.Modal.popup({
-      template: ReactDOMServer.renderToString(props.children),
-      width: props.width,
-      height: props.height,
-    });
-    if (props.onUserTrigger) props.onUserTrigger();
-  };
-  return (
-    <span
-      role="button"
-      tabIndex="-1"
-      className={classNames('mailpoet_in_app_announcement_pulsing_dot', props.className)}
-      onKeyDown={(event) => {
-        if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
-        ) {
-          event.preventDefault();
-          onClick();
-        }
-      }}
-      onClick={onClick}
-    />
-  );
-};
-
-InAppAnnouncementDot.propTypes = {
-  children: PropTypes.element.isRequired,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  className: PropTypes.string,
-  onUserTrigger: PropTypes.func,
-};
-
-InAppAnnouncementDot.defaultProps = {
-  width: 'auto',
-  height: 'auto',
-  className: null,
-  onUserTrigger: null,
-};
-
-export default InAppAnnouncementDot;

assets/js/src/settings/announcement.jsx

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

assets/js/src/settings/new_subscriber_announcement.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import MailPoet from 'mailpoet';
-import moment from 'moment';
-import InAppAnnouncement from '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('announcementParagraph1')}
-        <br />
-        {MailPoet.I18n.t('announcementParagraph2')}
-      </p>
-    </div>
-  </InAppAnnouncement>
-);
-
-NewSubscriberNotificationAnnouncement.propTypes = {
-  installedAt: PropTypes.string.isRequired,
-  imageUrl: PropTypes.string.isRequired,
-};
-
-export default NewSubscriberNotificationAnnouncement;

assets/js/src/webpack_admin_index.jsx

@@ -17,5 +17,4 @@ import 'settings/reinstall_from_scratch.js'; // side effect - adds event handler
 import 'subscribers/importExport/import.jsx'; // side effect - executes on doc ready, adds events
 import 'subscribers/importExport/export.js'; // side effect - executes on doc ready
 import 'welcome_wizard/wizard.jsx'; // side effect - renders ReactDOM to document
-import 'settings/announcement.jsx'; // side effect - renders ReactDOM to document
 import 'nps_poll.jsx'; // side effect - calls setImmediate()

lib/Settings/SettingsController.php

@@ -64,9 +64,6 @@ class SettingsController {
         'analytics' => [
           'enabled' => false,
         ],
-        'in_app_announcements' => [
-          'displayed' => []
-        ],
         'display_nps_poll' => true,
       ];
     }

views/settings.html

@@ -217,9 +217,6 @@
         });
       });
     });
-    var mailpoet_in_app_announcements = <%= json_encode(settings.in_app_announcements) %>;
-    var mailpoet_new_subscriber_announcement_image = '<%= cdn_url('in-app-announcements/new-subscriber-notification.20181121-1440.png') %>';
-    var mailpoet_installed_at = <%= json_encode(settings.installed_at) %>;
     <% set newUser = (is_new_user == true) ? 'true' : 'false' %>
     var mailpoet_is_new_user = <%= newUser %>;
     var mailpoet_settings_sender_name = "<%= settings.sender.name %>";

views/settings/basics.html

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