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

Rewrite basics of Premium settings tab to React

Browse Source 
[MAILPOET-2431]
This commit is contained in:
Jan Jakeš
2019-12-03 14:04:41 +01:00
committed by Jack Kitterhing
parent 1dbd2bd1da
commit 7da4128169
6 changed files with 227 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
assets/js/src/settings/premium_tab/messages/mss_messages.jsx Normal file
View File

@ -0,0 +1,33 @@
import PropTypes from 'prop-types';
import React from 'react';
import MailPoet from 'mailpoet';
const validMessage = (
<div className="mailpoet_success">
{MailPoet.I18n.t('premiumTabMssValidMessage')}
</div>
);
const notValidMessage = (message) => (
<div className="mailpoet_error">
{message || MailPoet.I18n.t('premiumTabMssNotValidMessage')}
</div>
);
const MssMessages = (props) => {
if (props.keyValid) {
return validMessage;
}
return notValidMessage(props.keyMessage);
};
MssMessages.propTypes = {
keyValid: PropTypes.bool.isRequired,
keyMessage: PropTypes.string,
};
MssMessages.defaultProps = {
keyMessage: null,
};
export default MssMessages;

33
assets/js/src/settings/premium_tab/messages/premium_messages.jsx Normal file
View File

@ -0,0 +1,33 @@
import PropTypes from 'prop-types';
import React from 'react';
import MailPoet from 'mailpoet';
const validMessage = (
<div className="mailpoet_success">
{MailPoet.I18n.t('premiumTabPremiumValidMessage')}
</div>
);
const notValidMessage = (message) => (
<div className="mailpoet_error">
{message || MailPoet.I18n.t('premiumTabPremiumNotValidMessage')}
</div>
);
const PremiumMessages = (props) => {
if (props.keyValid) {
return validMessage;
}
return notValidMessage(props.keyMessage);
};
PremiumMessages.propTypes = {
keyValid: PropTypes.bool.isRequired,
keyMessage: PropTypes.string,
};
PremiumMessages.defaultProps = {
keyMessage: null,
};
export default PremiumMessages;

144
assets/js/src/settings/premium_tab/premium_tab.jsx Normal file
View File

