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

Disable buttons after first click

Browse Source 
[MAILPOET-2273]
This commit is contained in:
Amine Ben hammou
2019-09-25 20:49:15 +01:00
committed by Jack Kitterhing
parent 8a5cd7c353
commit 8d90239500
1 changed files with 74 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
assets/js/src/newsletters/types.jsx
View File

@@ -13,6 +13,13 @@ class NewsletterTypes extends React.Component {
}).isRequired, }).isRequired,
}; };
constructor(props) {
super(props);
this.state = {
isCreating: false,
};
}
setupNewsletter = (type) => { setupNewsletter = (type) => {
if (type !== undefined) { if (type !== undefined) {
this.props.history.push(`/new/${type}`); this.props.history.push(`/new/${type}`);
@@ -23,7 +30,7 @@ class NewsletterTypes extends React.Component {
} }
}; };
getAutomaticEmails = () => { getAutomaticEmails() {
if (!window.mailpoet_automatic_emails) return []; if (!window.mailpoet_automatic_emails) return [];
return _.map(window.mailpoet_automatic_emails, (automaticEmail) => { return _.map(window.mailpoet_automatic_emails, (automaticEmail) => {
@@ -39,7 +46,7 @@ class NewsletterTypes extends React.Component {
onClick={onClick} onClick={onClick}
role="button" role="button"
tabIndex={0} tabIndex={0}
disabled={!window.mailpoet_premium_active} disabled={!window.mailpoet_premium_active || this.state.isCreating}
onKeyDown={(event) => { onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key)) if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) { ) {
@@ -55,9 +62,10 @@ class NewsletterTypes extends React.Component {
return email; return email;
}); });
}; }
createNewsletter = (type) => { createNewsletter(type) {
this.setState({ isCreating: true });
MailPoet.trackEvent('Emails > Type selected', { MailPoet.trackEvent('Emails > Type selected', {
'MailPoet Free version': window.mailpoet_version, 'MailPoet Free version': window.mailpoet_version,
'Email type': type, 'Email type': type,
@@ -73,6 +81,7 @@ class NewsletterTypes extends React.Component {
}).done((response) => { }).done((response) => {
this.props.history.push(`/template/${response.data.id}`); this.props.history.push(`/template/${response.data.id}`);
}).fail((response) => { }).fail((response) => {
this.setState({ isCreating: false });
if (response.errors.length > 0) { if (response.errors.length > 0) {
MailPoet.Notice.error( MailPoet.Notice.error(
response.errors.map((error) => error.message), response.errors.map((error) => error.message),
@@ -80,37 +89,36 @@ class NewsletterTypes extends React.Component {
); );
} }
}); });
}; }
render() { render() {
const createStandardNewsletter = _.partial(this.createNewsletter, 'standard'); const createStandardNewsletter = _.partial(this.createNewsletter.bind(this), 'standard');
const createNotificationNewsletter = _.partial(this.setupNewsletter, 'notification'); const createNotificationNewsletter = _.partial(this.setupNewsletter.bind(this), 'notification');
const createWelcomeNewsletter = _.partial(this.setupNewsletter, 'welcome'); const createWelcomeNewsletter = _.partial(this.setupNewsletter.bind(this), 'welcome');
const defaultTypes = [ const defaultTypes = [
{ {
slug: 'standard', slug: 'standard',
title: MailPoet.I18n.t('regularNewsletterTypeTitle'), title: MailPoet.I18n.t('regularNewsletterTypeTitle'),
description: MailPoet.I18n.t('regularNewsletterTypeDescription'), description: MailPoet.I18n.t('regularNewsletterTypeDescription'),
action: (function action() { action: (
return ( <a
<a className="button button-primary"
className="button button-primary" data-automation-id="create_standard"
data-automation-id="create_standard" onClick={createStandardNewsletter}
onClick={createStandardNewsletter} role="button"
role="button" tabIndex={0}
tabIndex={0} disabled={this.state.isCreating}
onKeyDown={(event) => { onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key)) if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) { ) {
event.preventDefault(); event.preventDefault();
createStandardNewsletter(); createStandardNewsletter();
} }
}} }}
> >
{MailPoet.I18n.t('create')} {MailPoet.I18n.t('create')}
</a> </a>
); ),
}()),
}, },
{ {
slug: 'welcome', slug: 'welcome',
@@ -118,26 +126,25 @@ class NewsletterTypes extends React.Component {
description: MailPoet.I18n.t('welcomeNewsletterTypeDescription'), description: MailPoet.I18n.t('welcomeNewsletterTypeDescription'),
videoGuide: 'https://kb.mailpoet.com/article/254-video-guide-to-welcome-emails', videoGuide: 'https://kb.mailpoet.com/article/254-video-guide-to-welcome-emails',
videoGuideBeacon: '5b05ebf20428635ba8b2aa53', videoGuideBeacon: '5b05ebf20428635ba8b2aa53',
action: (function action() { action: (
return ( <a
<a className="button button-primary"
className="button button-primary" onClick={createWelcomeNewsletter}
onClick={createWelcomeNewsletter} data-automation-id="create_welcome"
data-automation-id="create_welcome" disabled={this.state.isCreating}
onKeyDown={(event) => { onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key)) if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) { ) {
event.preventDefault(); event.preventDefault();
createWelcomeNewsletter(); createWelcomeNewsletter();
} }
}} }}
role="button" role="button"
tabIndex={0} tabIndex={0}
> >
{MailPoet.I18n.t('setUp')} {MailPoet.I18n.t('setUp')}
</a> </a>
); ),
}()),
}, },
{ {
slug: 'notification', slug: 'notification',
@@ -145,26 +152,25 @@ class NewsletterTypes extends React.Component {
description: MailPoet.I18n.t('postNotificationNewsletterTypeDescription'), description: MailPoet.I18n.t('postNotificationNewsletterTypeDescription'),
videoGuide: 'https://kb.mailpoet.com/article/210-video-guide-to-post-notifications', videoGuide: 'https://kb.mailpoet.com/article/210-video-guide-to-post-notifications',
videoGuideBeacon: '59ba6fb3042863033a1cd5a5', videoGuideBeacon: '59ba6fb3042863033a1cd5a5',
action: (function action() { action: (
return ( <a
<a className="button button-primary"
className="button button-primary" data-automation-id="create_notification"
data-automation-id="create_notification" onClick={createNotificationNewsletter}
onClick={createNotificationNewsletter} role="button"
role="button" disabled={this.state.isCreating}
tabIndex={0} tabIndex={0}
onKeyDown={(event) => { onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key)) if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) { ) {
event.preventDefault(); event.preventDefault();
createNotificationNewsletter(); createNotificationNewsletter();
} }
}} }}
> >
{MailPoet.I18n.t('setUp')} {MailPoet.I18n.t('setUp')}
</a> </a>
); ),
}()),
}, },
]; ];