From affcba7ea70d48d996dee4cb281adc2980190cb4 Mon Sep 17 00:00:00 2001
From: "Lina (liew)" <liew@odoo.com>
Date: Wed, 14 Feb 2024 11:56:47 +0100
Subject: [PATCH] [IMP] website_sale: improve checkout UX

- replace order summary by a dropdown like mobile view
- remove 'Pay With' title
- match 'Choose delivery method' style with 'Choose payment method'
- make order summary sticky so that 'Pay now' is always accessible
task-3741412

closes odoo/odoo#154035

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
---
 .../payment/views/payment_form_templates.xml  | 13 ++------
 addons/payment/views/portal_templates.xml     |  4 ++-
 addons/sale/views/sale_portal_templates.xml   |  2 +-
 .../views/payment_form_templates.xml          |  4 ++-
 .../static/src/scss/website_sale.scss         | 15 +++++-----
 addons/website_sale/views/templates.xml       | 30 ++++++++-----------
 .../views/website_sale_delivery_templates.xml |  4 +--
 7 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/addons/payment/views/payment_form_templates.xml b/addons/payment/views/payment_form_templates.xml
index 35b0dd22fe5..185c1b38935 100644
--- a/addons/payment/views/payment_form_templates.xml
+++ b/addons/payment/views/payment_form_templates.xml
@@ -67,12 +67,8 @@
                 <!-- === Payment tokens === -->
                 <div t-if="tokens_sudo">
                     <!-- === Header === -->
-                    <h4 id="o_payment_tokens_heading"
-                        class="d-flex gap-3 align-items-center mt-4 mb-3 fs-6 small text-uppercase
-                               fw-bolder"
-                    >
-                        <span>Your payment methods</span>
-                        <hr class="flex-grow-1 m-0"/>
+                    <h4 id="o_payment_tokens_heading" class="fs-6 small text-uppercase fw-bolder">
+                        Your payment methods
                     </h4>
                     <!-- === Body === -->
                     <ul class="list-group">
@@ -96,12 +92,9 @@
                      t-att-class="'collapse' if collapse_payment_methods else ''"
                 >
                     <!-- === Header === -->
-                    <h4 class="d-flex gap-3 align-items-center mt-4 mb-3 fs-6 small text-uppercase
-                               fw-bolder"
-                    >
+                    <h4 class="fs-6 small text-uppercase fw-bolder">
                         <t t-if="not collapse_payment_methods">Choose a payment method</t>
                         <t t-else="">Other payment methods</t>
-                        <hr class="flex-grow-1 m-0"/>
                     </h4>
                     <!-- === Body === -->
                     <ul class="list-group">
diff --git a/addons/payment/views/portal_templates.xml b/addons/payment/views/portal_templates.xml
index d362763330a..21b1058ddd3 100644
--- a/addons/payment/views/portal_templates.xml
+++ b/addons/payment/views/portal_templates.xml
@@ -83,7 +83,9 @@
                                         <t t-set="include_separator" t-value="True"/>
                                     </t>
                                 </div>
-                                <t t-call="payment.form"/>
+                                <div class="mt-4">
+                                    <t t-call="payment.form"/>
+                                </div>
                             </t>
                         </div>
                     </div>
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index 72749298c73..d386c6b5f2e 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -295,7 +295,7 @@
                                         If you believe that it is an error, please contact the website administrator.
                                     </div>
                                     <div t-else="" id="payment_method" class="text-start">
-                                        <h3>Pay with</h3>
+                                        <h3 class="mb-3">Pay with</h3>
                                         <t t-call="payment.form">
                                             <!-- Inject the order ID to allow Stripe to check if tokenization is required. -->
                                             <t t-set="sale_order_id" t-value="sale_order.id"/>
diff --git a/addons/website_payment/views/payment_form_templates.xml b/addons/website_payment/views/payment_form_templates.xml
index cfdf2f3f39f..370c84d383b 100644
--- a/addons/website_payment/views/payment_form_templates.xml
+++ b/addons/website_payment/views/payment_form_templates.xml
@@ -4,7 +4,9 @@
     <!-- Insert the donation form inside the payment form's <form/> element. -->
     <template id="website_payment.payment_form" inherit_id="payment.form">
         <xpath expr="//div[@id='o_payment_form_options']" position="before">
