Merge pull request #1419 from mailpoet/send_tab_update

Redesigns the "Send With..." tab [MAILPOET-1441]
This commit is contained in:
Michelle Shull
2018-07-16 10:11:01 -04:00
committed by GitHub
4 changed files with 157 additions and 149 deletions

View File

@@ -19,13 +19,15 @@
flex-direction column
flex-basis 0
margin 0 25px 25px 0
border 1px solid #dedede
background-color #fff
border 2px solid #dcdcdc
max-width 500px
.mailpoet_sending_method_description
padding: 25px
flex-grow 1
flex-shrink 0
&:hover:not(.mailpoet_active)
border-color #c5c5c5
> li:last-child
margin-right 0
h3
@@ -37,22 +39,36 @@
.mailpoet_status
display flex
flex-direction row
justify-content space-between
justify-content flex-end
align-items center
background-color #2f2f2f
background-color #dcdcdc
color #fff
text-overflow ellipsis
padding 15px
min-height 2em
padding 1em
span
visibility hidden
font-weight bold
div
margin-left 1em
.mailpoet_active
border 2px solid #088b00
&.mailpoet_invalid_key
border 2px solid #dc3232
.mailpoet_status
background-color #088b00
&.mailpoet_invalid_key
background-color #dc3232
.mailpoet_actions
color white
a:not(.button-primary)
color white
span
visibility visible
#mailpoet_mta_activate
visibility hidden
.mailpoet_actions
color initial
.tooltip.dashicons.dashicons-editor-help
line-height: 1.4

View File

@@ -15,9 +15,9 @@
>
<!-- tabs -->
<h2 class="nav-tab-wrapper" id="mailpoet_settings_tabs">
<a class="nav-tab" href="#mta"><%= __('Send With...') %></a>
<a class="nav-tab" href="#basics"><%= __('Basics') %></a>
<a class="nav-tab" href="#signup"><%= __('Sign-up Confirmation') %></a>
<a class="nav-tab" href="#mta"><%= __('Send With...') %></a>
<a class="nav-tab" href="#advanced"><%= __('Advanced') %></a>
<a class="nav-tab" href="#premium"><%= __('Key Activation') %></a>
</h2>

View File

