From 0499bc16875371860f10308f8b1553aaafa04e2c Mon Sep 17 00:00:00 2001
From: Julien Van Roy <juvr@odoo.com>
Date: Mon, 23 Jan 2023 14:23:37 +0000
Subject: [PATCH] [IMP] website_sale: allow the checkout wizard to have any
 number of steps

Previously, the columns of the checkout wizard were hardcoded (3 columns
or 4 if the extra step is enabled). Using a bootstrap grid allows us to
support any number of steps. This is convenient, for instance, when we
need to specify some country specific fields in an additional
information tab.

related to task-3089169

Part-of: odoo/odoo#108181
---
 .../static/src/scss/website_sale_frontend.scss | 12 ++++++------
 addons/website_sale/views/templates.xml        | 18 +++++++-----------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss
index 8beecf01eb3..9f98ab056b0 100644
--- a/addons/website_sale/static/src/scss/website_sale_frontend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss
@@ -29,17 +29,17 @@ $o-wsale-wizard-label-completed: $success;
         padding: 0;
     }
 
+    .col {
+        @include media-breakpoint-down(md) {
+            flex: none;
+        }
+    }
+
     .progress-wizard-step {
         position: relative;
 
         @include media-breakpoint-up(md) {
             margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5;
-            float: left;
-            width: percentage(1/3);
-
-            .o_wizard_has_extra_step + & {
-                width: percentage(1/4);
-            }
         }
         @include media-breakpoint-down(md) {
             &.disabled, &.complete {
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index b2aabf725ec..14c9b1ca1f4 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1239,23 +1239,23 @@
 
         <div class="row">
             <div class="col-xl">
-                <div class="wizard">
-                    <div class="progress-wizard">
-                        <a class="no-decoration" t-att-href="step&gt;=10 and '/shop/cart' or '#'">
+                <div class="wizard container">
+                    <div class="progress-wizard row g-0">
+                        <a class="no-decoration col" t-att-href="step&gt;=10 and '/shop/cart' or '#'">
                           <div id="wizard-step10" t-att-class="'progress-wizard-step %s' % (step == 10 and 'active' or step&gt;10 and 'complete' or 'disabled')">
                             <div class="progress-wizard-bar d-none d-md-block"/>
                             <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                             <div class="text-center progress-wizard-steplabel">Review Order</div>
                           </div>
                         </a>
-                        <a class="no-decoration" t-att-href="step&gt;=20 and '/shop/checkout' or '#'">
+                        <a class="no-decoration col" t-att-href="step&gt;=20 and '/shop/checkout' or '#'">
                           <div id="wizard-step20" t-att-class="'progress-wizard-step %s' % (step == 20 and 'active' or step&gt;20 and 'complete' or 'disabled')">
                             <div class="progress-wizard-bar d-none d-md-block"/>
                             <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                             <div class="text-center progress-wizard-steplabel">Address</div>
                           </div>
                         </a>
-                        <a class="no-decoration" t-att-href="step&gt;=40 and '/shop/payment' or '#'">
+                        <a class="no-decoration col" t-att-href="step&gt;=40 and '/shop/payment' or '#'">
                           <div id="wizard-step40" t-att-class="'progress-wizard-step %s' % (step == 40 and 'active' or step&gt;40 and 'complete' or 'disabled')">
                             <div class="progress-wizard-bar d-none d-md-block"/>
                             <span class="progress-wizard-dot d-none d-md-inline-block"></span>
@@ -1338,12 +1338,8 @@
     </template>
 
     <template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False">
-        <!-- Add a "flag element" to trigger style variation -->
-        <xpath expr="//div[hasclass('wizard')]/div" position="before">
-            <span class="o_wizard_has_extra_step d-none"/>
-        </xpath>
-        <xpath expr="//div[@id='wizard-step20']" position="after">
-            <a class="no-decoration" t-att-href="step&gt;=30 and '/shop/extra_info' or '#'">
+        <xpath expr="//div[@id='wizard-step20']/parent::a" position="after">
+            <a class="no-decoration col" t-att-href="step&gt;=30 and '/shop/extra_info' or '#'">
                 <div id="wizard-step30" t-att-class="'progress-wizard-step %s' % (step == 30 and 'active' or step&gt;30 and 'complete' or 'disabled')">
                     <div class="progress-wizard-bar d-none d-md-block"/>
                     <span class="progress-wizard-dot d-none d-md-inline-block"></span>