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

Add all email contents and display the selected one

Browse Source 
[MAILPOET-2282]
This commit is contained in:
Amine Ben hammou
2019-10-18 21:18:46 +01:00
committed by Jack Kitterhing
parent bd5f18af29
commit 10d36393f6
7 changed files with 225 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/js/src/newsletter_editor/blocks/woocommerceContent.js
View File

@ -2,10 +2,11 @@ import App from 'newsletter_editor/App';
import BaseBlock from 'newsletter_editor/blocks/base'; import BaseBlock from 'newsletter_editor/blocks/base';
const BlockModel = BaseBlock.BlockModel.extend({ const BlockModel = BaseBlock.BlockModel.extend({
stale: ['styles'], stale: ['styles', 'selected'],
defaults() { defaults() {
return this._getDefaults({ return this._getDefaults({
type: 'woocommerceContent', type: 'woocommerceContent',
selected: 'new_account',
styles: { styles: {
titleColor: '#000000', titleColor: '#000000',
}, },
@ -38,8 +39,23 @@ const BlockView = BaseBlock.BlockView.extend({
this.model.set('styles.titleColor', value); this.model.set('styles.titleColor', value);
this.render(); this.render();
}); });
this.listenTo(App.getChannel(), 'changeWCEmailType', (value) => {
this.model.set('selected', value);
this.render();
});
},
getTemplate() {
if (this.model.get('selected') === 'new_account') {
return window.templates.woocommerceNewAccount;
}
if (this.model.get('selected') === 'processing_order') {
return window.templates.woocommerceProcessingOrder;
}
if (this.model.get('selected') === 'completed_order') {
return window.templates.woocommerceCompletedOrder;
}
return window.templates.woocommerceCustomerNote;
}, },
getTemplate() { return window.templates.woocommerceContentBlock; },
regions: { regions: {
toolsRegion: '.mailpoet_tools', toolsRegion: '.mailpoet_tools',
}, },
@ -52,7 +68,10 @@ const BlockView = BaseBlock.BlockView.extend({
return { return {
viewCid: this.cid, viewCid: this.cid,
model: this.model.toJSON(), model: this.model.toJSON(),
selected: this.model.get('selected'),
styles: this.model.get('styles').toJSON(), styles: this.model.get('styles').toJSON(),
siteName: window.mailpoet_site_name,
siteAddress: window.mailpoet_site_address,
}; };
}, },
}); });

2
lib/AdminPages/Pages/NewsletterEditor.php
View File

@ -77,6 +77,8 @@ class NewsletterEditor {
'email_base_color' => $this->wp->getOption('woocommerce_email_base_color', '#000000'), 'email_base_color' => $this->wp->getOption('woocommerce_email_base_color', '#000000'),
'email_text_color' => $this->wp->getOption('woocommerce_email_text_color', '#000000'), 'email_text_color' => $this->wp->getOption('woocommerce_email_text_color', '#000000'),
], ],
'site_name' => $this->wp->wpSpecialcharsDecode($this->wp->getOption('blogname'), ENT_QUOTES),
'site_address' => $this->wp->wpParseUrl($this->wp->homeUrl(), PHP_URL_HOST),
]; ];
$this->wp->wpEnqueueMedia(); $this->wp->wpEnqueueMedia();
$this->wp->wpEnqueueStyle('editor', $this->wp->includesUrl('css/editor.css')); $this->wp->wpEnqueueStyle('editor', $this->wp->includesUrl('css/editor.css'));

32
views/newsletter/editor.html
View File

