From 006ce9c88763053de9003b2a197a89258d534865 Mon Sep 17 00:00:00 2001
From: Jeremy Kersten <jke@odoo.com>
Date: Fri, 16 Mar 2018 11:58:20 +0100
Subject: [PATCH] [IMP] website_sale: fast checkout if no distinct shipping
 address.

Change flow for checkout.

Allow to specify during the billing address if you want to use the same address
for the shipping. If it is the case, we bypass the address selector step.

Use last shipping address by default

Re-add right column for lg-screen

Fix checkbox terms, which was at the wrong place and checked by default

Payment: allow to add back button, and choose position of icon

Courtesy of:
   fgi for specs, re-specs, re-re-specs and testing
   sri for help to design new progress-bar

Task-39062
---
 addons/payment/views/payment_templates.xml    |   9 +-
 .../static/src/js/website.tour.event_sale.js  |   4 -
 addons/website_sale/controllers/main.py       |  15 +-
 addons/website_sale/models/website.py         |   4 +-
 .../static/src/js/website_sale.js             |  25 +-
 .../static/src/js/website_sale_tour_buy.js    |   7 +-
 .../static/src/less/website_sale.less         |  38 +-
 .../src/less/website_sale_frontend.less       | 139 ++++
 addons/website_sale/views/templates.xml       | 675 +++++++++---------
 .../views/website_sale_delivery_templates.xml |  27 +-
 .../views/website_sale_stock_templates.xml    |   4 +-
 .../__manifest__.py                           |   2 +-
 12 files changed, 566 insertions(+), 383 deletions(-)
 create mode 100644 addons/website_sale/static/src/less/website_sale_frontend.less

diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index 1b6246290fa..45ad4a9b0e6 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -138,11 +138,18 @@
                     </div>
                 </t>
             </div>
+            <div t-if='back_button_txt' class="pull-left">
+                <a t-att-href="back_button_link or '#'" t-att-class="back_button_class or 'btn btn-lg btn-default'">
+                    <i t-if="back_button_icon_class" t-attf-class="fa {{back_button_icon_class}}"/>
+                    <t t-esc="back_button_txt"/>
+                </a>
+            </div>
             <div class="pull-right">
                 <button t-if="mode == 'payment'" id="o_payment_form_pay" type="submit" t-att-class="submit_class if submit_class else 'btn btn-primary btn-lg mb8 mt8'">
                     <t t-if="submit_txt">
-                        <i t-if="icon_class" t-attf-class="fa {{icon_class}}"/>
+                        <i t-if="icon_class and not icon_right" t-attf-class="fa {{icon_class}}"/>
                         <t t-esc="submit_txt"/>
+                        <i t-if="icon_class and icon_right" t-attf-class="fa {{icon_class}}"/>
                     </t>
                     <t t-else="">
                         <i class="fa fa-lock"> Pay</i>
diff --git a/addons/website_event_sale/static/src/js/website.tour.event_sale.js b/addons/website_event_sale/static/src/js/website.tour.event_sale.js
index fef2c038777..b3208db0040 100644
--- a/addons/website_event_sale/static/src/js/website.tour.event_sale.js
+++ b/addons/website_event_sale/static/src/js/website.tour.event_sale.js
@@ -70,10 +70,6 @@ tour.register('event_buy_tickets', {
             extra_trigger: 'a:has(.my_cart_quantity):contains(4),#cart_products input.js_quantity[value="3"]',
             trigger: '.btn-primary:contains("Process Checkout")'
         },
-        {
-            content: "Complete the checkout",
-            trigger: 'a[href="/shop/confirm_order"]:contains("Confirm")',
-        },
         {
             content: "Check that the subtotal is 5,500.00 USD", // this test will fail if the currency of the main company is not USD
             trigger: '#order_total_untaxed .oe_currency_value:contains("5,500.00")',
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index 3cf961ada09..5cb4f856a20 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -417,6 +417,10 @@ class WebsiteSale(http.Controller):
             'compute_currency': lambda price: from_currency.compute(price, to_currency),
             'suggested_products': order._cart_accessories()
         })
+        value['website_sale.short_cart_summary'] = request.env['ir.ui.view'].render_template("website_sale.short_cart_summary", {
+            'website_sale_order': order,
+            'compute_currency': lambda price: from_currency.compute(price, to_currency),
+        })
         return value
 
     # ------------------------------------------------------
@@ -615,16 +619,17 @@ class WebsiteSale(http.Controller):
                 values = kw
             else:
                 partner_id = self._checkout_form_save(mode, post, kw)
-
                 if mode[1] == 'billing':
                     order.partner_id = partner_id
                     order.onchange_partner_id()
+                    if not kw.get('use_same'):
+                        kw['callback'] = kw.get('callback') or (not order.only_services and '/shop/address')
                 elif mode[1] == 'shipping':
                     order.partner_shipping_id = partner_id
 
                 order.message_partner_ids = [(4, partner_id), (3, request.website.partner_id.id)]
                 if not errors:
-                    return request.redirect(kw.get('callback') or '/shop/checkout')
+                    return request.redirect(kw.get('callback') or '/shop/confirm_order')
 
         country = 'country_id' in values and values['country_id'] != '' and request.env['res.country'].browse(int(values['country_id']))
         country = country and country.exists() or def_country_id
@@ -638,6 +643,7 @@ class WebsiteSale(http.Controller):
             "states": country.get_website_sale_states(mode=mode[1]),
             'error': errors,
             'callback': kw.get('callback'),
+            'only_services': order and order.only_services,
         }
         return request.render("website_sale.address", render_values)
 
@@ -658,6 +664,10 @@ class WebsiteSale(http.Controller):
 
         values = self.checkout_values(**post)
 
+        if post.get('express'):
+            return request.redirect('/shop/confirm_order')
+
+
         values.update({'website_sale_order': order})
 
         # Avoid useless rendering if called in ajax
@@ -770,6 +780,7 @@ class WebsiteSale(http.Controller):
             return redirection
 
         render_values = self._get_shop_payment_values(order, **post)
+        render_values['only_services'] = order and order.only_services or False
 
         if render_values['errors']:
             render_values.pop('acquirers', '')
diff --git a/addons/website_sale/models/website.py b/addons/website_sale/models/website.py
index 9f43a6791d8..0a3b20d9070 100644
--- a/addons/website_sale/models/website.py
+++ b/addons/website_sale/models/website.py
@@ -158,6 +158,8 @@ class Website(models.Model):
         affiliate_id = request.session.get('affiliate_id')
         salesperson_id = affiliate_id if self.env['res.users'].sudo().browse(affiliate_id).exists() else request.website.salesperson_id.id
         addr = partner.address_get(['delivery', 'invoice'])
