From e83dfa4eb51a597c355a2bbc0e2b32f947663d35 Mon Sep 17 00:00:00 2001
From: Thomas Josse <thjo@odoo.com>
Date: Fri, 17 Sep 2021 13:15:28 +0000
Subject: [PATCH] [IMP] website_(sale_)slides: clean frontend onboarding

Purpose
=======

Improve frontend onboarding: add placeholders, improve tour, improve experience
when buying course (display what has been bought, avoid displaying buy now on
an already purchased course).

Specifications
==============

The tour of the front-end has been updated. It adds a step to enter fullscreen
mode and allow users to test it.

It updates the placeholders for the quiz creation, adding examples and hints
to ease user filling fields.

The course purchasing flow has been improved. It adds a direct link to the
purchased course(s) when the payment is done with the `sale_purchased_course`
template.

It also blocks the possibility to rebuy a course if the user is already a
member of said course by showing the buying options only if `channel.is_member`
is False. INdeed it makes no sense to display the "Buy" button when having
already bought the course.

This commit also removes the autocompletion of fields in modals.

Task-2623471

closes odoo/odoo#77050

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 addons/website_sale_slides/__manifest__.py    |  1 +
 .../views/website_sale_templates.xml          | 37 +++++++++++++++++++
 .../views/website_slides_templates.xml        | 16 ++++----
 .../static/src/js/tours/slides_tour.js        |  5 ++-
 .../static/src/scss/website_slides.scss       | 36 +++++++++---------
 .../static/src/xml/slide_quiz_create.xml      |  8 ++--
 .../static/src/xml/website_slides_channel.xml |  1 -
 7 files changed, 73 insertions(+), 31 deletions(-)
 create mode 100644 addons/website_sale_slides/views/website_sale_templates.xml

diff --git a/addons/website_sale_slides/__manifest__.py b/addons/website_sale_slides/__manifest__.py
index 6a3bf441513..4a0ab8ae952 100644
--- a/addons/website_sale_slides/__manifest__.py
+++ b/addons/website_sale_slides/__manifest__.py
@@ -13,6 +13,7 @@
         'report/sale_report_views.xml',
         'views/website_slides_menu_views.xml',
         'views/slide_channel_views.xml',
