[IMP] website_mass_mailing, *: improve newsletter snippets

* website, mass_mailing, web_editor

This commit adds various improvements in newsletter snippets as follow:

- Improves UI for newsletter popup.

- We only had one popup for all websites. Now, we can have a different
popup for each website.

- The popup was not appearing on mobile/tablet devices. Now, in
mobile/tablet devices, the popup appears automatically after 5secs.

- Added the ability to customize the whole editor popup like any
editable area (background colors, etc).

- User needed to enable popup snippet from the settings. We removed that
setting so now popup snippet will always be available.

- Added new snippet "Newsletter block".

- Display notification after successful subscription the same way for
all newsletter snippets.

Closes https://github.com/odoo/odoo/pull/29353
task-1903256

closes odoo/odoo#29353

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>


Co-authored-by: qsm-odoo <qsm@odoo.com>

1 files changed, 145 insertions, 102 deletions

diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
index abd7988821b..535e79576b5 100644
--- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
+++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js
@@ -1,68 +1,89 @@
 odoo.define('mass_mailing.website_integration', function (require) {
 "use strict";
 
+var config = require('web.config');
+var core = require('web.core');
+var Dialog = require('web.Dialog');
 var utils = require('web.utils');
 var publicWidget = require('web.public.widget');
 
+var _t = core._t;
+
 publicWidget.registry.subscribe = publicWidget.Widget.extend({
     selector: ".js_subscribe",
     disabledInEditableMode: false,
+    read_events: {
+        'click .js_subscribe_btn': '_onSubscribeClick',
+    },
 
+    /**
+     * @override
+     */
     start: function () {
         var self = this;
+        var def = this._super.apply(this, arguments);
+        this.$popup = this.$target.closest('.o_newsletter_modal');
+        if (this.$popup.length) {
+            // No need to check whether the user subscribed or not if the input
+            // is in a popup as the popup won't open if he did subscribe.
+            return def;
+        }
 
         var always = function (data) {
-            self.$target.find('input.js_subscribe_email')
-                .val(data.email ? data.email : "")
-                .attr("disabled", data.is_subscriber && data.email.length ? "disabled" : false);
-            self.$target.attr("data-subscribe", data.is_subscriber ? 'on' : 'off');
-            self.$target.find('a.js_subscribe_btn')
-                .attr("disabled", data.is_subscriber && data.email.length ? "disabled" : false);
+            var isSubscriber = data.is_subscriber;
+            self.$('.js_subscribe_btn').prop('disabled', isSubscriber);
+            self.$('input.js_subscribe_email')
+                .val(data.email || "")
+                .prop('disabled', isSubscriber);
             self.$target.removeClass('d-none');
-            self.$target.find('.js_subscribe_btn').toggleClass('d-none', !!data.is_subscriber);
-            self.$target.find('.js_subscribed_btn').toggleClass('d-none', !data.is_subscriber);
+            self.$('.js_subscribe_btn').toggleClass('d-none', !!isSubscriber);
+            self.$('.js_subscribed_btn').toggleClass('d-none', !isSubscriber);
         };
-
-        // set value and display button
-        self.$target.find("input").removeClass('d-none');
-        this._rpc({
+        return Promise.all([def, this._rpc({
             route: '/website_mass_mailing/is_subscriber',
             params: {
-                list_id: this.$target.data('list-id'),
+                'list_id': this.$target.data('list-id'),
             },
-        }).then(always).guardedCatch(always);
-
-        // not if editable mode to allow designer to edit alert field
-        if (!this.editableMode) {
-            $('.js_subscribe > .alert').addClass('d-none');
-            $('.js_subscribe > .input-group-append.d-none').removeClass('d-none');
-            this.$target.find('.js_subscribe_btn').on('click', function (event) {
-                event.preventDefault();
-                self._onClick();
-            });
-        }
+        }).then(always).guardedCatch(always)]);
     },
-    _onClick: function () {
+    /**
+     * @override
+     */
+    destroy: function () {
+        this.$target.addClass('d-none');
+        this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onSubscribeClick: function () {
         var self = this;
-        var $email = this.$target.find(".js_subscribe_email:visible");
+        var $email = this.$(".js_subscribe_email:visible");
 
         if ($email.length && !$email.val().match(/.+@.+/)) {
-            this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            this.$target.addClass('o_has_error').find('.form-control').addClass('is-invalid');
             return false;
         }
-        this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
-
+        this.$target.removeClass('o_has_error').find('.form-control').removeClass('is-invalid');
         this._rpc({
             route: '/website_mass_mailing/subscribe',
             params: {
                 'list_id': this.$target.data('list-id'),
                 'email': $email.length ? $email.val() : false,
             },
-        }).then(function (subscribe) {
-            self.$target.find(".js_subscribe_email, .input-group-append").addClass('d-none');
-            self.$target.find(".alert").removeClass('d-none');
-            self.$target.find('input.js_subscribe_email').attr("disabled", subscribe ? "disabled" : false);
-            self.$target.attr("data-subscribe", subscribe ? 'on' : 'off');
+        }).then(function (result) {
+            self.$(".js_subscribe_btn").addClass('d-none');
+            self.$(".js_subscribed_btn").removeClass('d-none');
+            self.$('input.js_subscribe_email').prop('disabled', !!result);
+            if (self.$popup.length) {
+                self.$popup.modal('hide');
+            }
+            self.displayNotification(_t("Success"), result.toast_content, 'success', true);
         });
     },
 });
@@ -71,84 +92,106 @@ publicWidget.registry.newsletter_popup = publicWidget.Widget.extend({
     selector: ".o_newsletter_popup",
     disabledInEditableMode: false,
 
+    /**
+     * @override
+     */
     start: function () {
         var self = this;
-
-        // Compatibility: rebuilding a correct modal from user database
-        // content. Since the first version, the modal is saved in databases
-        // directly but has never used a correct structure. While it was working
-        // with BS3, it is not with BS4.
-        // TODO review the newsletter popup creation, save and loading.
-        var $modal = this.$('.modal');
-        if ($modal.is('.modal-dialog')) {
-            $modal.removeClass('modal-md modal-dialog');
-            var $modalContent = $modal.find('.modal-content');
-            $modalContent.wrapAll($('<div/>', {class: 'modal-dialog'}));
+        var defs = [this._super.apply(this, arguments)];
+        this.websiteID = this._getContext().website_id;
+        this.listID = parseInt(this.$target.attr('data-list-id'));
+        if (!this.listID || (utils.get_cookie(_.str.sprintf("newsletter-popup-%s-%s", this.listID, this.websiteID)) && !self.editableMode)) {
+            return Promise.all(defs);
         }
-
-        var popupcontent = self.$target.find(".o_popup_content_dev").empty();
-        if (!self.$target.data('list-id')) {
-            return;
+        if (this.$target.data('content') && this.editableMode) {
+            // To avoid losing user changes.
+            this._dialogInit(this.$target.data('content'));
+            this.$target.removeData('quick-open');
+            this.massMailingPopup.open();
+        } else {
+            defs.push(this._rpc({
+                route: '/website_mass_mailing/get_content',
+                params: {
+                    newsletter_id: self.listID,
+                },
+            }).then(function (data) {
+                self._dialogInit(data.popup_content, data.email || '');
+                if (!self.editableMode && !data.is_subscriber) {
+                    if (config.device.isMobile) {
+                        setTimeout(function () {
+                            self._showBanner();
+                        }, 5000);
+                    } else {
+                        $(document).on('mouseleave.open_popup_event', self._showBanner.bind(self));
+                    }
+                } else {
+                    $(document).off('mouseleave.open_popup_event');
+                }
+                // show popup after choosing a newsletter
+                if (self.$target.data('quick-open')) {
+                    self.massMailingPopup.open();
+                    self.$target.removeData('quick-open');
+                }
+            }));
         }
 
-        this._rpc({
-            route: '/website_mass_mailing/get_content',
-            params: {
-                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 (!self.editableMode && !data.is_subscriber) {
-                $(document).on('mouseleave', _.bind(self.show_banner, self));
-
-                self.$target.find('.popup_subscribe_btn').on('click', function (event) {
-                    event.preventDefault();
-                    self._onClickSubscribe();
-                });
-            } else { $(document).off('mouseleave'); }
-        });
+        return Promise.all(defs);
     },
-    _onClickSubscribe: function () {
-        var self = this;
-        var $email = self.$target.find(".popup_subscribe_email:visible");
-
-        if ($email.length && !$email.val().match(/.+@.+/)) {
-            this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
-            return false;
+    /**
+     * @override
+     */
+    destroy: function () {
+        if (this.massMailingPopup) {
+            this.massMailingPopup.close();
         }
-        this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+        this._super.apply(this, arguments);
+    },
 
-        this._rpc({
-            route: '/website_mass_mailing/subscribe',
-            params: {
-                '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');
-                }
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @param {string} content
+     * @private
+     */
+    _dialogInit: function (content, email) {
+        var self = this;
+        this.massMailingPopup = new Dialog(this, {
+            technical: false,
+            $content: $('<div/>').html(content),
+            $parentNode: this.$target,
+            backdrop: !this.editableMode,
+            dialogClass: 'p-0' + (this.editableMode ? ' o_editable oe_structure oe_empty' : ''),
+            renderFooter: false,
+            size: 'medium',
+        });
+        this.massMailingPopup.opened().then(function () {
+            var $modal = self.massMailingPopup.$modal;
+            $modal.addClass('o_newsletter_modal');
+            $modal.find('.oe_structure').attr('data-editor-message', _t('DRAG BUILDING BLOCKS HERE'));
+            $modal.find('.modal-dialog').addClass('modal-dialog-centered');
+            $modal.find('.js_subscribe').data('list-id', self.listID)
+                  .find('input.js_subscribe_email').val(email);
+            self.trigger_up('widgets_start_request', {
+                editableMode: self.editableMode,
+                $target: $modal,
+            });
+        });
+        this.massMailingPopup.on('closed', this, function () {
+            var $modal = self.massMailingPopup.$modal;
+            if ($modal) { // The dialog might have never been opened
+                self.$el.data('content', $modal.find('.modal-body').html());
             }
         });
     },
-    show_banner: function () {
-        var self = this;
-        if (!utils.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=/";
-        }
-    }
+    /**
+     * @private
+     */
+    _showBanner: function () {
+        this.massMailingPopup.open();
+        utils.set_cookie(_.str.sprintf("newsletter-popup-%s-%s", this.listID, this.websiteID), true);
+        $(document).off('mouseleave.open_popup_event');
+    },
 });
 });