From b6af1f368de9f900cf69aa61fc10827a84eda985 Mon Sep 17 00:00:00 2001
From: Barad Mahendra <mba@openerp.com>
Date: Fri, 7 Jun 2019 09:51:22 +0000
Subject: [PATCH] [IMP] rating: improve rating feedback user interface

Before this commit, when user land after clicking on the smiley in the
e-mail for rating, user cannot change its rating. Its click limits the
available choice.

Now users will be able to choose rating and write feedback before submitting
its rating.

Task ID 1936849
Closes PR #33979

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Co-authored-by: Shreya Thakrar<sht@odoo.com>
---
 .../data/project_mail_template_data.xml       |  2 +-
 addons/rating/__manifest__.py                 |  1 +
 addons/rating/controllers/main.py             | 14 ++---
 addons/rating/static/src/scss/rating.scss     |  8 +++
 addons/rating/views/assets.xml                | 10 ++++
 addons/rating/views/rating_template.xml       | 52 ++++++++++---------
 6 files changed, 54 insertions(+), 33 deletions(-)
 create mode 100644 addons/rating/static/src/scss/rating.scss
 create mode 100644 addons/rating/views/assets.xml

diff --git a/addons/project/data/project_mail_template_data.xml b/addons/project/data/project_mail_template_data.xml
index 6a9fb6377e9..26aea632b51 100644
--- a/addons/project/data/project_mail_template_data.xml
+++ b/addons/project/data/project_mail_template_data.xml
@@ -36,7 +36,7 @@
     <table border="0" cellpadding="0" cellspacing="0" width="590" style="width:100%; margin:0px auto;">
     <tbody>
         <tr><td valign="top" style="font-size: 13px;">
-            Hello ${partner.name},<br/>
+            Hello ${partner.name},<br/><br/>
             Please take a moment to rate our services related to the task "<strong>${object.name}</strong>"
             % if object.rating_get_rated_partner_id().name:
                 assigned to <strong>${object.rating_get_rated_partner_id().name}</strong>.<br/>
diff --git a/addons/rating/__manifest__.py b/addons/rating/__manifest__.py
index fc85f6a91af..db4e37c8609 100644
--- a/addons/rating/__manifest__.py
+++ b/addons/rating/__manifest__.py
@@ -12,6 +12,7 @@ This module allows a customer to give rating.
     'data': [
         'views/rating_view.xml',
         'views/rating_template.xml',
+        'views/assets.xml',
         'security/ir.model.access.csv'
      ],
     'installable': True,
diff --git a/addons/rating/controllers/main.py b/addons/rating/controllers/main.py
index 7cbeeb85c72..5257073ce7b 100644
--- a/addons/rating/controllers/main.py
+++ b/addons/rating/controllers/main.py
@@ -1,8 +1,6 @@
 # -*- coding: utf-8 -*-
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
-import werkzeug
-
 from odoo import http
 from odoo.http import request
 from odoo.tools.translate import _
@@ -18,19 +16,21 @@ class Rating(http.Controller):
         if not rating:
             return request.not_found()
         rate_names = {
+            10: _("satisfied"),
             5: _("not satisfied"),
-            1: _("highly dissatisfied"),
-            10: _("satisfied")
+            1: _("highly dissatisfied")
         }
         rating.write({'rating': rate, 'consumed': True})
         lang = rating.partner_id.lang or get_lang(request.env).code
         return request.env['ir.ui.view'].with_context(lang=lang).render_template('rating.rating_external_page_submit', {
             'rating': rating, 'token': token,
-            'rate_name': rate_names[rate], 'rate': rate
+            'rate_names': rate_names, 'rate': rate
         })
 
-    @http.route(['/rating/<string:token>/<int:rate>/submit_feedback'], type="http", auth="public", methods=['post'], website=True)
-    def submit_rating(self, token, rate, **kwargs):
+    @http.route(['/rating/<string:token>/submit_feedback'], type="http", auth="public", methods=['post'], website=True)
+    def submit_rating(self, token, **kwargs):
+        rate = kwargs.get('rate')
+        assert rate in (1, 5, 10), "Incorrect rating"
         rating = request.env['rating.rating'].sudo().search([('access_token', '=', token)])
         if not rating:
             return request.not_found()
