From ee2555546f0f52889f667bb40d1536ed0193307a Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 29 May 2020 11:28:53 +0000
Subject: [PATCH] [IMP] website, *: redesign the contact us and the thank you
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

task-2266756

closes odoo/odoo#52162

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
---
 addons/website/data/website_data.xml          |  9 ++++---
 .../static/tests/tours/website_crm.js         |  2 +-
 .../static/src/xml/website_form_editor.xml    | 12 ++++-----
 .../static/tests/tours/website_form_editor.js |  2 +-
 .../views/website_form_templates.xml          | 26 ++++++++++++-------
 5 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index 427fa7868c7..e2e9d5742ac 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -25,15 +25,16 @@
                     <t t-call="website.layout">
                         <div id="wrap">
                             <div class="oe_structure">
-                                <section class="s_title pt24 pb24" data-vcss="001" data-snippet="s_title">
+                                <section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1">
+                                    <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
                                     <div class="container">
                                         <h1>Contact us</h1>
                                     </div>
                                 </section>
                             </div>
-                            <div class="container mt-2">
+                            <div class="container mt-4 mb-5">
                                 <div class="row">
-                                    <div class="col-lg-8">
+                                    <div class="col-lg-7 col-xl-6 mr-lg-auto">
                                         <div class="oe_structure">
                                             <section class="s_text_block" data-snippet="s_text_block">
                                                 <div class="container">
@@ -52,7 +53,7 @@
                                             <a role="button" t-attf-href="mailto:{{ res_company.email }}" class="btn btn-primary" id="o_contact_mail">Send us an email</a>
                                         </div>
                                     </div>
-                                    <div class="col-lg-4">
+                                    <div class="col-lg-4 mt-4 mt-lg-0">
                                         <t t-call="website.company_description"/>
                                     </div>
                                 </div>
diff --git a/addons/website_crm/static/tests/tours/website_crm.js b/addons/website_crm/static/tests/tours/website_crm.js
index 9b615a56f8f..3638fa45f51 100644
--- a/addons/website_crm/static/tests/tours/website_crm.js
+++ b/addons/website_crm/static/tests/tours/website_crm.js
@@ -35,7 +35,7 @@ odoo.define('website_crm.tour', function(require) {
         trigger: ".s_website_form_send"
     }, {
         content: "Check we were redirected to the success page",
-        trigger: "#wrap:has(h1:contains('Thanks')):has(div.alert-success)"
+        trigger: "#wrap:has(h1:contains('Thank You!'))"
     }]);
 
     return {};
diff --git a/addons/website_form/static/src/xml/website_form_editor.xml b/addons/website_form/static/src/xml/website_form_editor.xml
index ae099e4717c..4978d0fbb84 100644
--- a/addons/website_form/static/src/xml/website_form_editor.xml
+++ b/addons/website_form/static/src/xml/website_form_editor.xml
@@ -4,16 +4,16 @@
     <!-- End Message -->
     <t t-name="website_form.s_website_form_end_message">
         <div class="s_website_form_end_message d-none">
-            <div class="text-center alert alert-info css_non_editable_mode_hidden o_not_editable" t-ignore="True" role="status">
-                The following message will become visible <strong>only</strong> once the form is sent.
-            </div>
             <div class="oe_structure">
-                <section class="s_text_block pt64 pb64" data-snippet="s_text_block">
+                <section class="s_text_block pt64 pb64 o_colored_level o_cc o_cc2" data-snippet="s_text_block">
                     <div class="container">
-                        <h2 class="text-center">Thank You For Your Feedback</h2>
+                        <h2 class="text-center">
+                            <span class="fa fa-check-circle"/>
+                                Thank You For Your Feedback
+                        </h2>
                         <p class="text-center">
                             Our team will message you back as soon as possible.<br/>
-                            In the meantime we invite you to try our awesome <a href="/">website</a>.<br/>
+                            In the meantime we invite you to visit our <a href="/">website</a>.<br/>
                         </p>
                     </div>
                 </section>
diff --git a/addons/website_form/static/tests/tours/website_form_editor.js b/addons/website_form/static/tests/tours/website_form_editor.js
index 10ad3b996de..9431307688a 100644
--- a/addons/website_form/static/tests/tours/website_form_editor.js
+++ b/addons/website_form/static/tests/tours/website_form_editor.js
@@ -365,7 +365,7 @@ odoo.define('website_form_editor.tour', function (require) {
         },
         {
             content:  "Check form is submitted without errors",
-            trigger:  ".alert-success:contains('Your message has been sent successfully.')"
+            trigger:  "#wrap:has(h1:contains('Thank You!'))"
         }
     ]);
 
diff --git a/addons/website_form/views/website_form_templates.xml b/addons/website_form/views/website_form_templates.xml
index 3ecd30d3a9a..36732b23897 100644
--- a/addons/website_form/views/website_form_templates.xml
+++ b/addons/website_form/views/website_form_templates.xml
@@ -107,17 +107,23 @@
                 <t t-call="website.layout">
                   <div id="wrap">
                     <div class="oe_structure" id="oe_structure_website_form_contact_us_thanks_1"/>
-                    <div class="container pt-3">
-                        <h1>Thanks!</h1>
+                    <div class="container mt-4">
                         <div class="row">
-                            <div class="col-lg-8">
-                                <div class="alert alert-success" role="status">
-                                    Your message has been sent successfully.
-                                    <button type="button" class="close" data-dismiss="alert">&amp;times;</button>
-                                </div>
-                                <p>
-                                    We will get back to you shortly.
-                                </p>
+                            <div class="col-lg-7 col-xl-6 mr-lg-auto oe_structure">
+                                <section class="pt40 s_text_block pb40 o_colored_level o_cc o_cc1" data-snippet="s_text_block" data-name="Text">
+                                    <div class="container">
+                                        <span class="d-block fa fa-4x fa-thumbs-up mx-auto rounded-circle bg-primary"/><br/>
+                                        <h1 class="text-center">Thank You!</h1>
+                                        <div class="pb16 pt16 s_hr" data-snippet="s_hr" data-name="Separator">
+                                            <hr class="mx-auto border-top w-50 border-dark text-center"/>
+                                        </div>
+                                        <h5 class="text-center">
+                                            <span class="fa fa-check-circle"/>
+                                            <span>Your message has been sent <b>successfully</b></span>
+                                        </h5>
+                                        <p class="text-center">We will get back to you shortly.</p>
+                                    </div>
+                                </section>
                             </div>
                             <div class="col-lg-4">
                                 <t t-call="website.company_description"/>