From f0a4b7326c7e37b8ff621254c3c6fca4f5aba114 Mon Sep 17 00:00:00 2001
From: Romain Derie <rde@odoo.com>
Date: Mon, 30 Dec 2019 17:13:40 +0000
Subject: [PATCH] [REF] website_mail_channel, *: adapt discussion group to
 actual snippet

* website

Adapt to current snippet/widget guidelines/hierarchy.

Part of https://github.com/odoo/odoo/pull/42937
task-2088157
task-2152191
---
 ...on_channel_subscribe.png => s_channel.png} | Bin
 addons/website/views/snippets/snippets.xml    |   2 +-
 addons/website_mail_channel/__manifest__.py   |   4 +-
 .../static/src/snippets/s_channel/000.js      | 131 +++++++++++-------
 .../static/src/snippets/s_channel/options.js  |   4 +-
 addons/website_mail_channel/views/assets.xml  |  19 +++
 .../website_mail_channel/views/snippets.xml   |  58 --------
 .../views/snippets/s_channel.xml              |  47 +++++++
 .../views/snippets/snippets.xml               |  14 ++
 .../views/website_mail_channel_templates.xml  |  18 +--
 10 files changed, 165 insertions(+), 132 deletions(-)
 rename addons/website/static/src/img/snippets_thumbs/{s_button_channel_subscribe.png => s_channel.png} (100%)
 create mode 100644 addons/website_mail_channel/views/assets.xml
 delete mode 100644 addons/website_mail_channel/views/snippets.xml
 create mode 100644 addons/website_mail_channel/views/snippets/s_channel.xml
 create mode 100644 addons/website_mail_channel/views/snippets/snippets.xml

diff --git a/addons/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png b/addons/website/static/src/img/snippets_thumbs/s_channel.png
similarity index 100%
rename from addons/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png
rename to addons/website/static/src/img/snippets_thumbs/s_channel.png
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index eb7ab813d8d..f09607e2318 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -96,7 +96,7 @@
     </xpath>
     <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
         <t t-install="website_event" string="Local Events" t-thumbnail="/website/static/src/img/snippets_thumbs/s_local_events.png"/>
-        <t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png"/>
+        <t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_channel.png"/>
         <t id="newsletter_snippet" t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.png"/>
         <t id="s_products_searchbar_input" t-install="website_sale" string="Products Search Input" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_searchbar.png"/>
     </xpath>
diff --git a/addons/website_mail_channel/__manifest__.py b/addons/website_mail_channel/__manifest__.py
index 3142ef55527..a8eb363e72c 100644
--- a/addons/website_mail_channel/__manifest__.py
+++ b/addons/website_mail_channel/__manifest__.py
@@ -10,7 +10,9 @@ Visitors can join public mail channels managed in the Discuss app in order to ge
     'depends': ['website_mail'],
     'data': [
         'data/mail_template_data.xml',
+        'views/assets.xml',
+        'views/snippets/s_channel.xml',
+        'views/snippets/snippets.xml',
         'views/website_mail_channel_templates.xml',
-        'views/snippets.xml',
     ],
 }
