Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Refactor nps poll component using hooks

Browse Source 
[MAILPOET-1916]
This commit is contained in:
Rostislav Wolny
2019-03-20 11:24:41 +01:00
committed by M. Shull
parent 22100799ff
commit 496103da5e
1 changed files with 28 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
assets/js/src/nps_poll.jsx
View File

@@ -1,26 +1,18 @@
import React from 'react'; import React, { useState } from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import ReactDOMServer from 'react-dom/server'; 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 { const NpsPoll = () => {
constructor(props) { const [pollShown, setPollShown] = useState(false);
super(props); const [modalShown, setModalShown] = useState(false);
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() { function showReviewRequestModal() {
if (this.state.modalShown) { if (modalShown) {
return; return;
} }
this.setState({ modalShown: true }); setModalShown(true);
MailPoet.Modal.popup({ MailPoet.Modal.popup({
width: 800, width: 800,
template: ReactDOMServer.renderToString( template: ReactDOMServer.renderToString(
@@ -39,14 +31,7 @@ class NpsPoll extends React.Component {
}); });
} }
displayPoll() { function callSatismeter(trackingData) {
if (!this.state.pollShown) {
this.setState({ pollShown: true });
getTrackingData().then(data => this.callSatismeter(data.data));
}
}
callSatismeter(trackingData) {
const newUsersPollId = '6L479eVPXk7pBn6S'; const newUsersPollId = '6L479eVPXk7pBn6S';
const oldUsersPollId = 'k0aJAsQAWI2ERyGv'; const oldUsersPollId = 'k0aJAsQAWI2ERyGv';
window.satismeter({ window.satismeter({
@@ -70,29 +55,35 @@ class NpsPoll extends React.Component {
events: { events: {
submit: (response) => { submit: (response) => {
if (response.rating >= 9 && response.completed) { if (response.rating >= 9 && response.completed) {
this.showReviewRequestModal(); showReviewRequestModal();
} }
}, },
}, },
}); });
} }
render() { function displayPoll() {
if (!window.mailpoet_display_nps_poll) { if (!pollShown) {
return null; setPollShown(true);
} getTrackingData().then(data => callSatismeter(data.data));
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);
} }
}
if (!window.mailpoet_display_nps_poll) {
return null; return null;
} }
}
if (window.satismeter) {
setImmediate(displayPoll);
} else {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://app.satismeter.com/satismeter.js';
s.onload = () => displayPoll();
document.getElementsByTagName('body')[0].appendChild(s);
}
return null;
};
const withNpsPoll = function withNpsPoll(Component) { const withNpsPoll = function withNpsPoll(Component) {
return props => ( return props => (