diff --git a/assets/js/src/nps_poll.jsx b/assets/js/src/nps_poll.jsx index cc232617eb..087e84ad3c 100644 --- a/assets/js/src/nps_poll.jsx +++ b/assets/js/src/nps_poll.jsx @@ -1,3 +1,24 @@ +import MailPoet from 'mailpoet'; +import ReactDOMServer from 'react-dom/server'; +import ReviewRequest from 'review_request.jsx'; + +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()); + }, +}); + function displayPoll() { if ( window.mailpoet_display_nps_poll @@ -13,6 +34,13 @@ function displayPoll() { email: window.mailpoet_current_wp_user.user_email, createdAt: window.mailpoet_installed_at_isoFormat, }, + events: { + submit: (response) => { + if (response.rating >= 9 && response.completed) { + showReviewRequestModal(); + } + }, + }, }); // Old users poll window.satismeter({ @@ -23,6 +51,13 @@ function displayPoll() { email: window.mailpoet_current_wp_user.user_email, createdAt: window.mailpoet_installed_at_isoFormat, }, + events: { + submit: (response) => { + if (response.rating >= 9 && response.completed) { + showReviewRequestModal(); + } + }, + }, }); } }