diff --git a/addons/website_mail_channel/static/src/snippets/s_channel/000.js b/addons/website_mail_channel/static/src/snippets/s_channel/000.js
index 1b7635a10bc..afcd22c638e 100644
--- a/addons/website_mail_channel/static/src/snippets/s_channel/000.js
+++ b/addons/website_mail_channel/static/src/snippets/s_channel/000.js
@@ -1,11 +1,19 @@
-odoo.define('website_mail_channel.snippet', function (require) {
+odoo.define('website_mail_channel.s_channel', function (require) {
 'use strict';
 
 var publicWidget = require('web.public.widget');
 
-publicWidget.registry.follow_alias = publicWidget.Widget.extend({
-    selector: ".js_follow_alias",
+publicWidget.registry.Channel = publicWidget.Widget.extend({
+    selector: '.s_channel',
     disabledInEditableMode: false,
+    read_events: {
+        'click .js_follow_btn, .js_unfollow_btn': '_onFollowUnFollowBtnClick',
+        'click .js_follow_btn': '_onFollowBtnClick',
+    },
+
+    /**
+     * @override
+     */
     start: function () {
         var self = this;
         this.is_user = false;
@@ -18,7 +26,7 @@ publicWidget.registry.follow_alias = publicWidget.Widget.extend({
             if (unsubscribePage && self.is_user) {
                 self.$target.find(".js_mg_follow_form").remove();
             }
-            self.toggle_subscription(data.is_member ? 'on' : 'off', data.email);
+            self._toggleSubscription(data.is_member ? 'on' : 'off', data.email);
             self.$target.removeClass('d-none');
         };
 
@@ -35,51 +43,39 @@ publicWidget.registry.follow_alias = publicWidget.Widget.extend({
         if (!this.editableMode) {
             this.$('> .alert').addClass('d-none');
             this.$('> .input-group-append.d-none').removeClass('d-none');
-            this.$('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
-                event.preventDefault();
-                self._onClick();
-            });
-
-            this.$('.js_follow_btn').on('click', function (ev) {
-                if ($(ev.currentTarget).closest('.js_mg_follow_form').length) {
-                    self.$('.js_follow_email').val($(ev.currentTarget).closest('.js_mg_follow_form').find('.js_follow_email').val());
-                }
-            });
         }
         return this._super.apply(this, arguments);
     },
-    _onClick: function () {
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _getAliasInfo: function () {
         var self = this;
-        var $email = this.$target.find(".js_follow_email");
-
-        if ($email.length && !$email.val().match(/.+@.+/)) {
-            this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
-            return false;
+        if (! this.$target.data('id')) {
+            return Promise.resolve();
         }
-        this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
-
-        var subscription_action = this.$target.attr("data-follow") || "off";
-        if (window.location.search.slice(1).split('&').indexOf("unsubscribe") >= 0) {
-            // force unsubscribe mode via URI /groups?unsubscribe
-            subscription_action = 'on';
-        }
-        this._rpc({
-            route: '/groups/subscription',
-            params: {
-                'channel_id': +this.$target.data('id'),
-                'object':  this.$target.data('object'),
-                'subscription': subscription_action,
-                'email': $email.length ? $email.val() : false,
-            },
-        }).then(function (follow) {
-            self.toggle_subscription(follow, self.email);
+        return this._rpc({route: '/groups/' + this.$target.data('id') + '/get_alias_info'}).then(function (data) {
+            if (data.alias_name) {
+                self.$target.find('.js_mg_email').attr('href', 'mailto:' + data.alias_name);
+                self.$target.find('.js_mg_email').removeClass('d-none');
+            } else {
+                self.$target.find('.js_mg_email').addClass('d-none');
+            }
         });
     },
-    toggle_subscription: function (follow, email) {
+    /**
+     * @private
+     */
+    _toggleSubscription: function (follow, email) {
         // .js_mg_follow_form contains subscribe form
         // .js_mg_details contains send/archives/unsubscribe links
         // .js_mg_confirmation contains message warning has been sent
-        var alias_done = this.get_alias_info();
+        var aliasDone = this._getAliasInfo();
         if (follow === "on") {
             // user is connected and can unsubscribe
             this.$target.find(".js_mg_follow_form").addClass('d-none');
@@ -102,22 +98,51 @@ publicWidget.registry.follow_alias = publicWidget.Widget.extend({
             .val(email ? email : "")
             .attr("disabled", follow === "on" || (email.length && this.is_user) ? "disabled" : false);
         this.$target.attr("data-follow", follow);
-        return Promise.resolve(alias_done);
+        return Promise.resolve(aliasDone);
     },
-    get_alias_info: function () {
-        var self = this;
-        if (! this.$target.data('id')) {
-            return Promise.resolve();
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onFollowBtnClick: function (ev) {
+        if ($(ev.currentTarget).closest('.js_mg_follow_form').length) {
+            this.$('.js_follow_email').val($(ev.currentTarget).closest('.js_mg_follow_form').find('.js_follow_email').val());
         }
-        return this._rpc({route: '/groups/' + this.$target.data('id') + '/get_alias_info'}).then(function (data) {
-            if (data.alias_name) {
-                self.$target.find('.js_mg_email').attr('href', 'mailto:' + data.alias_name);
-                self.$target.find('.js_mg_email').removeClass('d-none');
-            }
-            else {
-                self.$target.find('.js_mg_email').addClass('d-none');
-            }
+    },
+    /**
+     * @private
+     */
+    _onFollowUnFollowBtnClick: function (ev) {
+        ev.preventDefault();
+        var self = this;
+        var $email = this.$target.find(".js_follow_email");
+
+        if ($email.length && !$email.val().match(/.+@.+/)) {
+            this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            return false;
+        }
+        this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+
+        var subscriptionAction = this.$target.attr("data-follow") || "off";
+        if (window.location.search.slice(1).split('&').indexOf("unsubscribe") >= 0) {
+            // force unsubscribe mode via URI /groups?unsubscribe
+            subscriptionAction = 'on';
+        }
+        this._rpc({
+            route: '/groups/subscription',
+            params: {
+                'channel_id': +this.$target.data('id'),
+                'object': this.$target.data('object'),
+                'subscription': subscriptionAction,
+                'email': $email.length ? $email.val() : false,
+            },
+        }).then(function (follow) {
+            self._toggleSubscription(follow, self.email);
         });
-    }
+    },
 });
 });
diff --git a/addons/website_mail_channel/static/src/snippets/s_channel/options.js b/addons/website_mail_channel/static/src/snippets/s_channel/options.js
index c9452e68853..b6d89d8928f 100644
--- a/addons/website_mail_channel/static/src/snippets/s_channel/options.js
+++ b/addons/website_mail_channel/static/src/snippets/s_channel/options.js
@@ -1,4 +1,4 @@
-odoo.define('website_mail_channel.editor', function (require) {
+odoo.define('website_mail_channel.s_channel_options', function (require) {
 'use strict';
 
 var core = require('web.core');
@@ -7,7 +7,7 @@ var wUtils = require('website.utils');
 
 var _t = core._t;
 
-options.registry.subscribe = options.Class.extend({
+options.registry.Channel = options.Class.extend({
     /**
      * @override
      */
diff --git a/addons/website_mail_channel/views/assets.xml b/addons/website_mail_channel/views/assets.xml
new file mode 100644
index 00000000000..c73683f0d49
--- /dev/null
+++ b/addons/website_mail_channel/views/assets.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="assets_frontend" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" href="/website_mail_channel/static/src/css/website_mail_channel.css"/>
+    </xpath>
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website_mail_channel/static/src/js/website_mail_channel.js"/>
+    </xpath>
+</template>
+
+<template id="assets_wysiwyg" inherit_id="website.assets_wysiwyg" name="Website Mail Channel Editor Assets">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website_mail_channel/static/src/snippets/s_channel/options.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_mail_channel/views/snippets.xml b/addons/website_mail_channel/views/snippets.xml
deleted file mode 100644
index 3ac9c4d84e4..00000000000
--- a/addons/website_mail_channel/views/snippets.xml
+++ /dev/null
@@ -1,58 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-
-<template id="remove_external_snippets" inherit_id="website.external_snippets">
-    <xpath expr="//t[@t-install='website_mail_channel']" position="replace"/>
-</template>
-
-<template id="subscribe" inherit_id="website.snippets" name="Snippet Subscribe">
-    <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
-        <div>
-            <div class="oe_snippet_thumbnail">
-                <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png" alt="Subscribe"/>
-                <span class="oe_snippet_thumbnail_title">Discussion Group</span>
-            </div>
-
-            <div class="oe_snippet_body js_follow_alias"
-                      data-id="0"
-                      data-object="mail.channel"
-                      data-follow="off" data-name="Discussion Group">
-                <div class="input-group js_mg_follow_form">
-                    <input
-                          type="email"
-                          name="email"
-                          class="js_follow_email form-control"
-                          placeholder="your email..."/>
-                    <span class="input-group-append">
-                        <button href="#" class="btn btn-primary js_follow_btn">Subscribe</button>
-                    </span>
-                </div>
-                <p class="js_mg_details d-none">
-                    <span class="js_mg_email d-none"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
-                    <a href="#" class="js_mg_link"><i class="fa fa-file-o"/> archives</a> -
-                    <a role="button" href="#" class="js_unfollow_btn"><i class="fa fa-times"/> unsubscribe</a>
-                </p>
-                <p class="js_mg_confirmation d-none">
-                    a confirmation email has been sent.
-                </p>
-            </div>
-        </div>
-    </xpath>
-
-
-    <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-js='subscribe'
-             data-selector=".js_follow_alias"
-             data-drop-near="p, h1, h2, h3, blockquote, .card">
-            <we-row>
-                <we-select class="select_discussion_list" data-attribute-name="id" data-no-preview="true">
-                    <!-- 'we-button' added programmatically with DB data -->
-                </we-select>
-                <we-button class="fa fa-fw fa-plus" title="Create a public discussion group in your backend"
-                           data-create-channel="" data-no-preview="true"/>
-            </we-row>
-        </div>
-    </xpath>
-
-</template>
-</odoo>
diff --git a/addons/website_mail_channel/views/snippets/s_channel.xml b/addons/website_mail_channel/views/snippets/s_channel.xml
new file mode 100644
index 00000000000..bd38a8d1aad
--- /dev/null
+++ b/addons/website_mail_channel/views/snippets/s_channel.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_channel" name="Discussion Group">
+    <div class="s_channel"
+         data-id="0" data-object="mail.channel" data-follow="off">
+        <div class="input-group js_mg_follow_form">
+            <input type="email" name="email" placeholder="your email..."
+                   class="js_follow_email form-control"/>
+            <span class="input-group-append">
+                <button href="#" class="btn btn-primary js_follow_btn">Subscribe</button>
+            </span>
+        </div>
+        <p class="js_mg_details d-none">
+            <span class="js_mg_email d-none"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
+            <a href="#" class="js_mg_link"><i class="fa fa-file-o"/> archives</a> -
+            <a role="button" href="#" class="js_unfollow_btn"><i class="fa fa-times"/> unsubscribe</a>
+        </p>
+        <p class="js_mg_confirmation d-none">
+            a confirmation email has been sent.
+        </p>
+    </div>
+</template>
+
+<template id="s_channel_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js='Channel'
+             data-selector=".s_channel"
+             data-drop-near="p, h1, h2, h3, blockquote, .card">
+            <we-row>
+                <we-select class="select_discussion_list" data-attribute-name="id" data-no-preview="true">
+                    <!-- 'we-button' added programmatically with DB data -->
+                </we-select>
+                <we-button class="fa fa-fw fa-plus" title="Create a public discussion group in your backend"
+                           data-create-channel="" data-no-preview="true"/>
+            </we-row>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_channel_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website_mail_channel/static/src/snippets/s_channel/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_mail_channel/views/snippets/snippets.xml b/addons/website_mail_channel/views/snippets/snippets.xml
new file mode 100644
index 00000000000..0ba2167f9ac
--- /dev/null
+++ b/addons/website_mail_channel/views/snippets/snippets.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="remove_external_snippets" inherit_id="website.external_snippets">
+    <xpath expr="//t[@t-install='website_mail_channel']" position="replace"/>
+</template>
+
+<template id="snippets" inherit_id="website.snippets" name="Snippet Subscribe">
+    <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
+        <t t-snippet="website_mail_channel.s_channel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_channel.png"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_mail_channel/views/website_mail_channel_templates.xml b/addons/website_mail_channel/views/website_mail_channel_templates.xml
index 74357d71d9a..c1666cb2756 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -1,22 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="assets_frontend" inherit_id="website.assets_frontend">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" href="/website_mail_channel/static/src/css/website_mail_channel.css"/>
-    </xpath>
-    <xpath expr="//script[last()]" position="after">
-        <script type="text/javascript" src="/website_mail_channel/static/src/js/website_mail_channel.js"/>
-        <script type="text/javascript" src="/website_mail_channel/static/src/snippets/s_channel/000.js"/>
-    </xpath>
-</template>
-
-<template id="assets_editor" inherit_id="website.assets_editor">
-    <xpath expr="//script[last()]" position="after">
-        <script type="text/javascript" src="/website_mail_channel/static/src/snippets/s_channel/options.js"/>
-    </xpath>
-</template>
-
 <template id="mail_channels" name="Mailing Lists">
     <t t-call="website.layout">
         <div id="wrap" class="oe_structure oe_empty">
@@ -50,7 +34,7 @@
                 <div class="col-lg-3">
                     <!--<t t-call="website_mail.follow"><t t-set="object" t-value="group"/></t>-->
 
-                    <div class="js_follow_alias"
+                    <div class="s_channel"
                               t-att-data-id="group.id"
                               data-object="mail.channel"
                               t-att-data-follow="'on' if 'unsubscribe' in request.params else 'off'">