Rewrite basics of Premium settings tab to React
[MAILPOET-2431]
This commit is contained in:
Jan Jakeš
committed by
Jack Kitterhing
Jack Kitterhing
parent
1dbd2bd1da
commit
7da4128169
33
assets/js/src/settings/premium_tab/messages/mss_messages.jsx
Normal file
33
assets/js/src/settings/premium_tab/messages/mss_messages.jsx
Normal 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;
|
||||||
@ -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
144
assets/js/src/settings/premium_tab/premium_tab.jsx
Normal 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
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -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 'settings/settings.jsx'; // side effect - renders ReactDOM to document
|
||||||
import 'forms/forms.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/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 'help/help.jsx'; // side effect - renders ReactDOM to document
|
||||||
import 'poll.jsx'; // side effect - assigns to MailPoet.Poll
|
import 'poll.jsx'; // side effect - assigns to MailPoet.Poll
|
||||||
import 'settings/reinstall_from_scratch.js'; // side effect - adds event handler to document
|
import 'settings/reinstall_from_scratch.js'; // side effect - adds event handler to document
|
||||||
|
|||||||
@ -297,5 +297,14 @@
|
|||||||
'yourName': __('Your name'),
|
'yourName': __('Your name'),
|
||||||
'from': __('From'),
|
'from': __('From'),
|
||||||
'replyTo': __('Reply-to'),
|
'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 %>
|
<% endblock %>
|
||||||
|
|||||||
@ -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">
|
<script type="text/javascript">
|
||||||
jQuery(function($) {
|
<% autoescape 'js' %>
|
||||||
$(function() {
|
var mailpoet_activation_key = <%= json_encode(settings.premium.premium_key ?: settings.mta.mailpoet_api_key) %>;
|
||||||
// verifying license key
|
var mailpoet_premium_key_valid = <%= json_encode(premium_key_valid) %>;
|
||||||
$('#mailpoet_premium_key_verify').on('click', function () {
|
var mailpoet_mss_key_valid = <%= json_encode(mss_key_valid) %>;
|
||||||
// get license key
|
<% endautoescape %>
|
||||||
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}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div id="settings-premium-tab"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user