[ADD] mass_mailing: added bounce exchange banner

11 files changed, 521 insertions, 2 deletions

diff --git a/addons/mass_mailing/controllers/__init__.py b/addons/mass_mailing/controllers/__init__.py
index 8ee9bae18d9..fa333707c98 100644
--- a/addons/mass_mailing/controllers/__init__.py
+++ b/addons/mass_mailing/controllers/__init__.py
@@ -1 +1,4 @@
+# -*- coding: utf-8 -*-
+
 import main
+import website
diff --git a/addons/mass_mailing/controllers/main.py b/addons/mass_mailing/controllers/main.py
index 08d0bc37db4..d1e3b5a7657 100644
--- a/addons/mass_mailing/controllers/main.py
+++ b/addons/mass_mailing/controllers/main.py
@@ -1,3 +1,4 @@
+# -*- coding: utf-8 -*-
 
 import werkzeug
 
@@ -75,3 +76,13 @@ class MassMailController(http.Controller):
         cr, uid, context = request.cr, request.uid, request.context
         request.registry['website.links.click'].add_click(cr, uid, code, request.httprequest.remote_addr, request.session['geoip'].get('country_code'), stat_id=stat_id, context=context)
         return werkzeug.utils.redirect(request.registry['website.links'].get_url_from_code(cr, uid, code, context=context), 301)
+
+    @http.route(['/website_mass_mailing/get_content'], type='json', auth="public", website=True)
+    def get_mass_mailing_content(self, newsletter_id, **post):
+        data = self.is_subscriber(newsletter_id, **post)
+        mass_mailing_list = request.registry['mail.mass_mailing.list'].browse(request.cr, SUPERUSER_ID, int(newsletter_id), request.context)
+        data.update({
+            'content': mass_mailing_list.popup_content,
+            'redirect_url': mass_mailing_list.popup_redirect_url
+            })
+        return data
diff --git a/addons/mass_mailing/controllers/website.py b/addons/mass_mailing/controllers/website.py
new file mode 100644
index 00000000000..4222128535b
--- /dev/null
+++ b/addons/mass_mailing/controllers/website.py
@@ -0,0 +1,14 @@
+# -*- coding: utf-8 -*-
+
+from openerp import http
+from openerp.addons.website.controllers.main import Website
+
+
+class Website(Website):
+
+    @http.route(["/website_mass_mailing/field/popup_content"], type='http', auth="public", website=True)
+    def FieldTextHtmlPopupTemplate(self, model=None, res_id=None, field=None, callback=None, **kwargs):
+        kwargs['snippets'] = 'snippets' not in kwargs and '/website/snippets' or kwargs['snippets']
+        kwargs['dont_load_assets'] = False
+        kwargs['template'] = "mass_mailing.FieldTextHtmlPopupContent"
+        return self.FieldTextHtml(model, res_id, field, callback, **kwargs)
diff --git a/addons/mass_mailing/models/mass_mailing.py b/addons/mass_mailing/models/mass_mailing.py
index 57f8c6059ba..f3774f02252 100644
--- a/addons/mass_mailing/models/mass_mailing.py
+++ b/addons/mass_mailing/models/mass_mailing.py
@@ -11,7 +11,6 @@ from openerp.exceptions import UserError
 from openerp.tools.misc import DEFAULT_SERVER_DATETIME_FORMAT
 from openerp.tools.safe_eval import safe_eval as eval
 from openerp.tools import ustr
-from openerp.tools.translate import _
 from openerp.osv import osv, fields
 
 URL_REGEX = r'(\bhref=[\'"]([^\'"]+)[\'"])'
@@ -128,6 +127,23 @@ class MassMailingList(osv.Model):
             _get_contact_nbr, type='integer',
             string='Number of Contacts',
         ),
