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

Merge pull request #1419 from mailpoet/send_tab_update

Browse Source 
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
parent 97cb9dd912 b758ec0797
commit d87acdd783
4 changed files with 157 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
assets/css/src/settings.styl
View File

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

2
views/settings.html
View File

@@ -15,9 +15,9 @@
> >
<!-- tabs --> <!-- tabs -->
<h2 class="nav-tab-wrapper" id="mailpoet_settings_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="#basics"><%= __('Basics') %></a>
<a class="nav-tab" href="#signup"><%= __('Sign-up Confirmation') %></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="#advanced"><%= __('Advanced') %></a>
<a class="nav-tab" href="#premium"><%= __('Key Activation') %></a> <a class="nav-tab" href="#premium"><%= __('Key Activation') %></a>
</h2> </h2>

130
views/settings/mta.html
View File

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

16
views/settings/premium.html
View File

@@ -74,19 +74,6 @@
href="<%= premium_activate_url | default('#') %>" href="<%= premium_activate_url | default('#') %>"
><%= __('Activate Premium.') %></a> ><%= __('Activate Premium.') %></a>
</div> </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> </td>
</tr> </tr>
</tbody> </tbody>
@@ -186,7 +173,8 @@
$('.mailpoet_notice_server').hide(); $('.mailpoet_notice_server').hide();
$('.mailpoet_mss_key_valid').text(response.data.message); $('.mailpoet_mss_key_valid').text(response.data.message);
$('.mailpoet_mss_key_valid').removeClass('mailpoet_hidden'); $('.mailpoet_mss_key_valid').removeClass('mailpoet_hidden');
updateMSSActivationUI(); $('#mta_group').val('mailpoet');
$('.mailpoet_sending_service_activate').trigger('click', false);
}).fail(function(response) { }).fail(function(response) {
if (response.errors.length > 0) { if (response.errors.length > 0) {
$('.mailpoet_mss_key_invalid').text( $('.mailpoet_mss_key_invalid').text(