+        'views/website_sale_templates.xml',
         'views/website_slides_templates.xml',
     ],
     'demo': [
diff --git a/addons/website_sale_slides/views/website_sale_templates.xml b/addons/website_sale_slides/views/website_sale_templates.xml
new file mode 100644
index 00000000000..f255dedffbb
--- /dev/null
+++ b/addons/website_sale_slides/views/website_sale_templates.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0" ?>
+<odoo><data>
+
+<template id="website_sale_confirmation_slide" inherit_id="website_sale.confirmation">
+    <xpath expr="//div[@id='oe_structure_website_sale_confirmation_2']" position="after">
+        <t t-call="website_sale_slides.course_purchased_confirmation_message"/>
+    </xpath>
+</template>
+
+<template id="course_purchased_confirmation_message">
+    <div>
+        <h4>You have gained access to the following course(s):</h4>
+    </div>
+    <div class="mt-2">
+        <t t-foreach="order.order_line" t-as="line">
+            <t t-foreach="line.product_id.channel_ids" t-as="course">
+                <table class="table pb-32 border">
+                    <tr>
+                        <td class="w-50">
+                            <span t-if="course.image_1920" class="w-75" t-field="course.image_1920" t-options="{'widget': 'image'}"/>
+                            <img t-else="" class="img img-responsive w-75" src="/website_slides/static/src/img/channel-training-default.jpg"/>
+                        </td>
+                        <td>
+                            <h3 t-esc="course.name" class="m-2"/>
+                            <div t-field="course.description_short" class="font-weight-light o_wslides_desc_truncate_3 pb-2 ml-2"/>
+                            <a role="button" class="btn btn-primary ml-2" t-attf-href="/slides/#{slug(course)}">
+                                Start Learning
+                            </a>
+                        </td>
+                    </tr>
+                </table>
+            </t>
+        </t>
+    </div>
+</template>
+
+</data></odoo>
diff --git a/addons/website_sale_slides/views/website_slides_templates.xml b/addons/website_sale_slides/views/website_slides_templates.xml
index 6086b5ca022..02dc3bd4216 100644
--- a/addons/website_sale_slides/views/website_slides_templates.xml
+++ b/addons/website_sale_slides/views/website_slides_templates.xml
@@ -86,7 +86,7 @@
 </template>
 
 <template name="Buy Course Button" id="course_buy_course_button">
-    <t t-if="channel.product_id.website_published">
+    <t t-if="channel.product_id.website_published and not channel.is_member">
         <div t-attf-class="text-center d-flex align-items-center text-center pb-1 #{'justify-content-between' if product_info['has_discounted_price'] else 'justify-content-around'}">
             <div class="css_editable_mode_hidden">
                 <!-- real price -->
@@ -119,24 +119,26 @@
                     <div id="product_option_block"/>
                 </form>
             </div>
-            <div class="buy_now_button"/>
         </div>
     </t>
-    <t t-else="">
+    <t t-elif="not channel.is_member">
         <div class="alert my-0 bg-200 text-center">
             Course Not Buyable
         </div>
     </t>
 </template>
 
-<template name="Allow Buy Now" id="course_option_buy_course_now" inherit_id="website_sale_slides.course_buy_course_button" active="False" customize_show="True">
-    <xpath expr="//div[hasclass('buy_now_button')]" position="inside">
-        <div style="margin-top:5px;">
-            <a role="button" class="btn btn-outline-primary btn-block post_link" t-att-href="'/shop/cart/update?product_id=%s&amp;express=1' % channel.product_id.id">
+<template name="Display 'Buy Now'" id="course_option_buy_course_now" inherit_id="website_sale_slides.course_buy_course_button" active="False" customize_show="True">
+    <xpath expr="//div[hasclass('add_to_cart_button')]" position="before">
+        <div class="mb-1">
+            <a role="button" class="btn btn-primary btn-block post_link" t-attf-href="/shop/cart/update?product_id={{channel.product_id.id}}&amp;express=1">
                 <i class="fa fa-bolt"></i> Buy Now
             </a>
         </div>
     </xpath>
+    <xpath expr="//div[hasclass('add_to_cart_button')]//a[@id='add_to_cart']" position="attributes">
+        <attribute name="class">btn btn-outline-primary btn-block js_check_product o_js_add_to_cart a-submit</attribute>
+    </xpath>
 </template>
 
 </data></odoo>
diff --git a/addons/website_slides/static/src/js/tours/slides_tour.js b/addons/website_slides/static/src/js/tours/slides_tour.js
index aa9c159e3f2..83b40c98b3c 100644
--- a/addons/website_slides/static/src/js/tours/slides_tour.js
+++ b/addons/website_slides/static/src/js/tours/slides_tour.js
@@ -68,7 +68,6 @@ tour.register('slides_tour', {
     position: 'bottom',
 }, {
     trigger: 'a[name="o_wslides_list_slide_add_quizz"]',
-    extra_trigger: '.o_wslides_slides_list_slide:hover',
     content: Markup(_t("If you want to be sure that attendees have understood and memorized the content, you can add a Quiz on the lesson. Click on <b>Add Quiz</b>.")),
 }, {
     trigger: 'input[name="question-name"]',
@@ -107,6 +106,10 @@ tour.register('slides_tour', {
     trigger: 'a.o_wslides_js_slides_list_slide_link',
     content: Markup(_t("Congratulations, you've created your first course.<br/>Click on the title of this content to see it in fullscreen mode.")),
     position: 'bottom',
+}, {
+    trigger: '.o_wslides_fs_toggle_sidebar',
+    content: Markup(_t("Finally you can click here to enjoy your content in fullscreen")),
+    position: 'bottom',
 }]);
 
 });
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index d64502b8b48..9fb6210d859 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -12,6 +12,24 @@ $o-wslides-color-dark2: #1f262d;
 $o-wslides-color-dark3: #101216;
 $o-wslides-fs-side-width: 300px;
 