+        'popup_content': fields.html("Website Popup Content", translate=True, required=True, sanitize=False),
+        'popup_redirect_url': fields.char("Website Popup Redirect URL"),
+    }
+
+    def _get_default_popup_content(self, cr, uid, context=None):
+        return """<div class="o_popup_modal_header text-center">
+    <h3 class="o_popup_modal_title mt8">Odoo Presents</h3>
+</div>
+<div class="o_popup_message">
+    <font>7</font>
+    <strong>Business Hacks</strong>
+    <span> to<br/>boost your marketing</span>
+</div>
+<p class="o_message_paragraph">Join our Marketing newsletter and get <strong>this white paper instantly</strong></p>"""
+
+    _defaults = {
+        'popup_content': _get_default_popup_content,
     }
 
 
diff --git a/addons/mass_mailing/static/src/css/mass_mailing_popup.css b/addons/mass_mailing/static/src/css/mass_mailing_popup.css
new file mode 100644
index 00000000000..540a3e3a622
--- /dev/null
+++ b/addons/mass_mailing/static/src/css/mass_mailing_popup.css
@@ -0,0 +1,265 @@
+/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
+.editor_enable [data-oe-placeholder]:empty:not(:focus):before {
+  content: attr(data-oe-placeholder);
+  opacity: 0.3;
+}
+.o_popup_animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+@-webkit-keyframes o_popup_bounce_small {
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  40%,
+  43% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -14px, 0);
+    transform: translate3d(0, -14px, 0);
+  }
+  70% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -8px, 0);
+    transform: translate3d(0, -8px, 0);
+  }
+  90% {
+    -webkit-transform: translate3d(0, -2px, 0);
+    transform: translate3d(0, -2px, 0);
+  }
+}
+@keyframes o_popup_bounce_small {
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  40%,
+  43% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -14px, 0);
+    transform: translate3d(0, -14px, 0);
+  }
+  70% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -8px, 0);
+    transform: translate3d(0, -8px, 0);
+  }
+  90% {
+    -webkit-transform: translate3d(0, -2px, 0);
+    transform: translate3d(0, -2px, 0);
+  }
+}
+.o_popup_bounce_small {
+  -webkit-animation-name: o_popup_bounce_small;
+  animation-name: o_popup_bounce_small;
+  -webkit-transform-origin: center bottom;
+  -ms-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
+.o_popup_bounce_del500ms {
+  -webkit-animation-delay: 500ms;
+  animation-delay: 500ms;
+}
+#o_newsletter_popup .btn.btn-success {
+  color: #ffffff;
+  background-color: #21b799;
+  border-color: #1da187;
+}
+#o_newsletter_popup .btn.btn-success:hover,
+#o_newsletter_popup .btn.btn-success:focus,
+#o_newsletter_popup .btn.btn-success.focus,
+#o_newsletter_popup .btn.btn-success:active,
+#o_newsletter_popup .btn.btn-success.active,
+.open > .dropdown-toggle#o_newsletter_popup .btn.btn-success {
+  color: #ffffff;
+  background-color: #198c75;
+  border-color: #146e5c;
+}
+#o_newsletter_popup .btn.btn-success:active,
+#o_newsletter_popup .btn.btn-success.active,
+.open > .dropdown-toggle#o_newsletter_popup .btn.btn-success {
+  background-image: none;
+}
+#o_newsletter_popup .btn.btn-success.disabled,
+#o_newsletter_popup .btn.btn-success[disabled],
+fieldset[disabled] #o_newsletter_popup .btn.btn-success,
+#o_newsletter_popup .btn.btn-success.disabled:hover,
+#o_newsletter_popup .btn.btn-success[disabled]:hover,
+fieldset[disabled] #o_newsletter_popup .btn.btn-success:hover,
+#o_newsletter_popup .btn.btn-success.disabled:focus,
+#o_newsletter_popup .btn.btn-success[disabled]:focus,
+fieldset[disabled] #o_newsletter_popup .btn.btn-success:focus,
+#o_newsletter_popup .btn.btn-success.disabled.focus,
+#o_newsletter_popup .btn.btn-success[disabled].focus,
+fieldset[disabled] #o_newsletter_popup .btn.btn-success.focus,
+#o_newsletter_popup .btn.btn-success.disabled:active,
+#o_newsletter_popup .btn.btn-success[disabled]:active,
+fieldset[disabled] #o_newsletter_popup .btn.btn-success:active,
+#o_newsletter_popup .btn.btn-success.disabled.active,
+#o_newsletter_popup .btn.btn-success[disabled].active,
+fieldset[disabled] #o_newsletter_popup .btn.btn-success.active {
+  background-color: #21b799;
+  border-color: #1da187;
+}
+#o_newsletter_popup h1,
+#o_newsletter_popup h2,
+#o_newsletter_popup h3,
+#o_newsletter_popup h4,
+#o_newsletter_popup h5,
+#o_newsletter_popup h6,
+#o_newsletter_popup .h1,
+#o_newsletter_popup .h2,
+#o_newsletter_popup .h3,
+#o_newsletter_popup .h4,
+#o_newsletter_popup .h5,
+#o_newsletter_popup .h6 {
+  font-weight: 300;
+  color: #666;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+#o_newsletter_popup h1:first-child,
+#o_newsletter_popup h2:first-child,
+#o_newsletter_popup h3:first-child,
+#o_newsletter_popup h4:first-child,
+#o_newsletter_popup h5:first-child,
+#o_newsletter_popup h6:first-child,
+#o_newsletter_popup .h1:first-child,
+#o_newsletter_popup .h2:first-child,
+#o_newsletter_popup .h3:first-child,
+#o_newsletter_popup .h4:first-child,
+#o_newsletter_popup .h5:first-child,
+#o_newsletter_popup .h6:first-child {
+  margin-top: 0;
+}
+#o_newsletter_popup .o_popup_modal_content {
+  border-radius: 2px;
+  margin: 20px;
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.11);
+  -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.11);
+  border: 1px solid #767676;
+  background: #f2f2f2;
+}
+#o_newsletter_popup .o_popup_modal_content:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(42%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
+  background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_header {
+  background: #6c1153;
+  padding: 5px;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_header .o_popup_modal_title {
+  color: #ffffff;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_header * {
+  position: relative;
+  z-index: 1;
+}
+#o_newsletter_popup .o_popup_modal_content a.o_popup_btn_close {
+  position: absolute;
+  z-index: 99;
+  right: 5px;
+  top: 6px;
+  width: 23px;
+  height: 23px;
+  display: block;
+  text-align: center;
+  border-radius: 100em;
+  background: #6c1153;
+  color: #daa3cb;
+  text-decoration: none;
+  -webkit-transition: all ease 200ms;
+  -moz-transition: all ease 200ms;
+  -ms-transition: all ease 200ms;
+  -o-transition: all ease 200ms;
+}
+#o_newsletter_popup .o_popup_modal_content a.o_popup_btn_close:hover {
+  background: #89296e;
+  color: #ffffff;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body {
+  padding: 0px 0px 30px;
+  color: #666666;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev {
+  padding-bottom: 15px;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev .o_popup_message {
+  font-size: 3em;
+  position: relative;
+  text-align: left;
+  padding-left: 2em;
+  line-height: 1;
+  margin: .5em;
+  font-weight: 100;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev .o_popup_message font {
+  font-weight: 600;
+  color: #a24689;
+  font-size: 2.5em;
+  font-style: italic;
+  position: absolute;
+  top: -0.1em;
+  margin-left: -0.65em;
+  background: -webkit-linear-gradient(#bf70a9, #a24689);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev .o_popup_message strong {
+  color: #a24689;
+  background: -webkit-linear-gradient(#bf70a9, #a24689);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .o_popup_content_dev .o_message_paragraph {
+  position: relative;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .input-group {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 350px;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .input-group input {
+  border-radius: 2px 0 0 2px;
+  border: none;
+  outline: 0;
+  box-shadow: inset 0 -1px #cccccc;
+}
+#o_newsletter_popup .o_popup_modal_content .o_popup_modal_body .input-group .btn {
+  border-radius: 0 2px 2px 0;
+  border-width: 0 0 1px;
+  padding-top: 7px;
+  margin-left: -1px;
+  -webkit-transition: all ease 200ms;
+  -moz-transition: all ease 200ms;
+  -ms-transition: all ease 200ms;
+  -o-transition: all ease 200ms;
+}
diff --git a/addons/mass_mailing/static/src/img/blocks/bounce.png b/addons/mass_mailing/static/src/img/blocks/bounce.png
new file mode 100644
index 00000000000..c0cd2562ce6
--- /dev/null
+++ b/addons/mass_mailing/static/src/img/blocks/bounce.png
diff --git a/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js
index 0a460caaa81..675540bf044 100644
--- a/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js
+++ b/addons/mass_mailing/static/src/js/website_mass_mailing.editor.js
@@ -24,13 +24,81 @@
             var self = this;
             this._super();
             this.choose_mailing_list('click').fail(function () {
-                self.editor.on_remove();
+                self.editor.on_remove($.Event( "click" ));
             });
         },
         clean_for_save: function () {
             this.$target.addClass("hidden");
         },
     });
+
+    website.snippet.options.newsletter_popup = website.snippet.Option.extend({
+        select_mailing_list: function (type) {
+            var self = this;
+            if (type !== "click") return;
+            return website.prompt({
+                id: "editor_new_mailing_list_subscribe_popup",
+                window_title: _t("Add a Newsletter Subscribe Popup"),
+                select: _t("Newsletter"),
+                init: function () {
+                    return website.session.model('mail.mass_mailing.list')
+                            .call('name_search', [], { context: website.get_context() });
+                },
+            }).then(function (mailing_list_id) {
+                openerp.jsonRpc('/web/dataset/call', 'call', {
+                    model: 'mail.mass_mailing.list',
+                    method: 'read',
+                    args: [[parseInt(mailing_list_id)], ['popup_content'], website.get_context()],
+                }).then(function (data) {
+                    self.$target.find(".o_popup_content_dev").empty();
+                    if (data && data[0].popup_content) {
+                        $(data[0].popup_content).appendTo(self.$target.find(".o_popup_content_dev"));
+                    }
+                });
+                self.$target.attr("data-list-id", mailing_list_id);
+            });
+        },
+        drop_and_build_snippet: function() {
+            var self = this;
+            this._super();
+            this.select_mailing_list('click').fail(function () {
+                self.editor.on_remove($.Event( "click" ));
+            });
+        },
+    });
+
+    website.EditorBar.include({
+            edit: function () {
+                this._super();
+                $('body').on('click','#edit_dialog',_.bind(this.edit_dialog, this.rte.editor));
+            },
+            save : function() {
+                var $target = $('#wrapwrap').find('#o_newsletter_popup');
+                if ($target && $target.length) {
+                    $target.modal('hide');
+                    $target.css("display", "none");
+                    $('.o_popup_bounce_small').show();
+                    if (!$target.find('.o_popup_content_dev').length) {
+                        $target.find('.o_popup_modal_body').prepend($('<div class="o_popup_content_dev" data-oe-placeholder="Type Here ..."></div>'));
+                    }
+                    var content = $('#wrapwrap .o_popup_content_dev').html();
+                    var newsletter_id = $target.parent().attr('data-list-id');
+                    openerp.jsonRpc('/web/dataset/call', 'call', {
+                        model: 'mail.mass_mailing.list',
+                        method: 'write',
+                        args: [parseInt(newsletter_id),
+                           {'popup_content':content},
+                           website.get_context()],
+                    });
+                }
+                return this._super();
+            },
+            edit_dialog : function() {
+                $('#wrapwrap').find('#o_newsletter_popup').modal('show');
+                $('.o_popup_bounce_small').hide();
+                $('.modal-backdrop').css("z-index", "0");
+            },
+        });
 })();
 
 