diff --git a/addons/rating/static/src/scss/rating.scss b/addons/rating/static/src/scss/rating.scss
new file mode 100644
index 00000000000..b3b275c6790
--- /dev/null
+++ b/addons/rating/static/src/scss/rating.scss
@@ -0,0 +1,8 @@
+/* Rating feedback */
+.o_rating_page_submit {
+    max-width: 45%;
+    .o_rating_label.active {
+        filter: drop-shadow(0 0 5px black);
+        -webkit-filter: drop-shadow(0 0 5px black);
+    }
+}
diff --git a/addons/rating/views/assets.xml b/addons/rating/views/assets.xml
new file mode 100644
index 00000000000..baacbe9a54a
--- /dev/null
+++ b/addons/rating/views/assets.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+    <template id="assets_frontend" inherit_id="web.assets_frontend" name="Rating: Frontend Assets">
+        <xpath expr="link[last()]" position="after">
+            <link rel="stylesheet" type="text/scss" href="/rating/static/src/scss/rating.scss"/>
+        </xpath>
+    </template>
+
+</odoo>
diff --git a/addons/rating/views/rating_template.xml b/addons/rating/views/rating_template.xml
index 74ec884806a..679db3ede20 100644
--- a/addons/rating/views/rating_template.xml
+++ b/addons/rating/views/rating_template.xml
@@ -3,13 +3,12 @@
         <!-- External page : thanks message -->
         <template id="rating_external_page_view" name="Rating Page Done">
             <t t-call="web.frontend_layout">
-                <div class="container">
-                    <div class="text-center" style="margin-top:128px">
-                        <i class="fa fa-check-circle fa-5x text-success" role="img" aria-label="Thank you!" title="Thank you!"/>
+                <div class="container pt-5">
+                    <div class="text-center mt-5 pt-5">
+                        <h3 class="d-inline">Thank you, we appreciate your feedback!</h3>
                     </div>
-                    <h2 class="text-center">We appreciate your feedback!</h2>
                     <div class="text-center">
-                        <a role="button" t-att-href="web_base_url" class="btn btn-primary">Go to our website</a>
+                        <a role="button" t-att-href="web_base_url" class="btn btn-primary my-5">Go back to the Homepage</a>
                     </div>
                 </div>
             </t>
@@ -18,27 +17,30 @@
         <!-- External page: rate and submit feedback -->
         <template id="rating_external_page_submit" name="Rating Page Submit">
             <t t-call="web.frontend_layout">
-                <div class="container">
-                    <div clas="row">
-                        <h1 class="text-center">Thanks! We appreciate your feedback.</h1>
-                        <h4 class="text-center text-muted" style="margin-bottom: 32px;">Your rating has been submitted.</h4>
-                        <div class="float-left">
-                            <img t-attf-src='/rating/static/src/img/rating_#{rate}.png' t-att-alt="rate_name"/>
+                <div class="container card mb-5 mt-4 o_rating_page_submit">
+                    <div class="card-body">
+                        <div clas="row">
+                            <h1 class="mt-5">Thank you for rating our services!</h1>
+                            <form t-attf-action="/rating/#{token}/submit_feedback" method="post">
+                                <div class="btn-group btn-group-toggle row" data-toggle="buttons">
+                                    <t t-foreach="rate_names" t-as="rate_name">
+                                        <label t-attf-class="col-xs-12 btn o_rating_label shadow-none {{rate == rate_name and 'active' or ''}}">
+                                            <input type="radio" name="rate" t-attf-id="rate_{{rate_name}}" t-att-value="rate_name"/>
+                                            <a class="o_rating" href="#">
+                                                <img t-attf-src='/rating/static/src/img/rating_#{rate_name}.png' t-att-alt="rate_name_value" t-att-title="rate_name_value"/>
+                                            </a>
+                                        </label>
+                                    </t>
+                                </div>
+                                <div class="clearfix"></div>
+                                <p class="mt-5">
+                                    Feel free to write a feedback on your experience:
+                                </p>
+                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                                <textarea class="form-control" name="feedback" rows="8" t-att-value="rating.feedback"></textarea>
+                                <button type="submit" class="btn btn-primary" style="margin-top:8px;">Send Feedback</button>
+                            </form>
                         </div>
-                        <div style="margin-left: 80px;">
-                            you are <b t-esc="rate_name"></b><br/>
-                            on our services on "<b t-esc="rating.res_name"></b>"<br/>
-                            <t t-if="rating.rated_partner_id">by <b t-esc="rating.rated_partner_id.name"></b>.</t>
-                        </div>
-                        <div class="clearfix"></div>
-                        <p style="margin-top:32px;">
-                            Would be great if you can provide more information:
-                        </p>
-                        <form t-attf-action="/rating/#{token}/#{rate}/submit_feedback" method="post">
-                            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                            <textarea class="form-control" name="feedback" rows="8" t-att-value="rating.feedback"></textarea>
-                            <button type="submit" class="btn btn-primary" style="margin-top:8px;">Send Feedback</button>
-                        </form>
                     </div>
                 </div>
             </t>