From 8174d46bf0955c44e31a7e2ade3846b86f0e77c4 Mon Sep 17 00:00:00 2001
From: Siddharth Gajjar <sga@odoo.com>
Date: Thu, 14 Sep 2017 18:37:06 +0530
Subject: [PATCH] [IMP] website_sale: checkout layout usablity improvement.

---
 .../static/src/css/website_sale.css           |   6 +-
 addons/website_sale/views/templates.xml       | 206 +++++++++---------
 .../views/website_sale_delivery_templates.xml |   4 +-
 .../static/src/js/website_sale.test.js        |   4 +-
 .../views/website_sale_options_templates.xml  |  10 +-
 5 files changed, 110 insertions(+), 120 deletions(-)

diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index 205be5cc540..486680042c0 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -659,6 +659,8 @@ a.no-decoration {
   box-shadow: 0 0 5px 10px rgba(240, 8, 0, 0.4) !important;
 }
 
-.o_rightfit {
-  padding-right: 0px;
+@media (min-width: 768px) {
+  .o_website_sale_rightfit {
+    padding-right: 0px;
+  }
 }
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 2e92d934509..a7d562188d3 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -722,59 +722,55 @@
                 <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>
-                            <h2 class="mb32 ml16">Extra Step</h2>
-                          </div>
+                            <div class='row'>
+                                <t t-call="website_sale.wizard_checkout">
+                                    <t t-set="step" t-value="30"/>
+                                </t>
+                            </div>
+                            <div class="row">
+                                <div class='col-md-12 o_website_sale_rightfit'>
+                                    <h2 class="mb8 mt8">Extra Step</h2>
+                                    <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">
+                                                <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>
+                                            </div>
+                                            <div class="col-md-7 col-sm-8">
+                                                <textarea class="form-control o_website_form_input" 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">
+                                                <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>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="oe_structure row">
-                    <div class='col-md-6 col-md-offset-3'>
-                        <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">
-                                    <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>
-                                </div>
-                                <div class="col-md-7 col-sm-8">
-                                    <textarea class="form-control o_website_form_input" 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">
-                                    <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>
-                            </div>
-                        </form>
-                    </div>
-                    <!--
-                        <script>
-                            $("input[name='client_order_ref']").val(_.unescape('<t t-esc="escape(website_sale_order.client_order_ref or '') or ''"/>'));
-                        </script>
-                    -->
-                </div>
             </div>
+            <div class="oe_structure row" />
         </t>
     </template>
 
@@ -862,7 +858,7 @@
         </table>
         <div class="js_cart_lines row">
             <t t-call="website_sale.total">
-                <t t-set='extra_class' t-value='"col-md-5 col-md-offset-7 col-xs-8 col-xs-offset-4"'/>
+                <t t-set='extra_class' t-value='"col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8 col-xs-8 col-xs-offset-4"'/>
             </t>
         </div>
     </template>
@@ -872,47 +868,39 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <t t-call="website_sale.wizard_checkout">
-                            <t t-set="step" t-value="10" />
-                        </t>
-                        <h2 class="mb32 ml16">Shopping Cart</h2>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-8 col-sm-9 oe_cart">
-                            <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>
-                                    <p t-if="website_sale_order">Please proceed your current cart.</p>
-                                </t>
-                                <t t-if="access_token">
-                                    <p>This is your current cart.</p>
-                                    <p>
-                                        <strong><a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=squash">Click here</a></strong> if you want to restore your previous cart. Your current cart will be replaced with your previous cart.</p>
-                                    <p>
-                                        <strong><a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=merge">Click here</a></strong> if you want to merge your previous cart into current cart.
-                                    </p>
+                        <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="10" />
                                 </t>
                             </div>
-                            <t t-call="website_sale.cart_lines" />
-                            <div class="clearfix" />
-                            <a t-if="not optional_products and website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32" 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>
-                            <div class="oe_structure" />
-                        </div>
-                        <div class="col-lg-3 col-lg-offset-1 col-sm-3 col-md-3 text-muted" id="right_column">
-                            <h4 class='hidden-xs'>Policies</h4>
-                            <ul class="hidden-xs list-unstyled mb32">
-                                <li>☑ 30-days money-back guarantee</li>
-                                <li>☑ Invoice sent by e-Mail</li>
-                            </ul>
-                            <h4 class='hidden-xs'>Secure Payment</h4>
-                            <ul class="hidden-xs list-unstyled mb32">
-                                <li>☑ 256 bit encryption</li>
-                                <li>☑ Processed by Ogone</li>
-                            </ul>
+                            <div class="row">
+                                <div class="col-md-12 o_website_sale_rightfit">
+                                    <h2 class="mb8 mt8">Shopping Cart</h2>
+                                    <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>
+                                            <p t-if="website_sale_order">Please proceed your current cart.</p>
+                                        </t>
+                                        <t t-if="access_token">
+                                            <p>This is your current cart.</p>
+                                            <p>
+                                                <strong><a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=squash">Click here</a></strong> if you want to restore your previous cart. Your current cart will be replaced with your previous cart.</p>
+                                            <p>
+                                                <strong><a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=merge">Click here</a></strong> if you want to merge your previous cart into current cart.
+                                            </p>
+                                        </t>
+                                    </div>
+                                    <t t-call="website_sale.cart_lines" />
+                                    <div class="clearfix" />
+                                    <a t-if="not optional_products and 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>
+                                    <div class="oe_structure" />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -1042,7 +1030,7 @@
                             </div>
                             <div class="row">
                                 <div class="col-md-12">
-                                    <h3 class="page-header">Billing Address</h3>
+                                    <h2 class="page-header mt8">Billing Address</h2>
                                 </div>
                                 <div class="col-md-6 one_kanban">
                                     <t t-call="website_sale.address_kanban">
@@ -1055,8 +1043,8 @@
                             <t t-if="not only_services" groups="sale.group_delivery_invoice_address">
                                 <div class="row">
                                     <div class="col-md-12">
-                                        <h3 class="page-header mt16">Shipping Address
-                                        </h3>
+                                        <h2 class="page-header mt16 mb4">Shipping Address
+                                        </h2>
                                     </div>
                                 </div>
                                 <div class="row all_shipping">
@@ -1140,16 +1128,16 @@
                     </div>
                             <div class="row">
                                 <t t-if="mode == ('new', 'billing')">
-                                    <h3 class="page-header mt32 ml16">Your Address
+                                    <h2 class="page-header mt8 ml16">Your Address
                                         <small> or </small>
                                         <a href='/web/login?redirect=/shop/checkout' class='btn btn-primary' style="margin-top: -11px">Log In</a>
-                                    </h3>
+                                    </h2>
                                 </t>
                                 <t t-if="mode == ('edit', 'billing')">
-                                    <h3 class="page-header mt32 ml16">Your Address</h3>
+                                    <h2 class="page-header mt8 ml16">Your Address</h2>
                                 </t>
                                 <t t-if="mode[1] == 'shipping'">
-                                    <h3 class="page-header mt32 ml16">Shipping Address </h3>
+                                    <h2 class="page-header mt8 ml16">Shipping Address </h2>
                                 </t>
                                 <t t-if="error" t-foreach="error.get('error_message', [])" t-as="err">
                                     <h4 class="text-danger" t-esc="err" />
@@ -1281,7 +1269,7 @@
                             </t>
                          </div>
                          <div class="row">
-                            <div class='col-md-12 o_rightfit'>
+                            <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>
@@ -1332,13 +1320,13 @@
                                     </t>
                                 </div>
                                 <t t-call="website_sale.total">
-                                    <t t-set='extra_class' t-value='"col-md-5 col-md-offset-7 col-xs-8 col-xs-offset-4"'/>
+                                    <t t-set='extra_class' t-value='"col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8 col-xs-8 col-xs-offset-4"'/>
                                 </t>
                             </div>
                             <div class="clearfix" />
                             <div class="oe_structure" />
 
-                            <div id="payment_method" class="col-md-12 o_rightfit" t-if="(form_acquirers or s2s_acquirers or tokens) and website_sale_order.amount_total">
+                            <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">
                                 <h3 class="mb24">Pay with </h3>
                                 <t t-call="payment.payment_tokens_list">
                                     <t t-set="mode" t-value="'payment'"/>
@@ -1416,7 +1404,7 @@
                                     <table class="table table-striped table-condensed">
                                         <thead>
                                             <tr>
-                                                <th class='td-product_name'>Products</th>
+                                                <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>
@@ -1460,21 +1448,21 @@
                                       <tr>
                                           <td class="col-md-8"></td>
                                           <td class="text-right col-sm-2 col-xs-3">Subtotal:</td>
-                                          <td class="text-right-not-xs text-left-xs col-sm-2 col-xs-3">
+                                          <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">
+                                          <td class="text-right  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">
+                                          <td class="text-right">
                                               <strong t-field="order.amount_total"
                                                   t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
                                           </td>
@@ -1483,7 +1471,7 @@
                                     <div class="clearfix" />
                                     <div class="oe_structure" />
                                     <h3 class="text-left">
-                                        <strong>Payment information:</strong>
+                                        <strong>Payment Information:</strong>
                                     </h3>
                                     <table class="table">
                                         <tbody>
@@ -1526,20 +1514,20 @@
         <div id="cart_total" t-att-class="extra_class or ''" t-if="website_sale_order">
             <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 class="col-xs-6 text-right 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 class="col-xs-6 text-right 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 class="col-xs-6 text-right 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>
@@ -1552,9 +1540,9 @@
                     (order.payment_tx_id.state == 'pending' and 'panel-info') or
                     (order.payment_tx_id.state == 'done' and 'panel-success') or
                     'panel-danger')">
