Refactor NPS poll component to separate poll and wrapper components
[MAILPOET-1815]
This commit is contained in:
Rostislav Wolny
committed by
M. Shull
M. Shull
parent
777eb1f7b7
commit
442b138d83
@@ -4,96 +4,103 @@ import ReactDOMServer from 'react-dom/server';
|
|||||||
import ReviewRequest from 'review_request.jsx';
|
import ReviewRequest from 'review_request.jsx';
|
||||||
import getTrackingData from 'analytics.js';
|
import getTrackingData from 'analytics.js';
|
||||||
|
|
||||||
|
class NpsPoll extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
pollShown: false,
|
||||||
|
modalShown: false,
|
||||||
|
};
|
||||||
|
this.displayPoll = this.displayPoll.bind(this);
|
||||||
|
this.showReviewRequestModal = this.showReviewRequestModal.bind(this);
|
||||||
|
this.callSatismeter = this.callSatismeter.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
showReviewRequestModal() {
|
||||||
|
if (this.state.modalShown) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setState({ modalShown: true });
|
||||||
|
MailPoet.Modal.popup({
|
||||||
|
width: 800,
|
||||||
|
template: ReactDOMServer.renderToString(
|
||||||
|
ReviewRequest({
|
||||||
|
username: window.mailpoet_current_wp_user_firstname
|
||||||
|
|| window.mailpoet_current_wp_user.user_login,
|
||||||
|
reviewRequestIllustrationUrl: window.mailpoet_review_request_illustration_url,
|
||||||
|
installedDaysAgo: window.mailpoet_installed_days_ago,
|
||||||
|
})
|
||||||
|
),
|
||||||
|
onInit: () => {
|
||||||
|
document
|
||||||
|
.getElementById('mailpoet_review_request_not_now')
|
||||||
|
.addEventListener('click', () => MailPoet.Modal.close());
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
displayPoll() {
|
||||||
|
if (!this.state.pollShown) {
|
||||||
|
this.setState({ pollShown: true });
|
||||||
|
getTrackingData().then(this.callSatismeter);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
callSatismeter(trackingData) {
|
||||||
|
const newUsersPollId = '6L479eVPXk7pBn6S';
|
||||||
|
const oldUsersPollId = 'k0aJAsQAWI2ERyGv';
|
||||||
|
window.satismeter({
|
||||||
|
writeKey: window.mailpoet_is_new_user ? newUsersPollId : oldUsersPollId,
|
||||||
|
userId: window.mailpoet_current_wp_user.ID + window.mailpoet_site_url,
|
||||||
|
traits: {
|
||||||
|
name: window.mailpoet_current_wp_user.user_nicename,
|
||||||
|
email: window.mailpoet_current_wp_user.user_email,
|
||||||
|
mailpoetVersion: window.mailpoet_version,
|
||||||
|
mailpoetPremiumIsActive: window.mailpoet_premium_active,
|
||||||
|
createdAt: trackingData.installedAtIso,
|
||||||
|
newslettersSent: trackingData.newslettersSent,
|
||||||
|
welcomeEmails: trackingData.welcomeEmails,
|
||||||
|
postnotificationEmails: trackingData.postnotificationEmails,
|
||||||
|
woocommerceEmails: trackingData.woocommerceEmails,
|
||||||
|
subscribers: trackingData.subscribers,
|
||||||
|
lists: trackingData.lists,
|
||||||
|
sendingMethod: trackingData.sendingMethod,
|
||||||
|
woocommerceIsInstalled: trackingData.woocommerceIsInstalled,
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
submit: (response) => {
|
||||||
|
if (response.rating >= 9 && response.completed) {
|
||||||
|
this.showReviewRequestModal();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (!window.mailpoet_display_nps_poll) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (window.satismeter) {
|
||||||
|
setImmediate(this.displayPoll);
|
||||||
|
} else {
|
||||||
|
const s = document.createElement('script');
|
||||||
|
s.type = 'text/javascript';
|
||||||
|
s.src = 'https://app.satismeter.com/satismeter.js';
|
||||||
|
s.onload = () => this.displayPoll();
|
||||||
|
document.getElementsByTagName('body')[0].appendChild(s);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const withNpsPoll = function withNpsPoll(Component) {
|
const withNpsPoll = function withNpsPoll(Component) {
|
||||||
return class extends React.Component {
|
return props => (
|
||||||
constructor(props) {
|
<>
|
||||||
super(props);
|
<NpsPoll />
|
||||||
this.state = {
|
<Component {...props} />
|
||||||
pollShown: false,
|
</>
|
||||||
modalShown: false,
|
);
|
||||||
};
|
|
||||||
this.displayPoll = this.displayPoll.bind(this);
|
|
||||||
this.showReviewRequestModal = this.showReviewRequestModal.bind(this);
|
|
||||||
this.callSatismeter = this.callSatismeter.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
showReviewRequestModal() {
|
|
||||||
if (this.state.modalShown) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.setState({ modalShown: true });
|
|
||||||
MailPoet.Modal.popup({
|
|
||||||
width: 800,
|
|
||||||
template: ReactDOMServer.renderToString(
|
|
||||||
ReviewRequest({
|
|
||||||
username: window.mailpoet_current_wp_user_firstname
|
|
||||||
|| window.mailpoet_current_wp_user.user_login,
|
|
||||||
reviewRequestIllustrationUrl: window.mailpoet_review_request_illustration_url,
|
|
||||||
installedDaysAgo: window.mailpoet_installed_days_ago,
|
|
||||||
})
|
|
||||||
),
|
|
||||||
onInit: () => {
|
|
||||||
document
|
|
||||||
.getElementById('mailpoet_review_request_not_now')
|
|
||||||
.addEventListener('click', () => MailPoet.Modal.close());
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
displayPoll() {
|
|
||||||
if (!this.state.pollShown) {
|
|
||||||
this.setState({ pollShown: true });
|
|
||||||
getTrackingData().then(this.callSatismeter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
callSatismeter(trackingData) {
|
|
||||||
const newUsersPollId = '6L479eVPXk7pBn6S';
|
|
||||||
const oldUsersPollId = 'k0aJAsQAWI2ERyGv';
|
|
||||||
window.satismeter({
|
|
||||||
writeKey: window.mailpoet_is_new_user ? newUsersPollId : oldUsersPollId,
|
|
||||||
userId: window.mailpoet_current_wp_user.ID + window.mailpoet_site_url,
|
|
||||||
traits: {
|
|
||||||
name: window.mailpoet_current_wp_user.user_nicename,
|
|
||||||
email: window.mailpoet_current_wp_user.user_email,
|
|
||||||
mailpoetVersion: window.mailpoet_version,
|
|
||||||
mailpoetPremiumIsActive: window.mailpoet_premium_active,
|
|
||||||
createdAt: trackingData.installedAtIso,
|
|
||||||
newslettersSent: trackingData.newslettersSent,
|
|
||||||
welcomeEmails: trackingData.welcomeEmails,
|
|
||||||
postnotificationEmails: trackingData.postnotificationEmails,
|
|
||||||
woocommerceEmails: trackingData.woocommerceEmails,
|
|
||||||
subscribers: trackingData.subscribers,
|
|
||||||
lists: trackingData.lists,
|
|
||||||
sendingMethod: trackingData.sendingMethod,
|
|
||||||
woocommerceIsInstalled: trackingData.woocommerceIsInstalled,
|
|
||||||
},
|
|
||||||
events: {
|
|
||||||
submit: (response) => {
|
|
||||||
if (response.rating >= 9 && response.completed) {
|
|
||||||
this.showReviewRequestModal();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (!window.mailpoet_display_nps_poll) {
|
|
||||||
return (<Component {...this.props} />);
|
|
||||||
}
|
|
||||||
if (window.satismeter) {
|
|
||||||
this.displayPoll();
|
|
||||||
} else {
|
|
||||||
const s = document.createElement('script');
|
|
||||||
s.type = 'text/javascript';
|
|
||||||
s.src = 'https://app.satismeter.com/satismeter.js';
|
|
||||||
s.onload = () => this.displayPoll();
|
|
||||||
document.getElementsByTagName('body')[0].appendChild(s);
|
|
||||||
}
|
|
||||||
return (<Component {...this.props} />);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default withNpsPoll;
|
export default withNpsPoll;
|
||||||
|
|||||||
Reference in New Issue
Block a user