@ -0,0 +1,144 @@
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import MailPoet from 'mailpoet';
import PremiumMessages from 'settings/premium_tab/messages/premium_messages.jsx';
import MssMessages from 'settings/premium_tab/messages/mss_messages.jsx';
const requestServicesApi = async (key, action) => MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'services',
action,
data: { key },
});
const PremiumTab = (props) => {
const [key, setKey] = useState(props.activationKey);
const [premiumKeyValid, setPremiumKeyValid] = useState(key ? props.premiumKeyValid : null);
const [mssKeyValid, setMssKeyValid] = useState(key ? props.mssKeyValid : null);
const [premiumKeyMessage, setPremiumKeyMessage] = useState(null);
const [mssKeyMessage, setMssKeyMessage] = useState(null);
const verifyMailPoetPremiumKey = async () => {
try {
const response = await requestServicesApi(key, 'checkPremiumKey');
setPremiumKeyMessage(null);
MailPoet.trackEvent(
'User has validated a Premium key',
{
'MailPoet Free version': window.mailpoet_version,
'Premium plugin is active': response.meta.premium_plugin_active,
}
);
} catch (error) {
setPremiumKeyValid(false);
setPremiumKeyMessage(error.errors.map((e) => e.message).join(' ') || null);
MailPoet.trackEvent(
'User has failed to validate a Premium key',
{
'MailPoet Free version': window.mailpoet_version,
'Premium plugin is active': props.premiumPluginActive,
}
);
}
};
async function verifyMailPoetSendingServiceKey() {
try {
const response = await requestServicesApi(key, 'checkMSSKey');
setMssKeyValid(true);
setMssKeyMessage(response.data.message || null);
} catch (error) {
setMssKeyValid(false);
setMssKeyMessage(error.errors.map((e) => e.message).join(' ') || null);
}
window.updateMSSActivationUI();
}
return (
<table className="form-table">
<tbody>
<tr>
<th scope="row">
<label htmlFor="mailpoet_premium_key">
{MailPoet.I18n.t('premiumTabActivationKeyLabel')}
</label>
<p className="description">
{MailPoet.I18n.t('premiumTabDescription')}
</p>
</th>
<td>
<div>
<input
type="text"
id="mailpoet_premium_key"
className="regular-text"
name="premium[premium_key]"
value={key || ''}
onChange={(event) => setKey(event.target.value.trim() || null)}
/>
{' '}
<button
type="button"
id="mailpoet_premium_key_verify"
className="button-secondary"
onClick={async () => {
if (!key) {
MailPoet.Notice.error(
MailPoet.I18n.t('premiumTabNoKeyNotice'),
{ scroll: true },
);
return;
}
MailPoet.Modal.loading(true);
await verifyMailPoetPremiumKey();
await verifyMailPoetSendingServiceKey();
MailPoet.Modal.loading(false);
}}
>
{MailPoet.I18n.t('premiumTabVerifyButton')}
</button>
</div>
{premiumKeyValid !== null && (
<PremiumMessages
keyValid={premiumKeyValid}
keyMessage={premiumKeyMessage}
/>
)}
{mssKeyValid !== null && (
<MssMessages
keyValid={mssKeyValid}
keyMessage={mssKeyMessage}
/>
)}
</td>
</tr>
</tbody>
</table>
);
};
PremiumTab.propTypes = {
activationKey: PropTypes.string,
premiumKeyValid: PropTypes.bool.isRequired,
mssKeyValid: PropTypes.bool.isRequired,
premiumPluginActive: PropTypes.bool.isRequired,
};
PremiumTab.defaultProps = {
activationKey: null,
};
const container = document.getElementById('settings-premium-tab');
if (container) {
ReactDOM.render(
<PremiumTab
activationKey={window.mailpoet_activation_key}
premiumKeyValid={window.mailpoet_premium_key_valid}
mssKeyValid={window.mailpoet_mss_key_valid}
premiumPluginActive={!!window.mailpoet_premium_version}
/>,
container
);
}

1
assets/js/src/webpack_admin_index.jsx
View File

@ -12,6 +12,7 @@ import 'dynamic_segments/dynamic_segments.jsx'; // side effect - renders ReactDO
import 'settings/settings.jsx'; // side effect - renders ReactDOM to document
import 'forms/forms.jsx'; // side effect - renders ReactDOM to document
import 'settings/tabs.js'; // side effect - assigns to MailPoet.Router, executes code on doc ready
import 'settings/premium_tab/premium_tab.jsx'; // side effect - renders ReactDOM to document
import 'help/help.jsx'; // side effect - renders ReactDOM to document
import 'poll.jsx'; // side effect - assigns to MailPoet.Poll
import 'settings/reinstall_from_scratch.js'; // side effect - adds event handler to document

9
views/settings.html
View File

@ -297,5 +297,14 @@
'yourName': __('Your name'),
'from': __('From'),
'replyTo': __('Reply-to'),
'premiumTabActivationKeyLabel': __('Activation Key', 'mailpoet'),
'premiumTabDescription': __('This key is used to validate your free or paid subscription. Paying customers will enjoy automatic upgrades of their Premium plugin and access to faster support.', 'mailpoet'),
'premiumTabNoKeyNotice': __('Please specify a license key before validating it.', 'mailpoet'),
'premiumTabVerifyButton': __('Verify', 'mailpoet'),
'premiumTabPremiumValidMessage': __('Your Premium key has been successfully validated.', 'mailpoet'),
'premiumTabPremiumNotValidMessage': __('Your key is not valid for the Premium plugin.', 'mailpoet'),
'premiumTabMssValidMessage': __('Your MailPoet Sending Service key has been successfully validated.', 'mailpoet'),
'premiumTabMssNotValidMessage': __('Your key is not valid for the MailPoet Sending Service.', 'mailpoet'),
}) %>
<% endblock %>

