Remove dot announcement
[MAILPOET-1862]
This commit is contained in:
@@ -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;
|
@@ -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;
|
@@ -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
|
||||
);
|
||||
}
|
@@ -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;
|
@@ -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()
|
||||
|
Reference in New Issue
Block a user