Add missing MSS not activated message & activation button
[MAILPOET-2431]
This commit is contained in:
committed by
Jack Kitterhing
parent
8cde305a34
commit
10689f7a3c
@ -2,9 +2,15 @@ import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import MailPoet from 'mailpoet';
|
||||
|
||||
const validMessage = () => (
|
||||
const MssStatus = {
|
||||
KEY_INVALID: 0,
|
||||
KEY_VALID_MSS_NOT_ACTIVE: 1,
|
||||
KEY_VALID_MSS_ACTIVE: 2,
|
||||
};
|
||||
|
||||
const activeMessage = () => (
|
||||
<div className="mailpoet_success mailpoet_mss_key_valid">
|
||||
{MailPoet.I18n.t('premiumTabMssValidMessage')}
|
||||
{MailPoet.I18n.t('premiumTabMssActiveMessage')}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -14,20 +20,38 @@ const notValidMessage = (message) => (
|
||||
</div>
|
||||
);
|
||||
|
||||
const mssNotActiveMessage = (activationCallback) => (
|
||||
<div className="mailpoet_error">
|
||||
{MailPoet.I18n.t('premiumTabMssNotActiveMessage')}
|
||||
{' '}
|
||||
<button type="button" className="button-link" onClick={activationCallback}>
|
||||
{MailPoet.I18n.t('premiumTabMssActivateMessage')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
const MssMessages = (props) => {
|
||||
if (props.keyValid) {
|
||||
return validMessage();
|
||||
switch (props.keyStatus) {
|
||||
case MssStatus.KEY_VALID_MSS_ACTIVE:
|
||||
return activeMessage();
|
||||
case MssStatus.KEY_VALID_MSS_NOT_ACTIVE:
|
||||
return mssNotActiveMessage(props.activationCallback);
|
||||
case MssStatus.KEY_INVALID:
|
||||
return props.keyMessage ? notValidMessage(props.keyMessage) : null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
return props.keyMessage ? notValidMessage(props.keyMessage) : null;
|
||||
};
|
||||
|
||||
MssMessages.propTypes = {
|
||||
keyValid: PropTypes.bool.isRequired,
|
||||
keyStatus: PropTypes.number.isRequired,
|
||||
keyMessage: PropTypes.string,
|
||||
activationCallback: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
MssMessages.defaultProps = {
|
||||
keyMessage: null,
|
||||
};
|
||||
|
||||
export default MssMessages;
|
||||
export { MssStatus, MssMessages };
|
||||
|
@ -3,7 +3,7 @@ import React, { useMemo, useState } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import MailPoet from 'mailpoet';
|
||||
import KeyMessages from 'settings/premium_tab/messages/key_messages.jsx';
|
||||
import MssMessages from 'settings/premium_tab/messages/mss_messages.jsx';
|
||||
import { MssStatus, MssMessages } from 'settings/premium_tab/messages/mss_messages.jsx';
|
||||
import { PremiumStatus, PremiumMessages } from 'settings/premium_tab/messages/premium_messages.jsx';
|
||||
import { PremiumInstallationStatus } from 'settings/premium_tab/messages/premium_installation_messages.jsx';
|
||||
|
||||
@ -41,16 +41,16 @@ const PremiumTab = (props) => {
|
||||
const [premiumStatus, setPremiumStatus] = useState(key ? props.premiumStatus : null);
|
||||
const [premiumMessage, setPremiumMessage] = useState(null);
|
||||
const [premiumInstallationStatus, setPremiumInstallationStatus] = useState(null);
|
||||
const [mssKeyValid, setMssKeyValid] = useState(key ? props.mssKeyValid : null);
|
||||
const [mssStatus, setMssStatus] = useState(key ? props.mssStatus : null);
|
||||
const [mssKeyMessage, setMssKeyMessage] = useState(null);
|
||||
|
||||
// key is considered valid if either Premium or MSS check passes
|
||||
const keyValid = useMemo(() => {
|
||||
if (premiumStatus > PremiumStatus.KEY_INVALID || mssKeyValid) {
|
||||
if (premiumStatus > PremiumStatus.KEY_INVALID || mssStatus > MssStatus.KEY_INVALID) {
|
||||
return true;
|
||||
}
|
||||
return (premiumStatus === null || mssKeyValid === null) ? null : false;
|
||||
}, [premiumStatus, mssKeyValid]);
|
||||
return (premiumStatus === null || mssStatus === null) ? null : false;
|
||||
}, [premiumStatus, mssStatus]);
|
||||
|
||||
const activatePremiumPlugin = async (isAfterInstall = false) => {
|
||||
const status = PremiumInstallationStatus;
|
||||
@ -120,14 +120,15 @@ const PremiumTab = (props) => {
|
||||
async function verifyMailPoetSendingServiceKey(activateMssIfKeyValid) {
|
||||
try {
|
||||
const response = await requestServicesApi(key, 'checkMSSKey');
|
||||
setMssKeyValid(true);
|
||||
setMssStatus(MssStatus.KEY_VALID_MSS_NOT_ACTIVE);
|
||||
setMssKeyMessage(response.data.message || null);
|
||||
|
||||
if (activateMssIfKeyValid) {
|
||||
await activateMss(key);
|
||||
setMssStatus(MssStatus.KEY_VALID_MSS_ACTIVE);
|
||||
}
|
||||
} catch (error) {
|
||||
setMssKeyValid(false);
|
||||
setMssStatus(MssStatus.KEY_INVALID);
|
||||
setMssKeyMessage(error.errors.map((e) => e.message).join(' ') || null);
|
||||
}
|
||||
window.updateMSSActivationUI();
|
||||
@ -157,7 +158,7 @@ const PremiumTab = (props) => {
|
||||
setKey(event.target.value.trim() || null);
|
||||
setPremiumStatus(null);
|
||||
setPremiumInstallationStatus(null);
|
||||
setMssKeyValid(null);
|
||||
setMssStatus(null);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
@ -175,7 +176,7 @@ const PremiumTab = (props) => {
|
||||
|
||||
setPremiumStatus(null);
|
||||
setPremiumInstallationStatus(null);
|
||||
setMssKeyValid(null);
|
||||
setMssStatus(null);
|
||||
|
||||
MailPoet.Modal.loading(true);
|
||||
const isUserTriggered = event.isTrusted;
|
||||
@ -190,10 +191,11 @@ const PremiumTab = (props) => {
|
||||
{keyValid !== null && (
|
||||
<div className="key-activation-messages">
|
||||
<KeyMessages keyValid={keyValid} />
|
||||
{mssKeyValid !== null && (
|
||||
{mssStatus !== null && (
|
||||
<MssMessages
|
||||
keyValid={mssKeyValid}
|
||||
keyStatus={mssStatus}
|
||||
keyMessage={mssKeyMessage}
|
||||
activationCallback={() => verifyMailPoetSendingServiceKey(true)}
|
||||
/>
|
||||
)}
|
||||
{premiumStatus !== null && (
|
||||
@ -217,7 +219,7 @@ const PremiumTab = (props) => {
|
||||
PremiumTab.propTypes = {
|
||||
activationKey: PropTypes.string,
|
||||
premiumStatus: PropTypes.number.isRequired,
|
||||
mssKeyValid: PropTypes.bool.isRequired,
|
||||
mssStatus: PropTypes.number.isRequired,
|
||||
premiumPluginActive: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
@ -242,11 +244,20 @@ if (container) {
|
||||
: PremiumStatus.KEY_VALID_PREMIUM_PLUGIN_NOT_INSTALLED;
|
||||
};
|
||||
|
||||
const getMssStatus = () => {
|
||||
const keyValid = window.mailpoet_mss_key_valid;
|
||||
const mssActive = window.mailpoet_mss_active;
|
||||
if (!keyValid) {
|
||||
return MssStatus.KEY_INVALID;
|
||||
}
|
||||
return mssActive ? MssStatus.KEY_VALID_MSS_ACTIVE : MssStatus.KEY_VALID_MSS_NOT_ACTIVE;
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<PremiumTab
|
||||
activationKey={window.mailpoet_activation_key}
|
||||
premiumStatus={getPremiumStatus()}
|
||||
mssKeyValid={window.mailpoet_mss_key_valid}
|
||||
mssStatus={getMssStatus()}
|
||||
premiumPluginActive={!!window.mailpoet_premium_version}
|
||||
/>,
|
||||
container
|
||||
|
Reference in New Issue
Block a user