+        if len(partner.sale_order_ids):  # first = me
+            addr['delivery'] = partner.sale_order_ids[0].partner_shipping_id.id
         default_user_id = partner.parent_id.user_id.id or partner.user_id.id
         values = {
             'partner_id': partner.id,
@@ -228,7 +230,7 @@ class Website(models.Model):
 
             request.session['sale_order_id'] = sale_order.id
 
-            if request.website.partner_id.id != partner.id:
+            if request.website.partner_id.id != partner.id and partner.last_website_so_id.id != sale_order.id:
                 partner.write({'last_website_so_id': sale_order.id})
 
         if sale_order:
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 1544f199088..ddbcf60319d 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -161,8 +161,7 @@ odoo.define('website_sale.website_sale', function (require) {
                     $q.parents('li:first').removeClass("hidden");
                 }
                 else {
-                    $q.parents('li:first').addClass("hidden");
-                    $('a[href*="/shop/checkout"]').addClass("hidden");
+                    window.location = '/shop/cart';
                 }
 
                 $q.html(data.cart_quantity).hide().fadeIn(600);
@@ -170,6 +169,7 @@ odoo.define('website_sale.website_sale', function (require) {
                 $('.js_quantity[data-line-id='+line_id+']').val(data.quantity).html(data.quantity);
 
                 $(".js_cart_lines").first().before(data['website_sale.cart_lines']).end().remove();
+                $(".js_cart_summary").first().before(data['website_sale.short_cart_summary']).end().remove();
 
                 if (data.warning) {
                     var cart_alert = $('.oe_cart').parent().find('#data_warning');
@@ -369,6 +369,10 @@ odoo.define('website_sale.website_sale', function (require) {
             $('input.js_variant_change, select.js_variant_change', this).first().trigger('change');
         });
 
+        $('.oe_website_sale').on('click', '.show_coupon', function(e) {
+            $(e.currentTarget).hide();
+            $('.coupon_form').removeClass('hidden');
+        });
         $('.oe_cart').on('click', '.js_change_shipping', function() {
           if (!$('body.editor_enable').length) { //allow to edit button text with editor
             var $old = $('.all_shipping').find('.panel.border_primary');
@@ -460,6 +464,23 @@ odoo.define('website_sale.website_sale', function (require) {
         }
         $("select[name='country_id']").change();
     });
+    if ($('#checkbox_cgv').length) {
+        $('#checkbox_cgv').trigger('change');
+    }
+    $('#shipping_use_same').on('change', function(e) {
+        $('.ship_to_other').toggle(!$(e.currentTarget).prop('checked'));
+    });
+
+    $('.toggle_summary').on('click', function(e) {
+        $('.toggle_summary_div').toggleClass('hidden');
+        $('.toggle_summary_div').removeClass('visible-lg');
+    });
+
+    core.bus.on('resize', this, function() {
+        if (config.device.size_class === config.device.SIZES.LG) {
+            $('.toggle_summary_div').addClass('visible-lg');
+        }
+    });
 
     // Deactivate image zoom for mobile devices, since it might prevent users to scroll
     if (!config.device.isMobile) {
diff --git a/addons/website_sale/static/src/js/website_sale_tour_buy.js b/addons/website_sale/static/src/js/website_sale_tour_buy.js
index 10ff83552ed..7b691eacc31 100644
--- a/addons/website_sale/static/src/js/website_sale_tour_buy.js
+++ b/addons/website_sale/static/src/js/website_sale_tour_buy.js
@@ -62,12 +62,7 @@ tour.register('shop_buy_product', {
         {
             content: "go to checkout",
             extra_trigger: '#cart_products input.js_quantity:propValue(1)',
-            trigger: 'a[href="/shop/checkout"]',
-        },
-        {
-            content: "Confirm checkout",
-            extra_trigger: "div.all_shipping .panel",
-            trigger: 'a[href="/shop/confirm_order"]',
+            trigger: 'a[href*="/shop/checkout"]',
         },
         {
             content: "select payment",
diff --git a/addons/website_sale/static/src/less/website_sale.less b/addons/website_sale/static/src/less/website_sale.less
index 756f2aa3422..1a6119603f7 100644
--- a/addons/website_sale/static/src/less/website_sale.less
+++ b/addons/website_sale/static/src/less/website_sale.less
@@ -29,6 +29,30 @@
 }
 
 .oe_website_sale {
+
+    .show_coupon {
+        white-space: nowrap;
+    }
+    .o_payment_form .panel {
+        border-radius: 4px !important;
+    }
+    .address-inline address {
+        display: inline-block;
+    }
+    table#cart_products tr td, table#suggested_products tr td {
+        vertical-align: middle;
+    }
+
+    table#cart_products {
+        margin-bottom: 0;
+
+        td, th {
+            &:first-child {
+                padding-left: @grid-gutter-width*0.5;
+            }
+        }
+    }
+
     ul ul {
         margin-left: 1.5em;
     }
@@ -49,6 +73,13 @@
 
     .td-qty {
         width: 130px;
+        a.input-group-addon {
+            background-color: transparent;
+            border: 0px;
+        }
+    }
+    .td-action {
+        width: 30px;
     }
 
     .td-price,
@@ -70,11 +101,6 @@
             width: 80px;
         }
     }
-    @media (min-width: 768px) {
-        .o_website_sale_rightfit {
-            padding-right: 0;
-        }
-    }
 
     @media (max-width: 476px) {
         .td-qty {
@@ -743,7 +769,7 @@ td.noborder {
 }
 
 .border_primary {
-    border: 1px solid #337ab7;
+    border: 1px solid @odoo-brand-primary;
 }
 
 .js_change_shipping {
diff --git a/addons/website_sale/static/src/less/website_sale_frontend.less b/addons/website_sale/static/src/less/website_sale_frontend.less
new file mode 100644
index 00000000000..f7d35c780a6
--- /dev/null
+++ b/addons/website_sale/static/src/less/website_sale_frontend.less
@@ -0,0 +1,139 @@
+//## Website Sale frontent design
+//## ----------------------------
+
+// Theming variables
+@o-wsale-wizard-thickness: 2px;
+@o-wsale-wizard-dot-size: 10px;
+@o-wsale-wizard-dot-active-glow: 4px;
+
+@o-wsale-wizard-color-inner: white;
+@o-wsale-wizard-color-default: @gray-lighter;
+
+@o-wsale-wizard-dot-active: @brand-primary;
+@o-wsale-wizard-dot-completed: @brand-success;
+
+@o-wsale-wizard-label-default: @text-muted;
+@o-wsale-wizard-label-active: @text-color;
+@o-wsale-wizard-label-completed: @state-success-text;
+
+
+.progress-wizard {
+    // Scoped variables
+    @tmp-dot-radius: (@o-wsale-wizard-dot-size + @o-wsale-wizard-thickness)*0.5;
+    @tmp-check-size: max(@font-size-base, @o-wsale-wizard-dot-size + @o-wsale-wizard-thickness + @o-wsale-wizard-dot-active-glow*2);
+    @tmp-check-pos: @o-wsale-wizard-dot-size*0.5 - @tmp-check-size*0.5;
+
+    margin-top: @grid-gutter-width*0.5;
+    padding: 0 @grid-gutter-width*0.5;
+
+    @media (min-width: @screen-sm-min) {
+        padding: 0;
+    }
+
+    .progress-wizard-step {
+        position: relative;
+
+        @media (min-width: @screen-sm-min) {
+            margin-top: @tmp-dot-radius + @o-wsale-wizard-thickness*3.5;
+            float: left;
+            width: 100%/3;
+
+            .o_wizard_has_extra_step + & {
+                width: 100%/4;
+            }
+        }
+        @media (max-width: @screen-xs-max) {
+            &.disabled, &.complete {
+                display:none;
+            }
+        }
+        .progress-wizard-dot {
+            .square(@o-wsale-wizard-dot-size);
+            position: relative;
+            display: inline-block;
+            background-color: @o-wsale-wizard-color-inner;
+            border-radius: 50%;
+            box-shadow: 0 0 0 @o-wsale-wizard-thickness @o-wsale-wizard-color-default;
+
+            @media (min-width: @screen-sm-min) {
+                .o-position-absolute(@left: 50%);
+                margin: -@tmp-dot-radius 0 0 -(@o-wsale-wizard-dot-size*0.5);
+            }
+        }
+
+        .progress-wizard-steplabel {
+            color: @o-wsale-wizard-label-default;
+            margin: 5px 0 5px 5px;
+            font-size: @font-size-base;
+            display: inline-block;
+
+            @media (min-width: @screen-sm-min) {
+                display: block;
+                margin: (10px + @tmp-dot-radius) 0 20px 0;
+            }
+            @media (max-width: @screen-xs-max) {
+                margin-left: -15px;
+                font-size:24px;
+            }
+        }
+
+        .progress-wizard-bar {
+            height: @o-wsale-wizard-thickness;
+            background-color: @o-wsale-wizard-color-default;
+        }
+
+        &.active {
+            .progress-wizard-dot {
+                .o-animation(fadeIn, 1s);
+                background: @o-wsale-wizard-dot-active;
+                box-shadow: 0 0 0 @o-wsale-wizard-dot-active-glow - 1px @o-wsale-wizard-color-inner,
+                            0 0 0 @o-wsale-wizard-dot-active-glow fade(@o-wsale-wizard-dot-active, 50%);
+            }
+
+            .progress-wizard-steplabel {
+                color: @o-wsale-wizard-label-active;
+                font-weight: bolder;
+            }
+        }
+
+        &.complete {
+            .progress-wizard-dot {
+                background: none;
+                box-shadow: none;
+
+                &:after {
+                    .o-position-absolute(@tmp-check-pos, @left: @tmp-check-pos);
+                    .square(@tmp-check-size);
+                    border-radius: 100%;
+
+                    background: @o-wsale-wizard-color-inner;
+                    color: @o-wsale-wizard-dot-completed;
+                    text-align: center;
+                    line-height: 1;
+                    font-size: @tmp-check-size;
+                    font-family: FontAwesome;
+
+                    content: "\f058";
+                }
+            }
+
+            .progress-wizard-steplabel {
+                color: @o-wsale-wizard-label-completed;
+            }
+
+            &:hover:not(.disabled) {
+                .progress-wizard-dot:after {
+                    color: @o-wsale-wizard-label-completed;
+                }
+
+                .progress-wizard-steplabel {
+                    color: @o-wsale-wizard-label-active;
+                }
+            }
+        }
+
+        &.disabled {
+            cursor: default;
+        }
+    }
+}
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index af6c2617d60..1f8c1aa0230 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -12,6 +12,7 @@
         <xpath expr="link[last()]" position="after">
             <link rel="stylesheet" type="text/less" href="/website_sale/static/src/less/website_sale.less" />
             <link rel="stylesheet" type="text/less" href="/website_sale/static/src/less/website_mail.less" />
+            <link rel="stylesheet" href="/website_sale/static/src/less/website_sale_frontend.less"/>
         </xpath>
         <xpath expr="script[last()]" position="after">
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
@@ -686,32 +687,36 @@
 
     <template id="wizard_checkout" name="Wizard Checkout">
         <t t-set="website_sale_order" t-value="website.sale_get_order()"/>
-        <ul class="wizard pull-right hidden-xs">
-            <li t-att-class="step==10 and 'text-primary' or 'text-muted'" id="step10">
-                <t t-set="step_review_order" t-value="step&gt;10 and step&lt;50"/>
-                <a t-att-href="step_review_order and '/shop/cart' or '#'" t-att-class="step_review_order and 'text-success' or 'o_link_disable'">
-                    <span>Review Order</span>
-                </a>
-                <span class="chevron"/>
-            </li>
-            <li t-att-class="(step==20 and 'text-primary') or 'text-muted'" id="step20">
-                <!-- why website_sale_order is not set here ? -->
-                <t t-set="step_billing" t-value="step&gt;20 and step&lt;50"/>
-                <a t-att-href="step_billing and '/shop/checkout' or '#'" t-att-class="step_billing and 'text-success' or ('o_link_disable' + ('' if step == 20 else ' text-muted'))">
-                    <!-- billing if not loggedin - TODO -->
-                    <t t-set="website_sale_order" t-value="website.sale_get_order()" />
-                    <span>Billing</span>
-                    <t t-if="not website_sale_order or not website_sale_order.website_order_line or not website_sale_order.only_services"><span> &amp; Shipping</span></t>
-                    <span class="chevron"/>
-                </a>
-            </li>
-            <li t-att-class="(step==40 and 'text-primary') or 'text-muted'" id="step40">
-                Payment<span class="chevron"></span>
-            </li>
-            <li t-att-class="(step==50 and 'text-primary') or 'text-muted'" id="step50">
-                Confirmation<span class="chevron"></span>
-            </li>
-        </ul>
+
+        <div class="row">
+            <div class="col-lg-8">
+                <div class="wizard">
+                    <div class="progress-wizard">
+                        <a class="no-decoration" 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 hidden-xs"/>
+                            <span class="progress-wizard-dot hidden-xs"></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 '#'">
+                          <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 hidden-xs"/>
+                            <span class="progress-wizard-dot hidden-xs"></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 '#'">
+                          <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 hidden-xs"/>
+                            <span class="progress-wizard-dot hidden-xs"></span>
+                            <div class="text-center progress-wizard-steplabel">Confirm Order</div>
+                          </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </template>
 
     <template id="extra_info" name="Checkout Extra Info">
@@ -720,57 +725,53 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
-                            <div class='row'>
-                                <t t-call="website_sale.wizard_checkout">
-                                    <t t-set="step" t-value="30"/>
-                                </t>
-                            </div>
+                        <div class='col-md-12'>
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="30"/>
+                            </t>
+                        </div>
+                        <div class="col-lg-4 col-lg-push-8 hidden visible-lg">
+                            <t t-call='website_sale.cart_summary'/>
+                        </div>
+                        <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
                             <div class="row">
-                                <div class='col-md-12 o_website_sale_rightfit'>
-                                    <h2 class="mb8 mt8">Extra Step</h2>
+                                <div class='col-md-12'>
                                     <form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid" enctype="multipart/form-data" data-force_action="shop.sale.order" data-model_name="sale.order" data-success_page="/shop/payment">
                                         <div class="form-group form-field o_website_form_custom">
                                             <div class="col-md-3 col-sm-4 text-right-not-xs">
                                                 <label class="control-label" for="client_order_ref">Your Reference</label>
                                             </div>
-                                            <div class="col-md-7 col-sm-8">
+                                            <div class="col-md-9 col-sm-8">
                                                 <input type="text" class="form-control o_website_form_input" name="client_order_ref"/>
                                             </div>
                                         </div>
                                         <div class="form-group form-field o_website_form_custom">
                                             <div class="col-md-3 col-sm-4 text-right-not-xs">
-                                                <label class="control-label" for="Give us your feedback...">Give us your feedback...</label>
+                                                <label class="control-label" for="Give us your feedback">Give us your feedback</label>
                                             </div>
-                                            <div class="col-md-7 col-sm-8">
-                                                <textarea class="form-control o_website_form_input" name="Give us your feedback..." />
+                                            <div class="col-md-9 col-sm-8">
+                                                <textarea class="form-control o_website_form_input" rows="8" name="Give us your feedback" />
                                             </div>
                                         </div>
                                         <div class="form-group form-field o_website_form_custom">
                                             <div class="col-md-3 col-sm-4 text-right-not-xs">
                                                 <label class="control-label" for="a_document">A document to provide</label>
                                             </div>
-                                            <div class="col-md-7 col-sm-8">
+                                            <div class="col-md-9 col-sm-8">
                                                 <input type="file" class="form-control o_website_form_input" name="a_document" />
                                             </div>
                                         </div>
                                         <div class="form-group">
                                             <div class="col-md-3 col-sm-4">
                                             </div>
-                                            <div class="col-md-7 col-sm-8">
-                                                <a href="/shop/checkout" class="btn btn-default mb32 pull-left"><span class="fa fa-long-arrow-left" /> Previous</a>
-                                                <a class="btn btn-primary pull-right mb32 o_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-long-arrow-right" /></a>
+                                            <div class="col-md-9 col-sm-8">
+                                                <a href="/shop/checkout" class="btn btn-default mb32 pull-left"><span class="fa fa-chevron-left" /> Previous</a>
+                                                <a class="btn btn-primary pull-right mb32 o_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
                                             </div>
                                         </div>
                                     </form>
                                 </div>
                             </div>
-                            <!--
-                                Sample Code to re-inject previous value is needed.
-                                <script>
-                                    $("input[name='client_order_ref']").val(_.unescape('<t t-esc="escape(website_sale_order.client_order_ref or '') or ''"/>'));
-                                </script>
-                            -->
                         </div>
                     </div>
                 </div>
@@ -780,29 +781,18 @@
     </template>
 
     <template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False" customize_show="True">
-        <xpath expr="//li[@id='step40']" position="replace">
-            <li t-att-class="(step==40 and 'text-primary') or 'text-muted'" id="step40">
-                <t t-if="step&gt;40 and step&lt;50">
-                    <a href="/shop/payment" class="text-success">
-                        Payment<span class="chevron"></span>
-                    </a>
-                </t>
-                <t t-if="not (step&gt;40 and step&lt;50)">
-                    Payment<span class="chevron"></span>
-                </t>
-            </li>
+        <!-- Add a "flag element" to trigger style variation -->
+        <xpath expr="//div[hasclass('wizard')]/div" position="before">
+            <span class="o_wizard_has_extra_step hidden"/>
         </xpath>
-        <xpath expr="//li[@id='step20']" position="after">
-            <li t-att-class="(step==30 and 'text-primary') or 'text-muted'" id="step30">
-                <t t-if="step&gt;30 and step&lt;50">
-                    <a href="/shop/extra_info" class="text-success">
-                        Extra Info<span class="chevron"></span>
-                    </a>
-                </t>
-                <t t-if="not (step&gt;30 and step&lt;50)">
-                    Extra Info<span class="chevron"></span>
-                </t>
-            </li>
+        <xpath expr="//div[@id='wizard-step20']" position="after">
+            <a class="no-decoration" 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 hidden-xs"/>
+                        <span class="progress-wizard-dot hidden-xs"></span>
+                    <div class="text-center progress-wizard-steplabel">Extra Info</div>
+                </div>
+            </a>
         </xpath>
     </template>
 
@@ -810,13 +800,14 @@
         <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="js_cart_lines well well-lg">
           Your cart is empty!
         </div>
-        <table class="table table-striped table-condensed js_cart_lines" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
+        <table class="mb16 table table-striped table-condensed js_cart_lines" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
             <thead>
                 <tr>
                     <th class="td-img">Product</th>
                     <th></th>
                     <th class="text-center td-qty">Quantity</th>
                     <th class="text-center td-price">Price</th>
+                    <th class="text-center td-action"></th>
                 </tr>
             </thead>
             <tbody>
@@ -837,7 +828,6 @@
                                     <span><t t-esc="name_line"/></span><br/>
                                 </t>
                             </div>
-                            <a href='#' class='js_delete_product hidden-xs no-decoration'> <small><i class='fa fa-trash-o'></i> Remove</small></a>
                         </td>
                         <td class="text-center td-qty">
                             <div class="css_quantity input-group oe_website_spinner">
@@ -857,16 +847,14 @@
                             <span t-field="line.price_reduce_taxexcl" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_subtotal" />
                             <span t-field="line.price_reduce_taxinc" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_total" />
                         </td>
+                        <td class="td-action">
+                            <a href='#' class='js_delete_product no-decoration'> <small><i class='fa fa-trash-o'></i></small></a>
+                        </td>
                     </tr>
                 </t>
             </tbody>
         </table>
-        <div class="js_cart_lines row">
-            <t t-call="website_sale.total">
-                <t t-set='extra_class' t-value='"col-xs-12 col-sm-5 col-sm-push-7"'/>
-                <t t-set='redirect'>/shop/cart</t>
-            </t>
-        </div>
+
     </template>
 
     <template id="cart" name="Shopping Cart">
@@ -874,15 +862,14 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
+                        <div class="col-md-12">
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="10" />
+                            </t>
+                        </div>
+                        <div class="col-lg-8 col-sm-12 col-xs-12 oe_cart">
                             <div class="row">
-                                <t t-call="website_sale.wizard_checkout">
-                                    <t t-set="step" t-value="10" />
-                                </t>
-                            </div>
-                            <div class="row">
-                                <div class="col-md-12 o_website_sale_rightfit">
-                                    <h2 class="mb8 mt8">Shopping Cart</h2>
+                                <div class="col-md-12">
                                     <div t-if="abandoned_proceed or access_token" class="mt8 mb8 alert alert-info"> <!-- abandoned cart choices -->
                                         <t t-if="abandoned_proceed">
                                             <p>Your previous cart has already been completed.</p>
@@ -899,15 +886,31 @@
                                     </div>
                                     <t t-call="website_sale.cart_lines" />
                                     <div class="clearfix" />
-                                    <a t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8" href="/shop/checkout">
-                                        <span class="hidden-xs">Process Checkout</span>
-                                        <span class="visible-xs-inline">Checkout</span>
-                                        <span class="fa fa-long-arrow-right" />
+                                    <a href="/shop" class="btn btn-default mb32 hidden-xs hidden-sm hidden-md">
+                                        <span class="fa fa-chevron-left" />
+                                        <span class="">Continue Shopping</span>
+                                    </a>
+                                    <a t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8 hidden visible-lg" href="/shop/checkout?express=1">
+                                        <span class="">Process Checkout</span>
+                                        <span class="fa fa-chevron-right" />
                                     </a>
                                     <div class="oe_structure" />
                                 </div>
                             </div>
                         </div>
+                        <div class="col-lg-4 col-sm-12 col-xs-12">
+                            <t t-call='website_sale.short_cart_summary'/>
+                            <div class='hidden-lg'>
+                                <a href="/shop" class="btn btn-default mb32">
+                                    <span class="fa fa-chevron-left" />
+                                    Continue<span class="hidden-xs"> Shopping</span>
+                                </a>
+                                <a t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8" href="/shop/checkout?express=1">
+                                    <span class="">Process Checkout</span>
+                                    <span class="fa fa-chevron-right" />
+                                </a>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="oe_structure" />
@@ -917,8 +920,8 @@
 
     <template id="cart_popover" name="Cart Popover">
         <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="well well-lg">
-                  Your cart is empty!
-                </div>
+          Your cart is empty!
+        </div>
         <t t-if="website_sale_order and website_sale_order.website_order_line">
             <t t-foreach="website_sale_order.website_order_line" t-as="line">
                 <div class="row mb8 cart_line">
@@ -950,7 +953,7 @@
     <template id="suggested_products_list" inherit_id="website_sale.cart_lines" customize_show="True" name="Alternative Products in my cart">
         <xpath expr="//table[@id='cart_products']" position="after">
             <h5 class='text-muted js_cart_lines' t-if="suggested_products">Suggested Accessories:</h5>
-            <table t-if="suggested_products" class="js_cart_lines table table-striped table-condensed">
+            <table t-if="suggested_products" id="suggested_products" class="js_cart_lines table table-striped table-condensed">
                 <tbody>
                     <tr t-foreach="suggested_products" t-as="product">
                         <td class='td-img'>
@@ -984,16 +987,6 @@
         </xpath>
     </template>
 
-    <template id="continue_shopping" inherit_id="website_sale.cart" customize_show="True" name="Continue Shopping Button">
-        <xpath expr="//a[@href='/shop/checkout']" position="before">
-            <a href="/shop" class="btn btn-default mb32">
-                <span class="fa fa-long-arrow-left" />
-                <span class="hidden-xs">Continue Shopping</span>
-                <span class="visible-xs-inline">Continue</span>
-            </a>
-        </xpath>
-    </template>
-
     <template id='coupon_form' name='Coupon form'>
         <t t-if="request.params.get('code_not_available')" name="code_not_available">
             <p class="bg-warning">This promo code is not available</p>
@@ -1001,8 +994,8 @@
         <form t-att-action="'/shop/pricelist%s' % (redirect and '?r=' + redirect or '')"
             method="post" class="mb32" name="coupon_code">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
-            <div class="input-group">
-                <input name="promo" class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None" />
+            <div class="input-group" style='margin-left:auto; margin-right: auto'>
+                <input name="promo" style='min-width:180px' class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None" />
                 <div class="input-group-btn">
                     <a class="btn btn-default a-submit">Apply</a>
                 </div>
@@ -1018,15 +1011,18 @@
                 <div class="container oe_website_sale">
                     <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                     <div class="row">
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
-                            <div class='row'>
-                                <t t-call="website_sale.wizard_checkout">
-                                    <t t-set="step" t-value="20" />
-                                </t>
-                            </div>
+                        <div class='col-md-12'>
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="20" />
+                            </t>
+                        </div>
+                        <div class="col-lg-4 col-lg-push-8 hidden visible-lg">
+                            <t t-call='website_sale.cart_summary' />
+                        </div>
+                        <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
                             <div class="row">
                                 <div class="col-md-12">
-                                    <h2 class="page-header mt8">Billing Address</h2>
+                                    <h3 class="page-header mt8">Billing Address</h3>
                                 </div>
                                 <div class="col-md-6 one_kanban">
                                     <t t-call="website_sale.address_kanban">
@@ -1039,8 +1035,7 @@
                             <t t-if="not only_services" groups="sale.group_delivery_invoice_address">
                                 <div class="row">
                                     <div class="col-md-12">
-                                        <h2 class="page-header mt16 mb4">Shipping Address
-                                        </h2>
+                                        <h3 class="page-header mt16 mb4">Shipping Address</h3>
                                     </div>
                                 </div>
                                 <div class="row all_shipping">
@@ -1072,8 +1067,8 @@
                             <div class="clearfix" />
                             <div>
                                 <a href="/shop/cart" class="btn btn-default mb32">
-                                    <span class="fa fa-long-arrow-left" /> Return to Cart</a>
-                                <a class="btn btn-primary pull-right mb32 " href="/shop/confirm_order">Confirm <span class="fa fa-long-arrow-right" /></a>
+                                    <span class="fa fa-chevron-left" /> Return to Cart</a>
+                                <a class="btn btn-primary pull-right mb32 " href="/shop/confirm_order">Confirm <span class="fa fa-chevron-right" /></a>
                             </div>
                         </div>
                     </div>
@@ -1116,13 +1111,18 @@
         <t t-call="website.layout">
             <div id="wrap">
                 <div class="container oe_website_sale">
-                    <div class="row">
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
                     <div class='row'>
-                        <t t-call="website_sale.wizard_checkout">
-                            <t t-set="step" t-value="20" />
-                        </t>
+                        <div class="col-md-12">
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="20" />
+                            </t>
+                        </div>
                     </div>
+                    <div class="row">
+                        <div class="col-lg-4 col-lg-push-8 hidden visible-lg">
+                            <t t-call='website_sale.cart_summary' />
+                        </div>
+                        <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
                             <div class="row">
                                 <t t-if="mode == ('new', 'billing')">
                                     <h2 class="page-header mt8 ml16">Your Address
@@ -1217,6 +1217,18 @@
                                         </select>
                                     </div>
 
+                                    <div class="clearfix" />
+                                    <t t-if="mode == ('new', 'billing') and not only_services">
+                                        <div class="col-md-12">
+                                            <div class="well checkbox">
+                                              <label>
+                                                <input type="checkbox" id='shipping_use_same'  name='use_same' value="1" checked='checked'/>Ship to the same address
+                                                <span class='ship_to_other text-muted' style="display: none">&amp;nbsp;(<i>Your shipping address will be requested later) </i></span>
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </t>
+
                                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                     <input type="hidden" name="submitted" value="1" />
                                     <input type="hidden" name="partner_id" t-att-value="partner_id or '0'" />
@@ -1227,10 +1239,10 @@
                                     <div class="clearfix"/>
                                     <div style='padding: 0 15px'>
                                         <a t-att-href="mode == ('new', 'billing') and '/shop/cart' or '/shop/checkout'" class="btn btn-default mb32">
-                                            <span class="fa fa-long-arrow-left" /> Back
+                                            <span class="fa fa-chevron-left" /> Back
                                         </a>
                                         <a class="btn btn-primary pull-right mb32 a-submit a-submit-disable a-submit-loading">
-                                            <span>Next </span><span class="fa fa-long-arrow-right" />
+                                            <span>Next </span><span class="fa fa-chevron-right" />
                                         </a>
                                     </div>
                                 </form>
@@ -1241,6 +1253,8 @@
             </div>
         </t>
     </template>
+
+
     <template id="payment" name="Payment">
         <t t-call="website.layout">
             <t t-set="additional_title">Shop - Select Payment Acquirer</t>
@@ -1249,7 +1263,12 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class="col-md-offset-2 col-lg-8 col-sm-9" t-if="errors">
+                        <div class='col-xs-12'>
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="40" />
+                            </t>
+                        </div>
+                        <div class="col-xs-12" t-if="errors">
                             <t t-foreach="errors" t-as="error">
                                 <div class="alert alert-danger" t-if="error">
                                     <h4>
@@ -1259,71 +1278,42 @@
                                 </div>
                             </t>
                         </div>
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
-                          <div class='row'>
-                            <t t-call="website_sale.wizard_checkout">
-                                <t t-set="step" t-value="40" />
-                            </t>
-                         </div>
+                        <div class="col-lg-4 col-lg-push-8 col-sm-12 col-xs-12">
+                            <t t-call='website_sale.cart_summary' />
+                        </div>
+                        <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
                          <div class="row">
-                            <div class='col-md-12 o_website_sale_rightfit'>
-                                <h2 class="mb8 mt8">Confirm Order</h2>
-                                <table class="table table-striped table-condensed" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
-                                    <thead>
-                                        <tr>
-                                            <th class='td-img'>Product</th>
-                                            <th></th>
-                                            <th class='td-qty'>Quantity</th>
-                                            <th class='text-center td-price'>Price</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr t-foreach="website_sale_order.website_order_line" t-as="line">
-                                            <td class='' colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
-                                            <td class='td-img' t-if="line.product_id.product_tmpl_id">
-                                                <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
-                                                    <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
-                                                </a>
-                                            </td>
-                                            <td class='td-product_name' t-if="line.product_id.product_tmpl_id">
-                                                <div>
-                                                    <strong t-field="line.product_id.with_context(display_default_code=False).display_name" />
-                                                </div>
-                                                <div class="text-muted hidden-xs small">
-                                                    <t t-foreach="line.name.splitlines()[1:]" t-as="name_line">
-                                                        <span><t t-esc="name_line"/></span><br/>
-                                                    </t>
-                                                </div>
-                                            </td>
-                                            <td class='td-qty'>
-                                              <div t-esc="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty" />
-                                            </td>
-                                            <td class="text-center td-price">
-                                                <span t-field="line.price_unit" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                            <div class="col-md-12">
-                                <t t-call="website_sale.total">
-                                    <t t-set='extra_class' t-value='"col-xs-12 col-sm-5 col-sm-push-7"'/>
-                                    <t t-set='redirect'>/shop/payment</t>
-                                </t>
+                            <div class='col-md-12'>
+                                <div class="panel panel-default">
+                                  <div class="panel-headisng"></div>
+                                  <div class="panel-body">
+                                    <a class='pull-right no-decoration' href='/shop/checkout'><i class='fa fa-edit'/> Edit</a>
+                                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
+                                    <div><b>Billing<t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
+                                    <div t-if="not same_shipping and not only_services" groups="sale.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
+                                  </div>
+                                </div>
                             </div>
                             <div class="clearfix" />
                             <div class="oe_structure" />
 
-                            <div id="payment_method" class="col-md-12 o_website_sale_rightfit" t-if="(form_acquirers or s2s_acquirers or tokens) and website_sale_order.amount_total">
+                            <div id="payment_method" class="col-md-12" t-if="(form_acquirers or s2s_acquirers or tokens) and website_sale_order.amount_total">
                                 <h3 class="mb24">Pay with </h3>
                                 <t t-call="payment.payment_tokens_list">
                                     <t t-set="mode" t-value="'payment'"/>
                                     <t t-set="submit_txt">Pay Now</t>
-                                    <t t-set="icon_class" t-value="'fa-lock'"/>
+                                    <t t-set="icon_right" t-value="1"/>
+                                    <t t-set="icon_class" t-value="'fa-chevron-right'"/>
+                                    <t t-set="submit_class" t-value="'btn btn-primary'"/>
                                     <t t-set="pms" t-value="tokens"/>
                                     <t t-set="form_action" t-value="'/shop/payment/token'"/>
                                     <t t-set="prepare_tx_url" t-value="'/shop/payment/transaction/'"/>
                                     <t t-set="partner_id" t-value="partner"/>
+
+                                    <t t-set="back_button_icon_class" t-value="'fa-chevron-left'"/>
+                                    <t t-set="back_button_txt" t-value="'Return to Cart'"/>
+                                    <t t-set="back_button_class" t-value="'btn btn-default'"/>
+                                    <t t-set="back_button_link" t-value="'/shop/cart'"/>
                                 </t>
                             </div>
 
@@ -1339,16 +1329,14 @@
                                     <form target="_self" action="/shop/payment/validate" method="post" class="pull-right">
                                         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                         <a class="btn btn-primary a-submit">
-                                            <span t-if="order.amount_total &gt; 0">Pay Now <span class="fa fa-long-arrow-right"></span></span>
-                                            <span t-if="order.amount_total == 0">Confirm Order <span class="fa fa-long-arrow-right"></span></span>
+                                            <span t-if="order.amount_total &gt; 0">Pay Now <span class="fa fa-chevron-right"></span></span>
+                                            <span t-if="order.amount_total == 0">Confirm Order <span class="fa fa-chevron-right"></span></span>
                                         </a>
                                     </form>
                                 </div>
                             </div>
                           </div>
                         </div>
-
-
                     </div>
                 </div>
                 <div class="oe_structure" />
@@ -1356,11 +1344,79 @@
         </t>
     </template>
 
+
+    <template id="short_cart_summary" name="Short Cart right column">
+        <div class="panel panel-default js_cart_summary" t-if="website_sale_order and website_sale_order.website_order_line" >
+            <div class="panel-body row">
+                <h4 class='col-md-12 hidden visible-lg'>Order Total</h4>
+                <div class='col-md-12'>
+                    <t t-call="website_sale.total">
+                        <t t-set='no_rowspan'>1</t>
+                    </t>
+                    <a t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-default pull-right mb32 mr8 hidden visible-lg" href="/shop/checkout?express=1">
+                        <span>Process Checkout</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <template id="cart_summary" name="Cart right column">
+        <div class="panel panel-default">
+            <div class="panel-body row">
+                <div class='toggle_summary col-md-12 hidden-lg'>
+                    <b>Your order: </b> <span t-field="website_sale_order.amount_total" t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
+                    <span class='fa fa-chevron-down fa-border pull-right'></span>
+                </div>
+
+                <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="well well-lg">
+                  Your cart is empty!
+                </div>
+                <div class='toggle_summary_div hidden visible-lg'>
+                    <table class="table table-striped table-condensed col-md-12" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
+                        <thead>
+                            <tr>
+                                <th class='td-img'>Product</th>
+                                <th></th>
+                                <th class='td-qty'>Quantity</th>
+                                <th class='text-center td-price'>Price</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr t-foreach="website_sale_order.website_order_line" t-as="line">
+                                <td class='' colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
+                                <td class='td-img' t-if="line.product_id.product_tmpl_id">
+                                    <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
+                                </td>
+                                <td class='td-product_name' t-if="line.product_id.product_tmpl_id">
+                                    <div>
+                                        <strong t-field="line.product_id.with_context(display_default_code=False).display_name" />
+                                    </div>
+                           </td>
+                                <td class='td-qty'>
+                                    <div t-esc="line.product_uom_qty" />
+                                </td>
+                                <td class="text-center td-price">
+                                    <span t-field="line.price_reduce_taxexcl" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_subtotal" />
+                                    <span t-field="line.price_reduce_taxinc" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_total" />
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <t t-call="website_sale.total">
+                        <t t-set='redirect'>/shop/payment</t>
+                    </t>
+                </div>
+            </div>
+        </div>
+    </template>
+
     <template id="payment_sale_note" inherit_id="payment" name="Accept Terms &amp; Conditions" customize_show="True" active="False">
-        <xpath expr="//div[@id='payment_method']" position="before">
-            <div class="oe_accept_cgv_button">
+        <xpath expr="//div[@id='payment_method'][hasclass('js_payment')]" position="after">
+            <div class="clearfix"/>
+            <div class="oe_accept_cgv_button col-md-12 text-right oe_accept_cgv_button">
                 <label>
-                    <input type="checkbox" checked="checked" id="checkbox_cgv" />
+                    <input type="checkbox" id="checkbox_cgv"/>
                     I agree to the <a target='_BLANK' href='/shop/terms'>terms &amp; conditions</a>
 
                 </label>
@@ -1374,124 +1430,60 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class="col-md-9">
-                            <h1 class="mb32"><span>Order</span> <em t-field="order.name" /> <t t-if="order.state == 'sale'"><span>Confirmed</span></t></h1>
-                            <div class="thanks_msg">
-                                <h2>Thank you for your order.
-                                    <a class="btn btn-primary pull-right hidden-xs" href="/shop/print" target="_blank"><i class="fa fa-print"></i> Print</a>
-                                </h2>
+                        <div class="col-md-12 col-lg-8">
+                            <div class="oe_cart">
+
+                                <h1 class="mb32"><span>Order</span> <em t-field="order.name" /> <t t-if="order.state == 'sale'"><span>Confirmed</span></t></h1>
+                                <div class="thanks_msg mb32">
+                                    <h2>Thank you for your order.
+                                        <a class="btn btn-primary hidden-xs" href="/shop/print" target="_blank"><i class="fa fa-print"></i> Print</a>
+                                    </h2>
+                                </div>
+                                <t t-if="request.env['ir.config_parameter'].sudo().get_param('auth_signup.invitation_scope', 'b2b') == 'b2c' and request.website.is_public_user()">
+                                    <p class='alert alert-info mt16'>
+                                        <a t-att-href='order.partner_id.signup_prepare() and order.partner_id.signup_url' class='btn btn-sm btn-primary'>Sign Up</a>
+                                         to follow your order.
+                                    </p>
+                                </t>
+                                <div class="clearfix" />
+                                <div class="oe_structure" />
+                                <h3 class="text-left">
+                                    <strong>Payment Information:</strong>
+                                </h3>
+                                <table class="table">
+                                    <tbody>
+                                        <tr>
+                                            <td colspan="2">
+                                                <t t-esc="order.payment_acquirer_id.name" />
+                                            </td>
+                                            <td class="text-right" width="100">
+                                                <strong>Total:</strong>
+                                            </td>
+                                            <td class="text-right" width="100">
+                                                <strong t-field="order.amount_total" t-options="{'widget': 'monetary', 'display_currency': order.pricelist_id.currency_id}" />
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <t t-call="website_sale.payment_confirmation_status" />
+                                <div class="panel panel-default">
+                                  <div class="panel-headisng"></div>
+                                  <div class="panel-body">
+                                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
+                                    <div><b>Billing <t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
+                                    <div t-if="not same_shipping and not only_services" groups="sale.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
+                                  </div>
+                                </div>
+                                <div class="oe_structure" />
                             </div>
                         </div>
+                        <div class="col-lg-4 col-md-12 mt16">
+                            <t t-set='website_sale_order' t-value='order'/>
+                            <t t-call='website_sale.cart_summary'>
+                                <t t-set='hide_coupon'>1</t>
+                            </t>
+                        </div>
                     </div>
-                        <div class="row">
-                            <div class="col-md-9">
-                                <div class="oe_cart">
-                                    <h3 class="mt32 text-left">
-                                        <strong>Order Details:</strong>
-                                    </h3>
-                                    <table class="table table-striped table-condensed">
-                                        <thead>
-                                            <tr>
-                                                <th class='td-product_name'>Product</th>
-                                                <th class='td-qty'>Quantity</th>
-                                                <th class="text-right td-price">Unit Price</th>
-                                                <th class="text-right td-price-total">Subtotal</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                          <tr t-foreach="order.order_line" t-as="line">
-                                              <td class='td-product_name'>
-                                                  <div>
-                                                      <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
-                                                          <strong t-esc="line.product_id.with_context(display_default_code=False).display_name"/>
-                                                      </a>
-                                                  </div>
-                                                  <div class="text-muted hidden-xs small">
-                                                      <t t-foreach="line.name.splitlines()[1:]" t-as="name_line">
-                                                          <span><t t-esc="name_line"/></span><br/>
-                                                      </t>
-                                                  </div>
-                                              </td>
-                                              <td class='td-qty'>
-                                                  <div id="quote_qty">
-                                                      <span t-esc="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty"/>
-                                                      <span class='hidden-xs' t-field="line.product_uom" groups="uom.group_uom"/>
-                                                  </div>
-                                              </td>
-                                              <td class='td-price'>
-                                                  <span class="text-right">
-                                                      <div t-field="line.price_unit"
-                                                          t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
-                                                  </span>
-                                              </td>
-                                              <td class='td-price-total'>
-                                                  <div class="text-right"
-                                                      t-field="line.price_subtotal"
-                                                      t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
-                                              </td>
-                                          </tr>
-                                        </tbody>
-                                    </table>
-                                    <table class='table'>
-                                      <tr>
-                                          <td class="col-md-8"></td>
-                                          <td class="text-right-not-xs text-left-xs col-sm-2 col-xs-3">Subtotal:</td>
-                                          <td class="text-right col-sm-2 col-xs-3">
-                                              <span t-field="order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
-                                          </td>
-                                      </tr>
-                                      <tr>
-                                          <td class='noborder'></td>
-                                          <td class="text-right noborder">Taxes:</td>
-                                          <td class="text-right-not-xs text-left-xs noborder">
-                                               <span t-field="order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': order.pricelist_id.currency_id, 'display_currency': website.currency_id}" />
-                                          </td>
-                                      </tr>
-                                      <tr>
-                                          <td class='noborder'></td>
-                                          <td class="text-right"><strong>Total:</strong></td>
-                                          <td class="text-right-not-xs text-left-xs">
-                                              <strong t-field="order.amount_total"
-                                                  t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
-                                          </td>
-                                      </tr>
-                                    </table>
-                                    <div class="clearfix" />
-                                    <div class="oe_structure" />
-                                    <h3 class="text-left">
-                                        <strong>Payment Information:</strong>
-                                    </h3>
-                                    <table class="table">
-                                        <tbody>
-                                            <tr>
-                                                <td colspan="2">
-                                                    <t t-esc="order.payment_acquirer_id.name" />
-                                                </td>
-                                                <td class="text-right" width="100">
-                                                    <strong>Total:</strong>
-                                                </td>
-                                                <td class="text-right" width="100">
-                                                    <strong t-field="order.amount_total" t-options="{'widget': 'monetary', 'display_currency': order.pricelist_id.currency_id}" />
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                    <t t-call="website_sale.payment_confirmation_status" />
-                                    <t t-if="request.env['ir.config_parameter'].sudo().get_param('auth_signup.invitation_scope', 'b2b') == 'b2c' and request.website.is_public_user()">
-                                        <p class='alert alert-info mt16'>
-                                            <a t-att-href='order.partner_id.signup_prepare() and order.partner_id.signup_url' class='btn btn-primary'>Sign Up</a>
-                                             Now to Follow Your Order
-                                        </p>
-                                    </t>
-                                </div>
-                            </div>
-                            <div class="col-md-3 hidden-sm hidden-xs text-muted">
-                                <h3 class='mt32'>&amp;nbsp;</h3>
-                                <t t-call='website_sale.bill_to'>
-                                    <t t-set="order" t-value= "order"/>
-                                </t>
-                            </div>
-                        </div>
                 </div>
                 <div class="oe_structure" />
             </div>
@@ -1500,39 +1492,55 @@
 
     <template id="total">
         <div id="cart_total" t-att-class="extra_class or ''" t-if="website_sale_order and website_sale_order.website_order_line">
-            <div class="row" id="order_total_untaxed">
-                <span class="col-xs-6 text-right text-muted">Subtotal:</span>
-                <span class="col-xs-6 text-right-not-xs text-left-xs text-muted">
-                    <span t-field="website_sale_order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
-                </span>
-            </div>
-            <div class="row" id="order_total_taxes">
-                <span class="col-xs-6 text-right text-muted" title="Taxes may be updated after providing shipping address"> Taxes:</span>
-                <span class="col-xs-6 text-right-not-xs text-left-xs text-muted">
-                    <span t-field="website_sale_order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" />
-                </span>
-            </div>
-            <div class="row" id="order_total">
-                <hr class="mt8 mb0"/>
-                <span class="col-xs-6 text-right h4 mt0">Total:</span>
-                <span class="col-xs-6 text-right-not-xs text-left-xs h4 mt0" style="white-space: nowrap;">
-                    <span t-field="website_sale_order.amount_total" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
-                </span>
-            </div>
+            <table class='table'>
+                  <tr id="empty">
+                      <t t-if='not no_rowspan'><td rowspan="10"/></t>
+                      <td class="col-sm-2 col-xs-3"></td>
+                      <td class="col-sm-2 col-xs-3" ></td>
+                  </tr>
+                  <tr id="order_total_untaxed">
+                      <td class="text-right noborder">Subtotal:</td>
+                      <td class="text-left-not-lg text-right-lg noborder" >
+                          <span t-field="website_sale_order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
+                      </td>
+                  </tr>
+                  <tr id="order_total_taxes">
+                      <td class="text-right noborder">Taxes:</td>
+                      <td class="text-left-not-lg text-right-lg  noborder">
+                           <span t-field="website_sale_order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" />
+                      </td>
+                  </tr>
+                  <tr id="order_total">
+                      <td class="text-right"><strong>Total:</strong></td>
+                      <td class="text-left-not-lg text-right-lg">
+                          <strong t-field="website_sale_order.amount_total"
+                              t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
+                      </td>
+                  </tr>
+            </table>
         </div>
     </template>
 
-    <template id="reduction_code" inherit_id="website_sale.total" active="False" customize_show="True" name="Promo Code">
-        <xpath expr="//div[@id='cart_total']" position="after">
-            <div class='col-xs-12 col-sm-6 col-sm-pull-5 text-muted' t-if="not hide_coupon and website_sale_order and website_sale_order.website_order_line" id="coupon_box">
-                <p>
-                  Have a promo code? Fill in this field and apply.
-                </p>
-                <t t-call='website_sale.coupon_form'/>
-            </div>
+    <template id="reduction_code" inherit_id="website_sale.total" active="True" customize_show="True" name="Promo Code">
+        <xpath expr="//div[@id='cart_total']//table/tr[last()]" position="after">
+            <tr t-if="not hide_coupon">
+                <td colspan="3" class='noborder text-right-lg text-center'>
+                <span class=''>
+                    <t t-set='force_coupon' t-value="website_sale_order.pricelist_id.code or request.params.get('code_not_available')"/>
+                    <t t-if="not force_coupon">
+                        <a class='show_coupon'>I have a promo code?</a>
+                    </t>
+                    <div t-attf-class='coupon_form #{not force_coupon and "hidden"}'>
+                        <t t-call='website_sale.coupon_form'>
+                        </t>
+                    </div>
+                </span>
+                </td>
+            </tr>
         </xpath>
     </template>
 
+
     <template id="payment_confirmation_status">
         <div class="oe_website_sale_tx_status" t-att-data-order-id="order.id">
             <div t-att-class="'panel %s' % (
@@ -1568,23 +1576,6 @@
         </div>
     </template>
 
-    <template id='website_sale.bill_to' name="Bill to">
-        <div class="panel panel-info break-word">
-          <div class="panel-heading">Bill To:</div>
-          <div class="panel-body">
-            <div t-field="order.partner_invoice_id" t-options="{'widget': 'contact','fields': ['address', 'name', 'phone', 'email']}" />
-          </div>
-        </div>
-        <t t-if="not order.only_services" groups="sale.group_delivery_invoice_address">
-            <div class="panel panel-info break-word">
-              <div class="panel-heading">Ship To:</div>
-              <div class="panel-body">
-                <div t-field="order.partner_shipping_id" t-options="{'widget': 'contact','fields': ['address', 'name', 'phone']}" />
-              </div>
-            </div>
-        </t>
-    </template>
-
     <template id="website.layout_footer_copyright" inherit_id="website.layout" name="Footer Copyright">
         <xpath expr="//footer" position="inside">
             <div class="container mt16 mb8">
diff --git a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
index 3a39f64c27f..2d570094f66 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -2,16 +2,16 @@
 <odoo>
 
     <template id="cart_delivery" name="Delivery Costs" inherit_id="website_sale.total">
-        <xpath expr="//div[@id='order_total_untaxed']" position="before">
-            <div class="row" id="order_delivery" t-if="website_sale_order and website_sale_order.has_delivery">
-                  <span class="col-xs-6 text-right text-muted" title="Delivery will be updated after choosing a new delivery method"> Delivery:</span>
-                  <span class="col-xs-6 text-right-not-xs text-left-xs text-muted">
-                      <span t-field="website_sale_order.amount_delivery" style="white-space: nowrap;" t-options='{
-                              "widget": "monetary",
-                              "display_currency": website_sale_order.currency_id,
-                          }'/>
-                  </span>
-            </div>
+        <xpath expr="//tr[@id='order_total_untaxed']" position="before">
+            <tr id="order_delivery" t-if="website_sale_order and website_sale_order.has_delivery">
+              <td class="text-right noborder text-muted"  title="Delivery will be updated after choosing a new delivery method">Delivery:</td>
+              <td class="text-left-not-lg text-right-lg noborder text-muted" >
+                   <span t-field="website_sale_order.amount_delivery" style="white-space: nowrap;" t-options='{
+                      "widget": "monetary",
+                      "display_currency": website_sale_order.currency_id,
+                  }'/>
+              </td>
+            </tr>
         </xpath>
     </template>
 
@@ -24,7 +24,7 @@
 
     <template id="payment_delivery" name="Delivery Costs" inherit_id="website_sale.payment">
         <xpath expr="//div[@id='payment_method']" position="before">
-            <div t-if="deliveries" class="col-md-12 o_website_sale_rightfit" id="delivery_carrier">
+            <div t-if="deliveries" class="col-md-12" id="delivery_carrier">
                 <h3 class="mb24">Choose a delivery method</h3>
                 <div class="panel panel-default" id="delivery_method">
                     <ul class="list-group">
@@ -50,11 +50,6 @@
                     </t>
                     </ul>
                 </div>
-                <a class="btn-link"
-                        groups="base.group_system"
-                        t-attf-href="/web#return_label=Website&amp;action=#{delivery_action_id}">
-                    <i class="fa fa-arrow-right" aria-hidden="true"></i> Add delivery methods
-                </a>
             </div>
         </xpath>
     </template>
diff --git a/addons/website_sale_stock/views/website_sale_stock_templates.xml b/addons/website_sale_stock/views/website_sale_stock_templates.xml
index 87798d2fe63..87d9dfd2bdd 100644
--- a/addons/website_sale_stock/views/website_sale_stock_templates.xml
+++ b/addons/website_sale_stock/views/website_sale_stock_templates.xml
@@ -39,8 +39,8 @@
     </xpath>
   </template>
 
-  <template id="website_sale_stock_payment" inherit_id="website_sale.payment">
-    <xpath expr="//table[@id='cart_products']//td[hasclass('td-qty')]" position="inside">
+  <template id="website_sale_stock_payment" inherit_id="website_sale.cart_summary">
+     <xpath expr="//table[@id='cart_products']//td[hasclass('td-qty')]" position="inside">
       <t t-if='line._get_stock_warning(clear=False)'>
         <i class='fa fa-warning text-warning' t-att-title="line._get_stock_warning()" />
       </t>
diff --git a/addons/website_sale_stock_options/__manifest__.py b/addons/website_sale_stock_options/__manifest__.py
index 472b4505206..83a83ae163f 100644
--- a/addons/website_sale_stock_options/__manifest__.py
+++ b/addons/website_sale_stock_options/__manifest__.py
@@ -2,7 +2,7 @@
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
 {
-    'name': 'Website Sale Stock&Options',
+    'name': 'Website Sale Stock & Options',
     'category': 'Website',
     'description': """
 Odoo E-Commerce