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

Refactor NpsPoll to custom effect

Browse Source 
[MAILPOET-1916]
This commit is contained in:
Rostislav Wolny
2019-03-21 15:32:15 +01:00
committed by M. Shull
parent 3dc67ac481
commit 1edfedbe01
1 changed files with 58 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,85 +1,73 @@
import React, { useState, useLayoutEffect } from 'react';
import React, { useLayoutEffect } from 'react';
import MailPoet from 'mailpoet';
import ReactDOMServer from 'react-dom/server';
import satismeter from 'satismeter-loader';
import ReviewRequest from 'review_request.jsx';
import getTrackingData from 'analytics.js';
const NpsPoll = () => {
const [pollShown, setPollShown] = useState(false);
const [modalShown, setModalShown] = useState(false);
function showReviewRequestModal() {
if (modalShown) {
return;
}
setModalShown(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());
},
});
}
function callSatismeter(trackingData) {
const newUsersPollId = '6L479eVPXk7pBn6S';
const oldUsersPollId = 'k0aJAsQAWI2ERyGv';
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) {
showReviewRequestModal();
}
},
},
});
}
const useNpsPoll = () => {
useLayoutEffect(() => {
if (window.mailpoet_display_nps_poll && !pollShown) {
setPollShown(true);
getTrackingData().then(data => callSatismeter(data.data));
const showReviewRequestModal = () => {
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());
},
});
};
const callSatismeter = (trackingData) => {
const newUsersPollId = '6L479eVPXk7pBn6S';
const oldUsersPollId = 'k0aJAsQAWI2ERyGv';
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) {
showReviewRequestModal();
}
},
},
});
};
if (window.mailpoet_display_nps_poll) {
getTrackingData().then(({ data }) => callSatismeter(data));
}
});
}, []);
return null;
};
const withNpsPoll = function withNpsPoll(Component) {
return props => (
<>
<NpsPoll />
<Component {...props} />
</>
);
const withNpsPoll = Component => (props) => {
useNpsPoll();
return <Component {...props} />;
};
export default withNpsPoll;