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

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

@@ -1,8 +1,8 @@
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import React, { useState } from 'react';
import ReactStringReplace from 'react-string-replace';
import jQuery from 'jquery';
import MailPoet from 'mailpoet';
import Modal from 'common/modal/modal.jsx';
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>'
);
const showSetFromAddressModal = async () => {
MailPoet.Modal.popup({
title: MailPoet.I18n.t('setFromAddressModalTitle'),
template: ReactDOMServer.renderToString(
const removeUnauthorizedEmailNotices = () => {
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();
}
};
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">
<p>
{
@@ -65,6 +84,11 @@ const showSetFromAddressModal = async () => {
placeholder="from@mydomain.com"
data-parsley-required
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
@@ -72,50 +96,30 @@ const showSetFromAddressModal = async () => {
className="button button-primary"
type="submit"
value={MailPoet.I18n.t('setFromAddressModalSave')}
/>
</div>
),
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 () => {
onClick={async () => {
const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley();
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();
}
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 });
}
});
addressInput.addEventListener('input', () => {
addressValidator.removeError('saveError');
});
},
});
}}
/>
</div>
</Modal>
);
};
export default showSetFromAddressModal;
export default SetFromAddressModal;

12
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 ReactDOM from 'react-dom';
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 { MssStatus, MssMessages } from 'old_settings/premium_tab/messages/mss_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 [mssStatus, setMssStatus] = useState(key ? props.mssStatus : null);
const [mssKeyMessage, setMssKeyMessage] = useState(null);
const [showSetFromAddressModal, setShowSetFromAddressModal] = useState(false);
// key is considered valid if either Premium or MSS check passes
const keyValid = useMemo(() => {
@@ -142,6 +143,7 @@ const PremiumTab = (props) => {
}
return (
<>
<table className="form-table">
<tbody>
<tr>
@@ -198,7 +200,7 @@ const PremiumTab = (props) => {
|| settings.data.authorized_emails_addresses_check;
if (mssStatus === MssStatus.KEY_VALID_MSS_ACTIVE && authorizedAddressNeeded) {
showSetFromAddressModal();
setShowSetFromAddressModal(true);
}
}
}}
@@ -231,6 +233,12 @@ const PremiumTab = (props) => {
</tr>
</tbody>
</table>
{ showSetFromAddressModal && (
<SetFromAddressModal
onRequestClose={() => setShowSetFromAddressModal(false)}
/>
)}
</>
);
};