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

Rewrite set FROM address modal to React WIP

Browse Source 
[MAILPOET-2804]
This commit is contained in:
Jan Jakeš
2020-03-30 16:44:46 +02:00
committed by Veljko V
parent 5f6a4cf3c8
commit c743521ab7
2 changed files with 149 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
assets/js/src/common/set_from_address_modal.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react'; import React, { useState } from 'react';
import ReactDOMServer from 'react-dom/server';
import ReactStringReplace from 'react-string-replace'; import ReactStringReplace from 'react-string-replace';
import jQuery from 'jquery'; import jQuery from 'jquery';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import Modal from 'common/modal/modal.jsx';
const mailPoetApiVersion = (window as any).mailpoet_api_version as string; const mailPoetApiVersion = (window as any).mailpoet_api_version as string;
@@ -35,10 +35,29 @@ const getSuccessMessage = (): string => MailPoet.I18n.t('setFromAddressEmailSucc
'<a href="?page=mailpoet-settings#basics" rel="noopener noreferrer">$1</a>' '<a href="?page=mailpoet-settings#basics" rel="noopener noreferrer">$1</a>'
); );
const showSetFromAddressModal = async () => { const removeUnauthorizedEmailNotices = () => {
MailPoet.Modal.popup({ const unauthorizedEmailNotice = document.querySelector('[data-notice="unauthorized-email-addresses-notice"]');
title: MailPoet.I18n.t('setFromAddressModalTitle'), if (unauthorizedEmailNotice) {
template: ReactDOMServer.renderToString( unauthorizedEmailNotice.remove();
}
const unauthorizedEmailInNewsletterNotice = document.querySelector('[data-notice="unauthorized-email-in-newsletters-addresses-notice"]');
if (unauthorizedEmailInNewsletterNotice) {
unauthorizedEmailInNewsletterNotice.remove();
}
};
type Props = {
onRequestClose: () => void,
};
const SetFromAddressModal = ({ onRequestClose }: Props) => {
const [address, setAddress] = useState(null);
return (
<Modal
title={MailPoet.I18n.t('setFromAddressModalTitle')}
onRequestClose={onRequestClose}
>
<div id="set-from-address-modal"> <div id="set-from-address-modal">
<p> <p>
{ {
@@ -65,6 +84,11 @@ const showSetFromAddressModal = async () => {
placeholder="from@mydomain.com" placeholder="from@mydomain.com"
data-parsley-required data-parsley-required
data-parsley-type="email" data-parsley-type="email"
onChange={(event) => {
setAddress(event.target.value.trim() || null);
const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley();
addressValidator.removeError('saveError');
}}
/> />
<input <input
@@ -72,50 +96,30 @@ const showSetFromAddressModal = async () => {
className="button button-primary" className="button button-primary"
type="submit" type="submit"
value={MailPoet.I18n.t('setFromAddressModalSave')} value={MailPoet.I18n.t('setFromAddressModalSave')}
onClick={async () => {
const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley();
addressValidator.validate();
if (!addressValidator.isValid()) {
return;
}
if (!address) {
return;
}
try {
await handleSave(address);
onRequestClose();
removeUnauthorizedEmailNotices();
MailPoet.Notice.success(getSuccessMessage());
} catch (e) {
const error = e.errors && e.errors[0] ? e.errors[0] : null;
const message = getErrorMessage(error);
addressValidator.addError('saveError', { message });
}
}}
/> />
</div> </div>
), </Modal>
onInit: () => { );
const saveButton = document.getElementById('mailpoet_set_from_address_modal_save') as HTMLInputElement;
const addressInput = document.getElementById('mailpoet_set_from_address_modal_address') as HTMLInputElement;
const addressValidator = jQuery(addressInput).parsley();
saveButton.addEventListener('click', async () => {
addressValidator.validate();
if (!addressValidator.isValid()) {
return;
}
const address = addressInput.value.trim() || null;
if (!address) {
return;
}
try {
await handleSave(address);
MailPoet.Modal.close();
// remove unauthorized email notices
const unauthorizedEmailNotice = document.querySelector('[data-notice="unauthorized-email-addresses-notice"]');
if (unauthorizedEmailNotice) {
unauthorizedEmailNotice.remove();
}
const unauthorizedEmailInNewsletterNotice = document.querySelector('[data-notice="unauthorized-email-in-newsletters-addresses-notice"]');
if (unauthorizedEmailInNewsletterNotice) {
unauthorizedEmailInNewsletterNotice.remove();
}
MailPoet.Notice.success(getSuccessMessage());
} catch (e) {
const error = e.errors && e.errors[0] ? e.errors[0] : null;
const message = getErrorMessage(error);
addressValidator.addError('saveError', { message });
}
});
addressInput.addEventListener('input', () => {
addressValidator.removeError('saveError');
});
},
});
}; };
export default showSetFromAddressModal; export default SetFromAddressModal;

184
assets/js/src/old_settings/premium_tab/premium_tab.jsx
View File

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import showSetFromAddressModal from 'common/set_from_address_modal.tsx'; import SetFromAddressModal from 'common/set_from_address_modal.tsx';
import KeyMessages from 'old_settings/premium_tab/messages/key_messages.jsx'; import KeyMessages from 'old_settings/premium_tab/messages/key_messages.jsx';
import { MssStatus, MssMessages } from 'old_settings/premium_tab/messages/mss_messages.jsx'; import { MssStatus, MssMessages } from 'old_settings/premium_tab/messages/mss_messages.jsx';
import { PremiumStatus, PremiumMessages } from 'old_settings/premium_tab/messages/premium_messages.jsx'; import { PremiumStatus, PremiumMessages } from 'old_settings/premium_tab/messages/premium_messages.jsx';
@@ -50,6 +50,7 @@ const PremiumTab = (props) => {
const [premiumInstallationStatus, setPremiumInstallationStatus] = useState(null); const [premiumInstallationStatus, setPremiumInstallationStatus] = useState(null);
const [mssStatus, setMssStatus] = useState(key ? props.mssStatus : null); const [mssStatus, setMssStatus] = useState(key ? props.mssStatus : null);
const [mssKeyMessage, setMssKeyMessage] = useState(null); const [mssKeyMessage, setMssKeyMessage] = useState(null);
const [showSetFromAddressModal, setShowSetFromAddressModal] = useState(false);
// key is considered valid if either Premium or MSS check passes // key is considered valid if either Premium or MSS check passes
const keyValid = useMemo(() => { const keyValid = useMemo(() => {
@@ -142,95 +143,102 @@ const PremiumTab = (props) => {
} }
return ( return (
<table className="form-table"> <>
<tbody> <table className="form-table">
<tr> <tbody>
<th scope="row"> <tr>
<label htmlFor="mailpoet_premium_key"> <th scope="row">
{MailPoet.I18n.t('premiumTabActivationKeyLabel')} <label htmlFor="mailpoet_premium_key">
</label> {MailPoet.I18n.t('premiumTabActivationKeyLabel')}
<p className="description"> </label>
{MailPoet.I18n.t('premiumTabDescription')} <p className="description">
</p> {MailPoet.I18n.t('premiumTabDescription')}
</th> </p>
<td> </th>
<div> <td>
<input <div>
type="text" <input
id="mailpoet_premium_key" type="text"
className="regular-text" id="mailpoet_premium_key"
name="premium[premium_key]" className="regular-text"
value={key || ''} name="premium[premium_key]"
onChange={(event) => { value={key || ''}
setKey(event.target.value.trim() || null); onChange={(event) => {
setPremiumStatus(null); setKey(event.target.value.trim() || null);
setPremiumInstallationStatus(null); setPremiumStatus(null);
setMssStatus(null); setPremiumInstallationStatus(null);
}} setMssStatus(null);
/> }}
<button />
type="button" <button
id="mailpoet_premium_key_verify" type="button"
className="button-secondary" id="mailpoet_premium_key_verify"
onClick={async (event) => { className="button-secondary"
if (!key) { onClick={async (event) => {
MailPoet.Notice.error( if (!key) {
MailPoet.I18n.t('premiumTabNoKeyNotice'), MailPoet.Notice.error(
{ scroll: true }, MailPoet.I18n.t('premiumTabNoKeyNotice'),
); { scroll: true },
return; );
} return;
setPremiumStatus(null);
setPremiumInstallationStatus(null);
setMssStatus(null);
MailPoet.Modal.loading(true);
const isUserTriggered = event.isTrusted;
await verifyMailPoetSendingServiceKey(isUserTriggered);
await verifyMailPoetPremiumKey();
MailPoet.Modal.loading(false);
// show modal to set authorized FROM address, if needed
if (isUserTriggered) {
const settings = await getSettings();
const authorizedAddressNeeded = !settings.data.sender.address
|| settings.data.authorized_emails_addresses_check;
if (mssStatus === MssStatus.KEY_VALID_MSS_ACTIVE && authorizedAddressNeeded) {
showSetFromAddressModal();
} }
}
}} setPremiumStatus(null);
> setPremiumInstallationStatus(null);
{MailPoet.I18n.t('premiumTabVerifyButton')} setMssStatus(null);
</button>
</div> MailPoet.Modal.loading(true);
{keyValid !== null && ( const isUserTriggered = event.isTrusted;
<div className="key-activation-messages"> await verifyMailPoetSendingServiceKey(isUserTriggered);
<KeyMessages keyValid={keyValid} /> await verifyMailPoetPremiumKey();
{mssStatus !== null && ( MailPoet.Modal.loading(false);
<MssMessages
keyStatus={mssStatus} // show modal to set authorized FROM address, if needed
keyMessage={mssKeyMessage} if (isUserTriggered) {
activationCallback={() => verifyMailPoetSendingServiceKey(true)} const settings = await getSettings();
/> const authorizedAddressNeeded = !settings.data.sender.address
)} || settings.data.authorized_emails_addresses_check;
{premiumStatus !== null && (
<PremiumMessages if (mssStatus === MssStatus.KEY_VALID_MSS_ACTIVE && authorizedAddressNeeded) {
keyStatus={premiumStatus} setShowSetFromAddressModal(true);
keyMessage={premiumMessage} }
installationStatus={premiumInstallationStatus} }
installationCallback={installPremiumPlugin} }}
activationCallback={() => activatePremiumPlugin()} >
/> {MailPoet.I18n.t('premiumTabVerifyButton')}
)} </button>
</div> </div>
)} {keyValid !== null && (
</td> <div className="key-activation-messages">
</tr> <KeyMessages keyValid={keyValid} />
</tbody> {mssStatus !== null && (
</table> <MssMessages
keyStatus={mssStatus}
keyMessage={mssKeyMessage}
activationCallback={() => verifyMailPoetSendingServiceKey(true)}
/>
)}
{premiumStatus !== null && (
<PremiumMessages
keyStatus={premiumStatus}
keyMessage={premiumMessage}
installationStatus={premiumInstallationStatus}
installationCallback={installPremiumPlugin}
activationCallback={() => activatePremiumPlugin()}
/>
)}
</div>
)}
</td>
</tr>
</tbody>
</table>
{ showSetFromAddressModal && (
<SetFromAddressModal
onRequestClose={() => setShowSetFromAddressModal(false)}
/>
)}
</>
); );
}; };