+// Truncate text descriptions to a specific number of lines.
+// If '-webkit-line-clamp' is not supported, a less effective
+// 'line-height' fallback will be used instead.
+$truncate-limits: 2, 3, 10;
+
+@each $limit in $truncate-limits {
+    .o_wslides_desc_truncate_#{$limit} {
+        $line-height: 1.3;
+        max-height: $limit * $line-height * 1.2em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        line-height: $line-height;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: $limit;
+    }
+}
 
 // Common to new slides pages
 // **************************************************
@@ -185,24 +203,6 @@ $o-wslides-fs-side-width: 300px;
         min-height: 1px;
     }
 
-    // Truncate text descriptions to a specific number of lines.
-    // If '-webkit-line-clamp' is not supported, a less effective
-    // 'line-height' fallback will be used instead.
-    $truncate-limits: 2, 3, 10;
-
-    @each $limit in $truncate-limits {
-        .o_wslides_desc_truncate_#{$limit} {
-            $line-height: 1.3;
-            max-height: $limit * $line-height * 1.2em;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: normal;
-            line-height: $line-height;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: $limit;
-        }
-    }
 }
 
 // New home page
diff --git a/addons/website_slides/static/src/xml/slide_quiz_create.xml b/addons/website_slides/static/src/xml/slide_quiz_create.xml
index d9cf7de0fa9..840de0331f4 100644
--- a/addons/website_slides/static/src/xml/slide_quiz_create.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz_create.xml
@@ -9,7 +9,7 @@
                         <div class="input-group-prepend">
                             <span class="input-group-text o_wslides_quiz_question_sequence"><t t-esc="widget.sequence"/></span>
                         </div>
-                        <input type="text" name="question-name" class="form-control col-11" placeholder="Enter your question"
+                        <input type="text" name="question-name" class="form-control col-11" placeholder='e.g. "Which animal cannot fly?"'
                             t-att-value="widget.question.text"/>
                     </div>
                 </div>
@@ -23,8 +23,8 @@
                         </t>
                     </t>
                     <t t-else="" >
-                        <t t-foreach="[1, 2, 3]">
-                            <t t-call="slide.quiz.answer.line" />
+                        <t t-foreach="['A giraffe', 'A bird', 'A fly']" t-as="placeholder">
+                            <t t-call="slide.quiz.answer.line"/>
                         </t>
                     </t>
                 </div>
@@ -39,7 +39,7 @@
             <div class="col ml-3 ml-md-5">
                 <div class="row align-items-center">
                     <div class="input-group col-9 p-0">
-                        <input type="text" class="o_wslides_js_quiz_answer_value form-control" placeholder="Enter your answer" t-attf-value="#{answer ? answer.text_value : ''}"/>
+                        <input type="text" class="o_wslides_js_quiz_answer_value form-control" t-attf-placeholder='e.g. "{{placeholder || "another animal"}}"' t-attf-value="#{answer ? answer.text_value : ''}"/>
                         <div class="input-group-append">
                             <div class="input-group-text">
                                 <a class="o_wslides_js_quiz_is_correct" title="This is the correct answer">
diff --git a/addons/website_slides/static/src/xml/website_slides_channel.xml b/addons/website_slides/static/src/xml/website_slides_channel.xml
index 04321f6f8d4..b79d17e0f99 100644
--- a/addons/website_slides/static/src/xml/website_slides_channel.xml
+++ b/addons/website_slides/static/src/xml/website_slides_channel.xml
@@ -41,7 +41,6 @@
                               questions. In this course, you'll study those topics with activities about mathematics, science and logic." />
                 </div>
                 <div class="form-group">
-                    <label id="communication-label">Review</label>
                     <div class="o_wslide_channel_communication_type">
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" id="allow_comment" name="allow_comment" checked="checked"/>