Remove dot announcement

[MAILPOET-1862]
This commit is contained in:
Pavel Dohnal
2019-03-06 14:17:18 +01:00
committed by M. Shull
parent bee5e2f5d1
commit a4c1b07db5
10 changed files with 1 additions and 251 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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
);
}

View File

@@ -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;

View File

@@ -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()