-            <t t-if="is_donation" t-call="website_payment.donation_information"/>
+            <div class="mb-3" t-if="is_donation">
+                <t t-call="website_payment.donation_information"/>
+            </div>
         </xpath>
     </template>
 
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index fb842808ff8..147836a7ef6 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -742,18 +742,19 @@ a.no-decoration {
     }
 
     .o_wsale_accordion {
-        .collapse:not(.show) {
-            display: block;
-
-            @include media-breakpoint-down(lg) {
-                display: none;
-            }
+        .accordion-button{
+            background-color: unset;
         }
 
         .o_wsale_scrollable_table {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+            &::-webkit-scrollbar {
+              display: none;
+            }
             @include media-breakpoint-up(lg) {
                 overflow-y: scroll;
-                height: 21rem;
+                height: 15rem;
             }
         }
     }
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 5f94c8a2c25..503282f11ef 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -2127,13 +2127,10 @@
             </div>
             <div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_payment_1"/>
 
-            <t t-if="not errors and website_sale_order.amount_total" name="website_sale_non_free_cart">
-                <div class="mt-4">
-                    <h3>Pay with</h3>
-                </div>
+            <div t-if="not errors and website_sale_order.amount_total" name="website_sale_non_free_cart" class="mt-4">
                 <div t-if="payment_methods_sudo or tokens_sudo"
                         id="payment_method"
-                        class="o_not_editable mt-4">
+                        class="o_not_editable">
                     <t t-call="payment.form"/>
                 </div>
                 <div t-else="" class="alert alert-warning">
@@ -2163,7 +2160,7 @@
                         </a>
                     </div>
                 </div>
-            </t>
+            </div>
         </t>
     </template>
 
@@ -2223,14 +2220,14 @@
                         <div t-else=""
                              class="o_wsale_accordion accordion sticky-lg-top offset-xl-1 col-12 col-lg-5 col-xl-4 order-lg-2 rounded"
                              id="o_wsale_total_accordion">
-                            <div class="o_total_card">
-                                <div class="accordion-item p-lg-4 border-0">
-                                    <div class="accordion-header d-block d-lg-none align-items-center mb-4">
+                            <div class="o_total_card sticky-lg-top">
+                                <div id="o_wsale_total_accordion_item" class="accordion-item p-lg-4 border-0">
+                                    <div class="accordion-header d-block align-items-center mb-4">
                                         <button class="accordion-button px-0 collapsed"
                                                 data-bs-toggle="collapse"
-                                                data-bs-target="#o_wsale_total_accordion_item"
+                                                data-bs-target="#o_wsale_accordion_item"
                                                 aria-expanded="false"
-                                                aria-controls="o_wsale_total_accordion_item">
+                                                aria-controls="o_wsale_accordion_item">
                                             <div class="d-flex flex-wrap">
                                                 <b class="w-100">Order summary</b>
                                                 <span t-out="str(website_sale_order.cart_quantity)"/>
@@ -2245,11 +2242,10 @@
                                     <div name="cart_summary_info" t-if="not website_sale_order or not website_sale_order.website_order_line" class="alert alert-info">
                                         Your cart is empty!
                                     </div>
-                                    <!-- Cart lines are showed in desktop but are in an hidden accordion in mobile -->
-                                    <div id="o_wsale_total_accordion_item"
+                                    <div id="o_wsale_accordion_item"
                                         class="accordion-collapse collapse mb-4 mb-lg-0"
                                         data-bs-parent="#o_wsale_total_accordion">
-                                        <div t-att-class="len(website_sale_order.website_order_line) &gt; 4 and 'o_wsale_scrollable_table mt-n4 me-n4 pt-4 pe-4'">
+                                        <div t-att-class="len(website_sale_order.website_order_line) &gt; 3 and 'o_wsale_scrollable_table mt-n4 me-n4 pt-4 pe-4'">
                                             <table t-if="website_sale_order and website_sale_order.website_order_line"
                                                 class="table accordion-body mb-0"
                                                 id="cart_products">
@@ -2302,10 +2298,10 @@
                                                 <strong>Warning!</strong> <t t-esc='website_sale_order._get_shop_warning()'/>
                                             </div>
                                         </t>
-                                        <t t-call="website_sale.total">
-                                            <t t-set="_cart_total_classes" t-valuef="border-top pt-3"/>
-                                        </t>
                                     </div>
+                                    <t t-call="website_sale.total">
+                                        <t t-set="_cart_total_classes" t-valuef="border-top pt-3"/>
+                                    </t>
                                     <div t-if="show_navigation_button" class="o_cta_navigation_container position-absolute position-lg-static start-0 bottom-0 col-12">
                                         <t t-call="website_sale.navigation_buttons"/>
                                     </div>
diff --git a/addons/website_sale/views/website_sale_delivery_templates.xml b/addons/website_sale/views/website_sale_delivery_templates.xml
index 44473c8382d..51adfb93c7e 100644
--- a/addons/website_sale/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale/views/website_sale_delivery_templates.xml
@@ -44,10 +44,10 @@
 
     <template id="payment_delivery" name="Delivery Costs" inherit_id="website_sale.payment">
         <!-- //t[@t-if='website_sale_order.amount_total'] should be removed in master -->
-        <xpath expr="//t[@name='website_sale_non_free_cart'] | //t[@t-if='website_sale_order.amount_total']" position="before">
+        <xpath expr="//div[@name='website_sale_non_free_cart'] | //t[@t-if='website_sale_order.amount_total']" position="before">
             <div t-if="deliveries" id="delivery_carrier">
                 <t t-set="delivery_nb" t-value="len(deliveries)"/>
-                <h4>Choose a delivery method</h4>
+                <h4 class="fs-6 small text-uppercase fw-bolder">Choose a delivery method</h4>
                 <div class="card border-0" id="delivery_method">
                     <ul class="list-group">
                     <t t-foreach="deliveries" t-as="delivery">