@ -274,8 +274,20 @@
'newsletter/templates/components/sidebar/styles.hbs' 'newsletter/templates/components/sidebar/styles.hbs'
) %> ) %>
<%= partial( <%= partial(
'newsletter_editor_template_woocommerce_content_block', 'newsletter_editor_template_woocommerce_new_account_content',
'newsletter/templates/blocks/woocommerceContent/block.hbs' 'newsletter/templates/blocks/woocommerceContent/new_account.hbs'
) %>
<%= partial(
'newsletter_editor_template_woocommerce_processing_order_content',
'newsletter/templates/blocks/woocommerceContent/processing_order.hbs'
) %>
<%= partial(
'newsletter_editor_template_woocommerce_completed_order_content',
'newsletter/templates/blocks/woocommerceContent/completed_order.hbs'
) %>
<%= partial(
'newsletter_editor_template_woocommerce_customer_note_content',
'newsletter/templates/blocks/woocommerceContent/customer_note.hbs'
) %> ) %>
<%= partial( <%= partial(
'newsletter_editor_template_woocommerce_content_widget', 'newsletter_editor_template_woocommerce_content_widget',
@ -626,8 +638,17 @@
jQuery('#newsletter_editor_template_text_settings').html() jQuery('#newsletter_editor_template_text_settings').html()
), ),
woocommerceContentBlock: Handlebars.compile( woocommerceNewAccount: Handlebars.compile(
jQuery('#newsletter_editor_template_woocommerce_content_block').html() jQuery('#newsletter_editor_template_woocommerce_new_account_content').html()
),
woocommerceProcessingOrder: Handlebars.compile(
jQuery('#newsletter_editor_template_woocommerce_processing_order_content').html()
),
woocommerceCompletedOrder: Handlebars.compile(
jQuery('#newsletter_editor_template_woocommerce_completed_order_content').html()
),
woocommerceCustomerNote: Handlebars.compile(
jQuery('#newsletter_editor_template_woocommerce_customer_note_content').html()
), ),
woocommerceContentInsertion: Handlebars.compile( woocommerceContentInsertion: Handlebars.compile(
jQuery('#newsletter_editor_template_woocommerce_content_widget').html() jQuery('#newsletter_editor_template_woocommerce_content_widget').html()
@ -644,6 +665,9 @@
), ),
}; };
var mailpoet_site_name = '<%= site_name %>';
var mailpoet_site_address = '<%= site_address %>';
var config = { var config = {
availableStyles: { availableStyles: {
textSizes: [ textSizes: [

78
views/newsletter/templates/blocks/woocommerceContent/completed_order.hbs Normal file
View File

@ -0,0 +1,78 @@
<div class="mailpoet_tools"></div>
<style type="text/css">
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
color: {{ styles.titleColor }};
}
</style>
<div class="mailpoet_content mailpoet_woocommerce_content" data-automation-id="woocommerce_content">
<p style="margin:0 0 16px"><%= __('Hi %s,', 'woocommerce') | format('Elon') %></p>
<p style="margin:0 0 16px"><%= __('We have finished processing your order.', 'woocommerce') %></p>
<h2 style="display:block;font-family:&quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif;font-size:18px;font-weight:bold;line-height:130%;margin:0 0 18px;text-align:left">
<%= __('[Order #0001]', 'woocommerce') %></h2>
<div style="margin-bottom:40px">
<table class="m_3180768237544866075td" cellspacing="0" cellpadding="6" border="1" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;width:100%;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif">
<thead>
<tr>
<th class="m_3180768237544866075td" scope="col" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Product', 'woocommerce') %></th>
<th class="m_3180768237544866075td" scope="col" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Quantity', 'woocommerce') %></th>
<th class="m_3180768237544866075td" scope="col" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Price', 'woocommerce') %></th>
</tr>
</thead>
<tbody>
<tr class="m_3180768237544866075order_item">
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;padding:12px;text-align:left;vertical-align:middle;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;word-wrap:break-word">
My First Product </td>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;padding:12px;text-align:left;vertical-align:middle;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif">
1 </td>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;padding:12px;text-align:left;vertical-align:middle;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif">
<span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">10,00<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="m_3180768237544866075td" scope="row" colspan="2" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left;border-top-width:4px"><%= __('Subtotal:', 'woocommerce') %></th>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left;border-top-width:4px"><span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">10,00<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span></td>
</tr>
<tr>
<th class="m_3180768237544866075td" scope="row" colspan="2" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Shipping:', 'woocommerce') %></th>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left">
<span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">4,90<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span>
</td>
</tr>
<tr>
<th class="m_3180768237544866075td" scope="row" colspan="2" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Payment method:', 'woocommerce') %></th>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left">Paypal</td>
</tr>
<tr>
<th class="m_3180768237544866075td" scope="row" colspan="2" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Total:', 'woocommerce') %></th>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left">
<span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">14,90<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span> <small class="m_3180768237544866075includes_tax">(includes <span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">0,91<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span> VAT)</small>
</td>
</tr>
</tfoot>
</table>
</div>
<table id="m_3180768237544866075addresses" cellspacing="0" cellpadding="0" border="0" style="width:100%;vertical-align:top;margin-bottom:40px;padding:0">
<tbody><tr>
<td valign="top" width="50%" style="text-align:left;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;border:0;padding:0">
<h2 style="display:block;font-family:&quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif;font-size:18px;font-weight:bold;line-height:130%;margin:0 0 18px;text-align:left"><%= __('Billing address', 'woocommerce') %></h2>
<address class="m_3180768237544866075address" style="padding:12px;color:#737373;border:1px solid #e4e4e4">Elon Musk<br>42 rue Blue Origin<br>75000 Paris<br>France</address>
</td>
<td valign="top" width="50%" style="text-align:left;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;padding:0">
<h2 style="display:block;font-family:&quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif;font-size:18px;font-weight:bold;line-height:130%;margin:0 0 18px;text-align:left"><%= __('Shipping address', 'woocommerce') %></h2>
<address class="m_3180768237544866075address" style="padding:12px;color:#737373;border:1px solid #e4e4e4">Elon Musk<br>42 rue Blue Origin<br>75000 Paris<br>France</address>
</td>
</tr>
</tbody></table>
<p style="margin:0 0 16px"><%= __('Thanks for shopping with us.', 'woocommerce') %></p>
</div>
<div class="mailpoet_block_highlight"></div>

80
views/newsletter/templates/blocks/woocommerceContent/customer_note.hbs Normal file
View File

@ -0,0 +1,80 @@
<div class="mailpoet_tools"></div>
<style type="text/css">
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
color: {{ styles.titleColor }};
}
</style>
<div class="mailpoet_content mailpoet_woocommerce_content" data-automation-id="woocommerce_content">
<p style="margin:0 0 16px"><%= __('Hi %s,', 'woocommerce') | format('Elon') %></p>
<p style="margin:0 0 16px"><%= __('The following note has been added to your order:', 'woocommerce') %></p>
<blockquote>
<p style="margin:0 0 16px">Hi Elon, welcome to MailPoet!</p>
</blockquote>
<p style="margin:0 0 16px"><%= __('As a reminder, here are your order details:', 'woocommerce') %></p>
<h2 style="display:block;font-family:&quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif;font-size:18px;font-weight:bold;line-height:130%;margin:0 0 18px;text-align:left">
<%= __('[Order #0001]', 'woocommerce') %></h2>
<div style="margin-bottom:40px">
<table class="m_3180768237544866075td" cellspacing="0" cellpadding="6" border="1" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;width:100%;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif">
<thead>
<tr>
<th class="m_3180768237544866075td" scope="col" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Product', 'woocommerce') %></th>
<th class="m_3180768237544866075td" scope="col" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Quantity', 'woocommerce') %></th>
<th class="m_3180768237544866075td" scope="col" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Price', 'woocommerce') %></th>
</tr>
</thead>
<tbody>
<tr class="m_3180768237544866075order_item">
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;padding:12px;text-align:left;vertical-align:middle;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;word-wrap:break-word">
My First Product </td>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;padding:12px;text-align:left;vertical-align:middle;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif">
1 </td>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;padding:12px;text-align:left;vertical-align:middle;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif">
<span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">10,00<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="m_3180768237544866075td" scope="row" colspan="2" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left;border-top-width:4px"><%= __('Subtotal:', 'woocommerce') %></th>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left;border-top-width:4px"><span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">10,00<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span></td>
</tr>
<tr>
<th class="m_3180768237544866075td" scope="row" colspan="2" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Shipping:', 'woocommerce') %></th>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left">
<span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">4,90<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span>
</td>
</tr>
<tr>
<th class="m_3180768237544866075td" scope="row" colspan="2" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Payment method:', 'woocommerce') %></th>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left">Paypal</td>
</tr>
<tr>
<th class="m_3180768237544866075td" scope="row" colspan="2" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left"><%= __('Total:', 'woocommerce') %></th>
<td class="m_3180768237544866075td" style="color:#737373;border:1px solid #e4e4e4;vertical-align:middle;padding:12px;text-align:left">
<span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">14,90<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span> <small class="m_3180768237544866075includes_tax">(includes <span class="m_3180768237544866075woocommerce-Price-amount m_3180768237544866075amount">0,91<span class="m_3180768237544866075woocommerce-Price-currencySymbol">€</span></span> VAT)</small>
</td>
</tr>
</tfoot>
</table>
</div>
<table id="m_3180768237544866075addresses" cellspacing="0" cellpadding="0" border="0" style="width:100%;vertical-align:top;margin-bottom:40px;padding:0">
<tbody><tr>
<td valign="top" width="50%" style="text-align:left;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;border:0;padding:0">
<h2 style="display:block;font-family:&quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif;font-size:18px;font-weight:bold;line-height:130%;margin:0 0 18px;text-align:left"><%= __('Billing address', 'woocommerce') %></h2>
<address class="m_3180768237544866075address" style="padding:12px;color:#737373;border:1px solid #e4e4e4">Elon Musk<br>42 rue Blue Origin<br>75000 Paris<br>France</address>
</td>
<td valign="top" width="50%" style="text-align:left;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;padding:0">
<h2 style="display:block;font-family:&quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif;font-size:18px;font-weight:bold;line-height:130%;margin:0 0 18px;text-align:left"><%= __('Shipping address', 'woocommerce') %></h2>
<address class="m_3180768237544866075address" style="padding:12px;color:#737373;border:1px solid #e4e4e4">Elon Musk<br>42 rue Blue Origin<br>75000 Paris<br>France</address>
</td>
</tr>
</tbody></table>
<p style="margin:0 0 16px"><%= __('Thanks for reading.', 'woocommerce') %></p>
</div>
<div class="mailpoet_block_highlight"></div>

14
views/newsletter/templates/blocks/woocommerceContent/new_account.hbs Normal file
View File

@ -0,0 +1,14 @@
<div class="mailpoet_tools"></div>
<style type="text/css">
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
color: {{ styles.titleColor }};
}
</style>
<div class="mailpoet_content mailpoet_woocommerce_content" data-automation-id="woocommerce_content">
<p style="margin:0 0 16px"><%= __('Hi %s,', 'woocommerce') | format('Elon') %></p>
<p style="margin:0 0 16px"><%= __('Thanks for creating an account on %1$s. Your username is %2$s. You can access your account area to view orders, change your password, and more at: %3$s', 'woocommerce') | format('{{siteName}}', '<strong>elon.musk</strong>', '<a href="http://{{siteAddress}}" style="color:#fe5301;font-weight:normal;text-decoration:underline" target="_blank">{{siteAddress}}</a>') | raw %></p>
<p style="margin:0 0 16px"><%= __('We look forward to seeing you soon.', 'woocommerce') %>.</p>
</div>
<div class="mailpoet_block_highlight"></div>

4
views/newsletter/templates/blocks/woocommerceContent/block.hbs → views/newsletter/templates/blocks/woocommerceContent/processing_order.hbs
View File

@ -12,7 +12,7 @@
<h2 <h2
style="display:block;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;font-size:18px;font-weight:bold;line-height:130%;margin:0 0 18px;text-align:left"> style="display:block;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;font-size:18px;font-weight:bold;line-height:130%;margin:0 0 18px;text-align:left">
[Order #0001]</h2> <%= __('[Order #0001]', 'woocommerce') %></h2>
<div style="margin-bottom:40px"> <div style="margin-bottom:40px">
<table class="m_3180768237544866075td" cellspacing="0" cellpadding="6" border="1" <table class="m_3180768237544866075td" cellspacing="0" cellpadding="6" border="1"
@ -111,6 +111,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p style="margin:0 0 16px"><%= __('Thanks for your order!', 'woocommerce') %></p> <p style="margin:0 0 16px"><%= __('Thanks for shopping with us.', 'woocommerce') %></p>
</div> </div>
<div class="mailpoet_block_highlight"></div> <div class="mailpoet_block_highlight"></div>