diff --git a/addons/mass_mailing/static/src/js/website_mass_mailing.js b/addons/mass_mailing/static/src/js/website_mass_mailing.js
index 7755c4bd001..c11a109b733 100644
--- a/addons/mass_mailing/static/src/js/website_mass_mailing.js
+++ b/addons/mass_mailing/static/src/js/website_mass_mailing.js
@@ -56,6 +56,65 @@
         },
     });
 
+    website.snippet.animationRegistry.newsletter_popup = website.snippet.Animation.extend({
+        selector: ".o_newsletter_popup",
+        start: function (editable_mode) {
+            var self = this;
+            var popupcontent = self.$target.find(".o_popup_content_dev").empty();
+
+            openerp.jsonRpc('/website_mass_mailing/get_content', 'call', {
+                newsletter_id: self.$target.data('list-id')
+            }).then(function (data) {
+                if (data.content) {
+                    $('<div></div>').append(data.content).appendTo(popupcontent);
+                }
+                self.$target.find('input.popup_subscribe_email').val(data.email || "");
+                self.redirect_url = data.redirect_url;
+                if (!editable_mode && !data.is_subscriber) {
+                    $(document).on('mouseleave', _.bind(self.show_banner, self));
+
+                    self.$target.find('.popup_subscribe_btn').on('click', function (event) {
+                        event.preventDefault();
+                        self.on_click_subscribe();
+                    });
+                } else { $(document).off('mouseleave'); }
+            });
+        },
+        on_click_subscribe: function () {
+            var self = this;
+            var $email = self.$target.find(".popup_subscribe_email:visible");
+
+            if ($email.length && !$email.val().match(/.+@.+/)) {
+                self.$target.addClass('has-error');
+                return false;
+            }
+            self.$target.removeClass('has-error');
+
+            openerp.jsonRpc('/website_mass_mailing/subscribe', 'call', {
+                'list_id': self.$target.data('list-id'),
+                'email': $email.length ? $email.val() : false
+            }).then(function (subscribe) {
+                self.$target.find('#o_newsletter_popup').modal('hide');
+                $(document).off('mouseleave');
+                if (self.redirect_url) {
+                    if (_.contains(self.redirect_url.split('/'), window.location.host) || self.redirect_url.indexOf('/')== 0) {
+                        window.location.href = self.redirect_url;
+                    } else { window.open(self.redirect_url, '_blank'); }
+                }
+            });
+        },
+        show_banner: function() {
+            var self = this;
+            if (!openerp.get_cookie("newsletter-popup-"+ self.$target.data('list-id')) && self.$target) {
+               $('#o_newsletter_popup:first').modal('show').css({
+                    'margin-top': '70px',
+                    'position': 'fixed'
+                });
+                 document.cookie = "newsletter-popup-"+ self.$target.data('list-id') +"=" + true + ";path=/";
+            }
+        }
+    });
+
     openerp.website.if_dom_contains('div.o_unsubscribe_form', function() {
         $('#unsubscribe_form').on('submit', function(e) {
             e.preventDefault();
diff --git a/addons/mass_mailing/views/mass_mailing.xml b/addons/mass_mailing/views/mass_mailing.xml
index 245a4346dcc..19311b06766 100644
--- a/addons/mass_mailing/views/mass_mailing.xml
+++ b/addons/mass_mailing/views/mass_mailing.xml
@@ -255,7 +255,15 @@
                             <h1>
                                 <field name="name"/>
                             </h1>
+                            <group>
+                                <field name="popup_redirect_url"/>
+                            </group>
                         </div>
+                        <notebook>
+                            <page string="Popup Content">
+                                <field name="popup_content" options="{'editor_url': '/website_mass_mailing/field/popup_content'}"/>
+                            </page>
+                        </notebook>
                     </sheet>
                 </form>
             </field>
diff --git a/addons/mass_mailing/views/snippets.xml b/addons/mass_mailing/views/snippets.xml
index e32d216d0bc..fa1982a20d6 100644
--- a/addons/mass_mailing/views/snippets.xml
+++ b/addons/mass_mailing/views/snippets.xml
@@ -38,5 +38,79 @@
 
 </template>
 
+        <template id="website_popup_snippet" name="popup snippet" inherit_id="website.snippets">
+            <xpath expr="//div[@id='snippet_feature']/div[@class='o_panel_body']" position="inside">
+                <div>
+                    <div class="oe_snippet_thumbnail">
+                        <img class="oe_snippet_thumbnail_img" src="/mass_mailing/static/src/img/blocks/bounce.png" />
+                        <span class="oe_snippet_thumbnail_title">Newsletter Popup</span>
+                    </div>
+
+                    <div class="o_newsletter_popup" data-list-id="0">
+                        <div class="alert alert-warning alert-dismissible fade in css_non_editable_mode_hidden o_not_editable" role="alert">
+                            <strong>Newsletter Popup!</strong> The newsletter popup snippet effect is active on this page. Click <a id="edit_dialog" href="#">Here To Edit Dialog Content</a>
+                        </div>
+                        <div class="modal modal-dialog modal-md fade fade-custom" id="o_newsletter_popup" tabindex="-1" role="dialog">
+                            <div class="modal-content o_popup_modal_content">
+                                <a href="#" class="o_popup_btn_close o_not_editable" data-dismiss="modal">&amp;times;</a>
+
+                                <div class="o_popup_modal_body text-center">
+                                    <div class="o_popup_content_dev" data-oe-placeholder="Type Here ..."/>
+                                    <div class="input-group o_not_editable o_popup_animated o_popup_bounce_del500ms o_popup_bounce_small" >
+                                        <input type="email" name="email" class="popup_subscribe_email form-control" placeholder="your email..." autofocus="autofocus"/>
+                                        <span class="input-group-btn">
+                                            <a href="#" class="btn btn-success popup_subscribe_btn">Subscribe</a>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+        </template>
+
+        <template id="website_popup_options" name="Popup Options" inherit_id="website.snippet_options">
+            <xpath expr="//div" position="after">
+                <div data-js='newsletter_popup'
+                    data-selector=".o_newsletter_popup"
+                    data-drop-in=".oe_structure, [data-oe-type=html]">
+                    <li data-select_mailing_list=""><a>Change Newsletter</a></li>
+                </div>
+            </xpath>
+        </template>
+
+        <template id="FieldTextHtmlPopupContent" name="Editor layout">
+            <t t-set="head">
+                <link rel="stylesheet" href="/website_mail/static/src/css/snippets.css" type="text/css"/>
+                <link rel="stylesheet" href="/mass_mailing/static/src/css/mass_mailing_popup.css" type="text/css"/>
+                <link rel="stylesheet" href="/website_mail/static/src/css/website_mail_iframe.css" type="text/css"/>
+             </t>
+            <t t-call="website.editor_layout">
+                <div class="modal-dialog modal-md show" id="o_newsletter_popup">
+                    <div class="modal-content o_popup_modal_content">
+                        <div class="o_popup_modal_body text-center">
+                            <div class="o_popup_content_dev">
+                                <div class="o_editable" t-att-data-oe-model="model" t-att-data-oe-field="field" t-att-data-oe-id="res_id" data-oe-type="html">
+                                    <!-- Can be removed once default values are ok for the editor -->
+                                    <t t-raw="content">
+                                        <div class="o_popup_modal_header text-center">
+                                            <h3 class="o_popup_modal_title mt8">Odoo Presents</h3>
+                                        </div>
+                                        <div class="o_popup_message">
+                                            <font>7</font>
+                                            <strong>Business Hacks</strong>
+                                            <span> to<br/>boost your marketing</span>
+                                        </div>
+                                        <p class="o_message_paragraph">Join our Marketing newsletter and get <strong>this white paper instantly</strong></p>
+                                    </t>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </t>
+         </template>
+
 </data>
 </openerp>
diff --git a/addons/mass_mailing/views/website_mass_mailing.xml b/addons/mass_mailing/views/website_mass_mailing.xml
index 9982696e51f..16fa20b86d3 100644
--- a/addons/mass_mailing/views/website_mass_mailing.xml
+++ b/addons/mass_mailing/views/website_mass_mailing.xml
@@ -8,6 +8,7 @@
 
 <template id="assets_frontend" inherit_id="website.assets_frontend" name="Mail Frontend Assets">
     <xpath expr="." position="inside">
+                <link rel="stylesheet" type="text/css" href="/mass_mailing/static/src/css/mass_mailing_popup.css" />
                 <script type="text/javascript" src="/mass_mailing/static/src/js/website_mass_mailing.js"></script>
             </xpath>
         </template>