From b46bfac32525fdfd6b514a9a617a3ba252e6bb0e Mon Sep 17 00:00:00 2001
From: david <david.vidal@tecnativa.com>
Date: Mon, 1 Mar 2021 18:54:56 +0100
Subject: [PATCH] [IMP] rma_sale: portal ux

When the user selects an operation, the comment shows up so the customer
doesn't forget to enter his comments
---
 rma_sale/static/src/js/rma_portal_form.js | 45 +++++++++++++++++++++++
 rma_sale/views/assets.xml                 |  4 ++
 rma_sale/views/sale_portal_template.xml   |  2 +-
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 rma_sale/static/src/js/rma_portal_form.js

diff --git a/rma_sale/static/src/js/rma_portal_form.js b/rma_sale/static/src/js/rma_portal_form.js
new file mode 100644
index 00000000..e904d44a
--- /dev/null
+++ b/rma_sale/static/src/js/rma_portal_form.js
@@ -0,0 +1,45 @@
+/* Copyright 2021 Tecnativa - David Vidal
+   License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl). */
+
+odoo.define("rma_sale.animation", function(require) {
+    "use strict";
+
+    var sAnimation = require("website.content.snippets.animation");
+
+    // In the customer portal when a RMA operation is selected show the comments
+    // selector so the user doesn't miss the chance to add his comments
+    sAnimation.registry.rma_operation_portal = sAnimation.Class.extend({
+        selector: ".rma-operation",
+        start: function() {
+            this.id = this.el.name.replace("-operation_id", "");
+            this.$comment = $("#comment-" + this.id);
+            this.$comment_input = $("[name='" + this.id + "-description']");
+            var _this = this;
+            this.$el.on("change", function() {
+                _this._onChangeOperationId();
+            });
+        },
+        _show_comment: function() {
+            if (this.$comment) {
+                this.$comment.removeClass("show");
+                this.$comment.addClass("show");
+                if (this.$comment_input) {
+                    this.$comment_input.focus();
+                }
+            }
+        },
+        _hide_comment: function() {
+            if (this.$comment) {
+                this.$comment.removeClass("show");
+            }
+        },
+        _onChangeOperationId: function() {
+            // Toggle comment on or off if an operation is requested
+            if (this.$el && this.$el.val()) {
+                this._show_comment();
+            } else {
+                this._hide_comment();
+            }
+        },
+    });
+});
diff --git a/rma_sale/views/assets.xml b/rma_sale/views/assets.xml
index e946398f..53633488 100644
--- a/rma_sale/views/assets.xml
+++ b/rma_sale/views/assets.xml
@@ -2,6 +2,10 @@
 <odoo>
     <template id="assets_frontend" inherit_id="web.assets_frontend" name="Request RMA">
         <xpath expr="//link[last()]" position="after">
+            <script
+                type="text/javascript"
+                src="/rma_sale/static/src/js/rma_portal_form.js"
+            />
             <link
                 rel="stylesheet"
                 type="text/scss"
diff --git a/rma_sale/views/sale_portal_template.xml b/rma_sale/views/sale_portal_template.xml
index b1ee9ef7..8260b9c7 100644
--- a/rma_sale/views/sale_portal_template.xml
+++ b/rma_sale/views/sale_portal_template.xml
@@ -143,7 +143,7 @@
                                                 <td class="text-left">
                                                     <select
                                                         t-attf-name="#{data_index}-operation_id"
-                                                        class="form-control"
+                                                        class="form-control rma-operation"
                                                     >
                                                         <option value="">---</option>
                                                         <t