@@ -1,4 +1,5 @@
<% set intervals = [1, 2, 5, 10, 15, 30] %>
<% set mss_key_valid = settings.mta.mailpoet_api_key_state.state == "valid" %>
<% set default_frequency = {
'website': {
'emails': 25,
@@ -57,103 +58,93 @@
<ul class="mailpoet_sending_methods">
<li
data-group="mailpoet"
<% if(settings.mta_group == 'mailpoet') %>class="mailpoet_active"<% endif %>
class="<% if(settings.mta_group == 'mailpoet') %> mailpoet_active <% endif %> <% if(not mss_key_valid) %> mailpoet_invalid_key <% endif %>"
>
<div class="mailpoet_sending_method_description">
<h3>
<%= __('MailPoet Sending Service') %>
</h3>
<p
class="mailpoet_description<% if(settings.mta_group != 'mailpoet') %> mailpoet_hidden<% endif %>"
id="mailpoet_sending_method_active_text"
>
<div class="mailpoet_description">
<span class="<% if(settings.mta_group != 'mailpoet') %> mailpoet_hidden<% endif %>" id="mailpoet_sending_method_active_text">
<strong><%= __("You're now sending with MailPoet!") %></strong>
<br />
<%= __("Great, you're all set up. Your emails will now be sent quickly and reliably!") %>
</p>
</span>
<div
class="mailpoet_description<% if(settings.mta_group == 'mailpoet') %> mailpoet_hidden<% endif %>"
id="mailpoet_sending_method_inactive_text"
>
<span class="<% if(settings.mta_group == 'mailpoet') %> mailpoet_hidden<% endif %>" id="mailpoet_sending_method_inactive_text">
<strong><%= __("Solve all of your sending problems!") %></strong>
</span>
<ul class="sending-method-benefits mailpoet_success">
<li class="mailpoet_success_item"><%= __('Reach the inbox, not the spam box.') %>
<li class="mailpoet_success_item"><%= __('Super fast: send up to 50,000 emails per hour.') %>
<li class="mailpoet_success_item"><%= __('All emails are signed with SPF & DKIM.') %>
<li class="mailpoet_success_item"><%= __('Automatically remove invalid and bounced addresses (bounce handling) to keep your lists clean.') %>
<li class="mailpoet_success_item"><%= __('Configuration is dead-simple: simply enter a key to activate the sending service.') %>
<li class="mailpoet_success_item"><strong><%= __('Plus:')%></strong> <%= __('get the Premium features for free.') %>
</li>
<li class="mailpoet_success_item"><%= __('Reach the inbox, not the spam box.') %></li>
<li class="mailpoet_success_item"><%= __('Easy configuration: enter a key to activate the sending service.') %></li>
<li class="mailpoet_success_item"><%= __('Super fast: send up to 50,000 emails per hour.') %></li>
<li class="mailpoet_success_item"><%= __('All emails are signed with SPF & DKIM.') %></li>
<li class="mailpoet_success_item"><%= __('Automatically remove invalid and bounced addresses (bounce handling) to keep your lists clean.') %></li>
</ul>
<a
href="<%= admin_url('admin.php?page=mailpoet-premium') %>"
class="button button-primary"
target="_blank"
><%= __('Find out more about our monthly plans') %></a>
<a href="https://www.mailpoet.com/free-plan/" class="button button-primary sending-free-plan-button" target="_blank">
<strong><%= __('new!') %></strong> <%= __('Try it for free (for up to 2,000 subscribers)') %>
</a>
<p class="mailpoet_sending_methods_help">
<% set badgeClassName = (is_new_user == true) ? 'mailpoet_badge mailpoet_badge_video' : 'mailpoet_badge mailpoet_badge_video mailpoet_badge_video_grey' %>
<%= __('[link]%s See video guide[/link]')
|format('<span class="dashicons dashicons-format-video"></span>')
|replaceLinkTags('https://beta.docs.mailpoet.com/article/235-video-guide-sending-options', {'class' : badgeClassName, 'target' : '_blank'}, 'link')
|raw
%>
</p>
</div>
</div>
<div class="mailpoet_status">
<div class="mailpoet_status <% if(settings.mta_group != 'mailpoet' or not mss_key_valid) %> mailpoet_invalid_key <% endif %>">
<div class="mailpoet_activated <% if(settings.mta_group != 'mailpoet' or not mss_key_valid) %> mailpoet_hidden <% endif %>">
<span><%= __('Activated') %></span>
</div>
<div class="mailpoet_actions">
<button
type="button"
class="mailpoet_sending_service_activate button-secondary"
<% if(settings.mta_group == 'mailpoet' or not(mss_key_valid)) %> disabled="disabled"<% endif %>
><%= __('Activate') %></button>
<div class="mailpoet_invalid_key <% if(mss_key_valid) %> mailpoet_hidden <% endif %>">
<a class="button-primary" href="https://www.mailpoet.com/free-plan/" rel="noopener noreferrer" target="_blank"><%= __('Get a free key') %></a>
or
<%=
__("[link]enter your key[/link]")
|replaceLinkTags('#premium')
|raw
%>
</div>
<div class="mailpoet_valid_key <% if(mss_key_valid or settings.mta_group == 'mailpoet') %> mailpoet_hidden <% endif %>">
<button type="button" class="mailpoet_sending_service_activate button-primary"><%= __('Activate') %></button>
</div>
</div>
</li>
<li
data-group="other"
<% if(settings.mta_group == 'smtp' or settings.mta_group == 'website') %>class="mailpoet_active"<% endif %>
<% if(settings.mta_group != 'mailpoet') %>class="mailpoet_active"<% endif %>
>
<div class="mailpoet_sending_method_description">
<h3><%= __('Other') %></h3>
<div class="mailpoet_description">
<strong><%= __('Send emails via your host (not recommended!) or via a third-party sender.') %></strong>
<ul class="sending-method-benefits mailpoet_error">
<li class="mailpoet_error_item"><%= __("Unless you're a pro, youll probably end up in spam.") %>
<li class="mailpoet_error_item"><%= __("Sending speed is limited by your host and/or your third-party (with a 2,000 per hour maximum).") %>
<li class="mailpoet_error_item"><%= __("Manual configuration of SPF and DKIM required.") %>
<li class="mailpoet_error_item"><%= __("Unless you're a pro, youll probably end up in spam.") %></li>
<li class="mailpoet_error_item"><%= __("Sending speed is limited by your host and/or your third-party (with a 2,000 per hour maximum).") %></li>
<li class="mailpoet_error_item"><%= __("Manual configuration of SPF and DKIM required.") %></li>
<li class="mailpoet_error_item"><%=
__("Bounce handling is available, but only with an extra [link]add-on[/link].")
|replaceLinkTags('https://wordpress.org/plugins/bounce-handler-mailpoet/', {'target' : '_blank'})
|raw
%>
<li class="mailpoet_error_item"><%= __("Youll need a separate plugin to send your WordPress site emails (optional).") %>
</li>
</ul>
</div>
</div>
<div class="mailpoet_status">
<span><%= __('Activated') %></span>
<div class="mailpoet_actions">
<a
class="button-secondary"
href="#mta/other"><%= __('Configure') %></a>
<% if(settings.mta_group == 'mailpoet') %>
<a class="button-primary mailpoet_other_sending_method_action" href="#mta/other"><%= __('Activate') %></a>
<% else %>
<a class="button-secondary mailpoet_other_sending_method_action" href="#mta/other"><%= __('Configure') %></a>
<% endif %>
</div>
</div>
</li>
</ul>
<p class="mailpoet_sending_methods_help help">
<% set badgeClassName = (is_new_user == true) ? 'mailpoet_badge mailpoet_badge_video' : 'mailpoet_badge mailpoet_badge_video mailpoet_badge_video_grey' %>
<%= __('Need help to pick? [link1]%s See video guide[/link1] [link2]or check out the comparison table of sending methods[/link2].')
|format('<span class="dashicons dashicons-format-video"></span>')
|replaceLinkTags('https://beta.docs.mailpoet.com/article/235-video-guide-sending-options', {'class' : badgeClassName, 'target' : '_blank'}, 'link1')
|replaceLinkTags('http://beta.docs.mailpoet.com/article/181-comparison-table-of-sending-methods', {'target' : '_blank'}, 'link2')
|raw
%>
</p>
<div id="mailpoet_sending_method_setup">
<!-- Sending Method: Other -->
@@ -605,7 +596,6 @@
</tr>
</tbody>
</table>
</div>
<table class="form-table">
<tbody>
@@ -669,6 +659,7 @@
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
jQuery(function($) {
@@ -762,9 +753,9 @@
});
// save configuration of a sending method
$('.mailpoet_sending_service_activate').on('click', function() {
$('.mailpoet_sending_service_activate').on('click', function(e, navigateToTab) {
$('#mta_group').val('mailpoet');
saveSendingMethodConfiguration('mailpoet');
saveSendingMethodConfiguration('mailpoet', navigateToTab);
});
$('.mailpoet_mta_setup_save').on('click', function() {
$('#mailpoet_smtp_method').trigger("change");
@@ -781,8 +772,7 @@
$('#other_frequency_emails').trigger("change");
<% endif %>
function saveSendingMethodConfiguration(group) {
function saveSendingMethodConfiguration(group, navigateToTab) {
// set sending method
if(group === undefined) {
MailPoet.Notice.error(
@@ -796,10 +786,16 @@
setSignupConfirmation(group);
// back to selection of sending methods
if (navigateToTab === undefined || navigateToTab === true) {
MailPoet.Router.navigate('mta', { trigger: true });
}
// save settings
$('.mailpoet_settings_submit > input').trigger('click');
if (group === 'mailpoet') {
updateMSSActivationUI()
}
}
}
@@ -1080,7 +1076,6 @@
// format daily emails number according to locale
options.daily_emails = options.daily_emails.toLocaleString();
$(options.output).html(
sending_frequency_template(options)
);
@@ -1128,11 +1123,20 @@
function updateMSSActivationUI() {
var $ = jQuery;
var group = $('.mailpoet_sending_methods .mailpoet_active').data('group');
var key_valid = !$('.mailpoet_mss_key_valid').hasClass('mailpoet_hidden');
var activation_possible = group !== 'mailpoet' && key_valid;
$('.mailpoet_sending_service_activate').prop('disabled', !activation_possible);
$('.mailpoet_mss_activate_notice').toggle(activation_possible);
var key_valid = $('.mailpoet_mss_key_valid').hasClass('mailpoet_hidden');
if (group !== 'mailpoet') {
$('.mailpoet_actions .mailpoet_invalid_key').toggleClass('mailpoet_hidden', !key_valid);
$('.mailpoet_actions .mailpoet_valid_key').toggleClass('mailpoet_hidden', key_valid);
$('.mailpoet_other_sending_method_action').removeClass('button-primary').addClass('button-secondary').text('<%= __('Configure') %>');
} else {
$('.mailpoet_actions .mailpoet_valid_key').addClass('mailpoet_hidden');
$('.mailpoet_activated').toggleClass('mailpoet_hidden', key_valid);
$('.mailpoet_other_sending_method_action').removeClass('button-secondary').addClass('button-primary').text('<%= __('Activate') %>');
$('.mailpoet_invalid_key').toggleClass('mailpoet_hidden', !key_valid);
$('.mailpoet_sending_methods li[data-group="'+group+'"], .mailpoet_sending_methods li[data-group="'+group+'"] > .mailpoet_status').toggleClass('mailpoet_invalid_key', key_valid)
}
};
</script>
<%= partial(

View File

@@ -74,19 +74,6 @@
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>
@@ -186,7 +173,8 @@
$('.mailpoet_notice_server').hide();
$('.mailpoet_mss_key_valid').text(response.data.message);
$('.mailpoet_mss_key_valid').removeClass('mailpoet_hidden');
updateMSSActivationUI();
$('#mta_group').val('mailpoet');
$('.mailpoet_sending_service_activate').trigger('click', false);
}).fail(function(response) {
if (response.errors.length > 0) {
$('.mailpoet_mss_key_invalid').text(