-                <a groups="base.group_system" class="btn btn-primary pull-right" target="_blank"
+                <a groups="base.group_system" class="btn pull-right" target="_blank"
                         t-att-href="'/web#model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % ('payment.acquirer', order.payment_acquirer_id.id, 'payment.action_payment_acquirer')">
-                    <i class="fa fa-cog"></i>
+                    <i class="fa fa-pencil"></i>
                 </a>
                 <div class="panel-heading">
                     <t t-if="order.payment_tx_id.state == 'pending'">
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 3deffac89ff..ee69036e095 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -5,7 +5,7 @@
         <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 class="col-xs-6 text-right 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,
@@ -23,7 +23,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 row o_rightfit" id="delivery_carrier">
+            <div t-if="deliveries" class="col-md-12 row o_website_sale_rightfit" id="delivery_carrier">
                 <div class="col-lg-7 col-sm-8">
                 <h3 title="Delivery price will be updated after choosing a new delivery method">Choose a delivery method</h3>
                 <ul class="list-unstyled">
diff --git a/addons/website_sale_options/static/src/js/website_sale.test.js b/addons/website_sale_options/static/src/js/website_sale.test.js
index fcc8c10ae25..9c3f6f61721 100644
--- a/addons/website_sale_options/static/src/js/website_sale.test.js
+++ b/addons/website_sale_options/static/src/js/website_sale.test.js
@@ -10,7 +10,7 @@ for (var k=0; k<steps.length; k++) {
     if (steps[k].content === "click on add to cart") {
         steps.splice(k+1, 0, {
             content: "click in modal on 'Proceed to checkout' button",
-            trigger: 'a:contains("Proceed to checkout")',
+            trigger: 'a:contains("Proceed to Checkout")',
         });
         break;
     }
@@ -56,7 +56,7 @@ tour.register('shop_customize', {
         {
             content: "click in modal on 'Proceed to checkout' button",
             extra_trigger: 'body:has(.js_product:contains(Warranty) a:contains(Add to Cart):hidden)',
-            trigger: '.modal-dialog a:contains("Proceed to checkout")',
+            trigger: '.modal-dialog a:contains("Proceed to Checkout")',
         },
         {
             content: "check quantity",
diff --git a/addons/website_sale_options/views/website_sale_options_templates.xml b/addons/website_sale_options/views/website_sale_options_templates.xml
index 41823c8e9ac..4f0cc1cf1bc 100644
--- a/addons/website_sale_options/views/website_sale_options_templates.xml
+++ b/addons/website_sale_options/views/website_sale_options_templates.xml
@@ -29,7 +29,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-        <h4 class="modal-title" id="myModalLabel">Add to cart</h4>
+        <h4 class="modal-title" id="myModalLabel">Add to Cart</h4>
       </div>
       <div class="modal-body">
         <table class="table table-striped table-condensed">
@@ -115,14 +115,14 @@
                        "widget": "monetary",
                        "display_currency": website.currency_id
                    }'/>
-                  <p class="css_not_available_msg bg-danger" style="position:absolute; padding: 15px;">Product not available</p>
+                  <p class="css_not_available_msg bg-danger" style="padding: 5px;">Product not available</p>
 
                   <div class='mt8'>
                     <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product_index}" value="0"/>
                     <a href="#" class="js_add btn btn-sm btn-info"><strong>Add<span class='hidden-xs'> to Cart</span></strong></a>
                     <span class="js_remove hidden">
-                      <span class="js_item">1 Item</span><span class="js_items hidden">5 Items</span><br/>
-                      <a href="#" class="js_remove btn btn-sm btn-info"><small>Remove <span class='hidden-xs'> from Cart</span></small></a>
+                      <span class="js_item">1 </span><span class="js_items hidden">5 </span> <span t-field="product.uom_id.name"/><br/>
+                      <a href="#" class="js_remove btn btn-xs btn-info"><small>Remove <span class='hidden-xs'> from Cart</span></small></a>
                     </span>
                   </div>
                 </td>
@@ -133,7 +133,7 @@
         </div>
         <div class="modal-footer">
           <a class="btn btn-default a-submit js_goto_shop"><i class="fa fa-chevron-left"></i> <span class="hidden-xs">Continue Shopping</span><span class="visible-xs-inline">Continue</span></a>
-          <a class="btn btn-primary pull-right a-submit"><i class="fa fa-shopping-cart fa-fw"></i> <span class="hidden-xs">Proceed to checkout</span><span class="visible-xs-inline">Checkout</span></a>
+          <a class="btn btn-primary pull-right a-submit"><i class="fa fa-shopping-cart fa-fw"></i> <span class="hidden-xs">Proceed to Checkout</span><span class="visible-xs-inline">Checkout</span></a>
         </div>
       </div>
     </div>