222
views/settings/premium.html
View File

@ -1,217 +1,9 @@
<table class="form-table">
<tbody>
<!-- premium key -->
<tr>
<th scope="row">
<label for="mailpoet_premium_key">
<%= __('Activation Key') %>
</label>
<p class="description">
<%= __('This key is used to validate your free or paid subscription. Paying customers will enjoy automatic upgrades of their Premium plugin and access to faster support.') %>
</p>
</th>
<td>
<div>
<input
type="text"
class="regular-text"
id="mailpoet_premium_key"
name="premium[premium_key]"
value="<%=- settings.premium.premium_key | default(settings.mta.mailpoet_api_key) -%>"
/>
<a
id="mailpoet_premium_key_verify"
class="button-secondary"
><%= __('Verify') %></a>
</div>
<div
class="mailpoet_premium_key_valid mailpoet_success_item mailpoet_success<% if not(settings.premium.premium_key) or not(premium_key_valid) %> mailpoet_hidden<% endif %>"
>
<%= __('Your Premium key has been successfully validated.') %>
</div>
<div
class="mailpoet_premium_key_invalid mailpoet_error_item mailpoet_error<% if not(settings.premium.premium_key) or premium_key_valid %> mailpoet_hidden<% endif %>"
>
<%= __('Your key is not valid for the Premium plugin.') %>
</div>
<div
class="mailpoet_mss_key_valid mailpoet_success_item mailpoet_success<% if not(settings.mta.mailpoet_api_key) or not(mss_key_valid) %> mailpoet_hidden<% endif %>"
>
<%= __('Your MailPoet Sending Service key has been successfully validated.') %>
</div>
<div
class="mailpoet_mss_key_invalid mailpoet_error_item mailpoet_error<% if not(settings.mta.mailpoet_api_key) or mss_key_valid %> mailpoet_hidden<% endif %>"
>
<%= __('Your key is not valid for the MailPoet Sending Service.') %>
</div>
<div
class="mailpoet_premium_download mailpoet_spaced_block"
<% if premium_plugin_installed or not(premium_key_valid) %>
style="display: none;"
<% endif %>
>
<a
class="mailpoet_premium_install_link button-primary"
href="<%= premium_install_url | default('#') %>"
><%= __('Install Premium now.') %>
</a>
<span>
<%= __('[link]Read guide[/link] on how to install Premium.')
|replaceLinkTags('https://kb.mailpoet.com/article/194-instructions-to-install-the-premium-plugin', {'target': '_blank', 'data-beacon-article': '59020a2d2c7d3a057f889e8f'})
|raw
%>
</span>
</div>
<div
class="mailpoet_premium_activate mailpoet_spaced_block"
<% if not(premium_plugin_installed) or premium_plugin_active or not(premium_key_valid) %>
style="display: none;"
<% endif %>
>
<span><%= __('You need to activate the MailPoet Premium plugin.') %></span>
<a
class="mailpoet_premium_activate_link button-primary"
href="<%= premium_activate_url | default('#') %>"
><%= __('Activate Premium.') %></a>
</div>
<div
class="mailpoet_mss_activate_notice mailpoet_spaced_block"
<% if mss_active or not(mss_key_valid) %>
style="display: none;"
<% endif %>
>
<span>
<%= __("Don't forget to activate the MailPoet Sending Service in the [link]Send with...[/link] tab above.")
|replaceLinkTags('#mta')
|raw
%>
</span>
</div>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
jQuery(function($) {
$(function() {
// verifying license key
$('#mailpoet_premium_key_verify').on('click', function () {
// get license key
var key = $('#mailpoet_premium_key').val();
if(key.length === 0) {
// validation
return MailPoet.Notice.error(
'<%= __('Please specify a license key before validating it.') | escape('js') %>',
{ scroll: true }
);
}
MailPoet.Modal.loading(true);
var promise1 = verifyMailPoetPremiumKey(key);
var promise2 = verifyMailPoetSendingServiceKey(key);
// wait until both requests are completed before hiding the loading modal
promise1.always(function() {
promise2.always(function() {
MailPoet.Modal.loading(false);
});
});
});
function verifyMailPoetPremiumKey(key) {
$('.mailpoet_premium_key_valid, .mailpoet_premium_key_invalid').addClass('mailpoet_hidden');
$('.mailpoet_premium_download, .mailpoet_premium_activate').hide();
return MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'services',
action: 'checkPremiumKey',
data: {
key: key
}
}).done(function(response) {
// Hide server error notices
$('.mailpoet_notice_server').hide();
$('.mailpoet_premium_key_valid').text(response.data.message);
$('.mailpoet_premium_key_valid').removeClass('mailpoet_hidden');
if (!response.meta.premium_plugin_installed) {
$('.mailpoet_premium_install_link')
.attr('href', response.meta.premium_install_url || '#');
$('.mailpoet_premium_download').show();
} else if (!response.meta.premium_plugin_active) {
$('.mailpoet_premium_activate_link')
.attr('href', response.meta.premium_activate_url || '#');
$('.mailpoet_premium_activate').show();
}
MailPoet.trackEvent(
'User has validated a Premium key',
{
'MailPoet Free version': window.mailpoet_version,
'Premium plugin is active': response.meta.premium_plugin_active
}
);
}).fail(function(response) {
if (response.errors.length > 0) {
$('.mailpoet_premium_key_invalid').text(
response.errors.map(function(error) { return error.message; }).join(' ')
);
$('.mailpoet_premium_key_invalid').removeClass('mailpoet_hidden');
}
MailPoet.trackEvent(
'User has failed to validate a Premium key',
{
'MailPoet Free version': window.mailpoet_version,
'Premium plugin is active': !!window.mailpoet_premium_version
}
);
});
}
function verifyMailPoetSendingServiceKey(key) {
$('.mailpoet_mss_key_valid, .mailpoet_mss_key_invalid').addClass('mailpoet_hidden');
$('.mailpoet_mss_activate_notice').hide();
return MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'services',
action: 'checkMSSKey',
data: {
key: key
}
}).done(function(response) {
// Hide server error notices
$('.mailpoet_notice_server').hide();
$('.mailpoet_mss_key_valid').text(response.data.message);
$('.mailpoet_mss_key_valid').removeClass('mailpoet_hidden');
updateMSSActivationUI();
}).fail(function(response) {
if (response.errors.length > 0) {
$('.mailpoet_mss_key_invalid').text(
response.errors.map(function(error) { return error.message; }).join(' ')
);
$('.mailpoet_mss_key_invalid').removeClass('mailpoet_hidden');
updateMSSActivationUI();
}
});
}
$('.mailpoet_premium_install_link').on('click', function() {
MailPoet.trackEvent(
'User has installed the Premium plugin from Settings',
{'MailPoet Free version': window.mailpoet_version}
);
});
$('.mailpoet_premium_activate_link').on('click', function() {
MailPoet.trackEvent(
'User has activated the Premium plugin from Settings',
{'MailPoet Free version': window.mailpoet_version}
);
});
});
});
<% autoescape 'js' %>
var mailpoet_activation_key = <%= json_encode(settings.premium.premium_key ?: settings.mta.mailpoet_api_key) %>;
var mailpoet_premium_key_valid = <%= json_encode(premium_key_valid) %>;
var mailpoet_mss_key_valid = <%= json_encode(mss_key_valid) %>;
<% endautoescape %>
</script>
<div id="settings-premium-tab"></div>