[IMP] website_sale,payment: website_sale,website_sale_delivery: Impro…

…ve UI glitches in checkout process

There were several design and behavioral issues during checkout process of
eCommerece, like few buttons were not properly aligned and while applying
promo code, in several cases it redirected user to another page.

This commit does the following improvements:

Cart Details:
- 'Log In' button on shop/address page is aligned properly
- Header part on shop/address is aligned properly with content
- Delivery method badges are aligned properly
- 'Confirm Order' button shuold allign properly with content on shop/payment page

Cart Summary box on the right side (in large screens):
- All the content including price will fit into the box
- 'Process Checkout' button is properly aligned with content
- 'Apply' button for promo code is properly aligned with content
- Set hand icon on hover of 'I have a promo code' link
- Price is properly aligned with all content
- While applying a promo code, user will now stay on the current page

TaskID : 1850446
Closes : #25200

addons/payment/views/payment_templates.xml

@@ -40,12 +40,12 @@
             <input type="hidden" t-if="error_url" name="error_url" t-att-value="error_url"/>
             <input type="hidden" t-if="callback_method" name="callback_method" t-att-value="callback_method"/>
 
-            <div class="card">
+            <ul class="list-group">
                 <t t-set="acquirers_count" t-value="(len(s2s_acquirers) if s2s_acquirers else 0) + (len(form_acquirers) if form_acquirers else 0)"/>
                 <t t-set="pms_count" t-value="len(pms) if pms else 0"/>
                 <t t-set="MAX_BRAND_LINE" t-value="3"/>
                 <t t-foreach="s2s_acquirers" t-as="acq">
-                    <div class="card-body">
+                    <li class="list-group-item">
                         <label>
                             <t t-if="mode == 'manage'">
                                 <input type="radio" t-att-data-acquirer-id="acq.id"
@@ -80,7 +80,7 @@
                                 <t t-set="i" t-value="i+1"/>
                             </t>
                         </ul>
-                    </div>
+                    </li>
                     <div t-attf-id="o_payment_add_token_acq_{{acq.id}}" t-attf-class="card-footer {{'d-none' if(acquirers_count &gt; 1 and pms_count==0 and s2s_acquirers[0]!=acq) else 'd-none' if pms_count &gt;0 else ''}}">
                         <div class="clearfix">
                             <t t-call="{{acq.sudo().get_s2s_form_xml_id()}}">
@@ -92,14 +92,14 @@
                     </div>
                 </t>
                 <t t-if="mode == 'payment'" t-foreach="form_acquirers" t-as="acq">
-                    <div class="card-body">
-                        <label>
+                    <li class="list-group-item">
                             <input type="radio" t-att-data-acquirer-id="acq.id"
                                 t-att-data-form-payment="true"
                                 t-att-data-provider="acq.provider"
                                 t-att-class="'d-none' if (acquirers_count==1 and pms_count==0) else ''"
                                 t-att-checked="acquirers_count==1 and pms_count==0"
                                 name="pm_id" t-attf-value="form_{{acq.id}}"/>
+                        <label>
                             <span class="payment_icon_name" t-esc="acq.name"/>
                         </label>
                         <ul class="float-right list-inline payment_icon_list">
@@ -117,7 +117,7 @@
                                 <t t-set="i" t-value="i+1"/>
                             </t>
                         </ul>
-                    </div>
+                    </li>
                     <div t-attf-id="o_payment_form_acq_{{acq.id}}" t-attf-class="d-none {{'card-footer' if acq.save_token == 'ask' else ''}}">
                         <label t-if="acq.save_token == 'ask'"><input type="checkbox" name="o_payment_form_save_token" data-remove-me=""/> Save my payment data</label>
                     </div>
@@ -139,7 +139,7 @@
                         </button>
                     </div>
                 </t>
-            </div>
+            </ul>
             <div t-if='back_button_txt' class="float-left mt-2">
                 <a role="button" t-att-href="back_button_link or '#'" t-att-class="back_button_class or 'btn btn-lg btn-secondary'">
                     <i t-if="back_button_icon_class" t-attf-class="fa {{back_button_icon_class}}"/>

addons/website_sale/static/src/scss/website_sale.scss

@@ -45,17 +45,14 @@
 
     .td-qty {
         width: 130px;
-        a.input-group-addon {
-            background-color: transparent;
-            border: 0px;
-        }
     }
     .td-action {
         width: 30px;
     }
 
     .td-price,
-    .td-price-total {
+    .td-price-total,
+    #cart_total tr td:last-child {
         width: 100px;
     }
 
@@ -69,7 +66,8 @@
             width: 60px;
         }
 
-        .td-price {
+        .td-price,
+        #cart_total tr td:last-child {
             width: 80px;
         }
     }

addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss

@@ -29,7 +29,6 @@
             }
             .o_product_circle {
                 vertical-align: 6px;
-                padding: 0 3px;
                 line-height: 14px;
             }
         }

addons/website_sale_comparison/views/website_sale_comparison_template.xml

@@ -95,7 +95,7 @@
 
                                         <form action="/shop/cart/update" method="post" class="text-center">
                                             <input name="product_id" t-att-value="product.id" type="hidden"/>
-                                            <a role="button" class="btn btn-primary btn-block a-submit"><i class="fa fa-shopping-cart"></i>&amp;nbsp;Add to Cart</a>
+                                            <a role="button" class="btn btn-primary btn-block a-submit"><i class="fa fa-shopping-cart"></i><span class="d-none d-md-inline">&amp;nbsp;Add to Cart</span></a>
                                         </form>
                                     </div>
                                 </td>

addons/website_sale_delivery/views/website_sale_delivery_templates.xml

@@ -5,7 +5,7 @@
         <xpath expr="//tr[@id='order_total_untaxed']" position="before">
             <tr id="order_delivery" t-if="website_sale_order and website_sale_order.carrier_id">
               <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" >
+              <td class="text-right 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,
@@ -26,12 +26,12 @@
         <input t-att-value="delivery.id" t-att-id="'delivery_%i' % delivery.id" type="radio" name="delivery_type" t-att-checked="order.carrier_id and order.carrier_id.id == delivery.id and 'checked' or False" t-att-class="'d-none' if delivery_nb == 1 else ''"/>
         <label class="label-optional" t-field="delivery.name" t-att-for="'delivery_%i' % delivery.id"/>
         <t t-if="delivery.delivery_type == 'fixed'">
-            <span t-if="delivery.fixed_price > 0.0" class="badge" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
-            <span t-else="" class="badge">Free</span>
+            <span t-if="delivery.fixed_price > 0.0" class="badge float-right mt-1" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
+            <span t-else="" class="badge float-right mt-1">Free</span>
         </t>
         <t t-else="">
-            <span class="badge d-none" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
-            <span class="badge o_delivery_compute">Select to compute delivery rate</span>
+            <span class="badge d-none float-right mt-1" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
+            <span class="badge o_delivery_compute float-right mt-1">Select to compute delivery rate</span>
         </t>
         <t t-if="delivery.website_description">
             <div t-field="delivery.website_description" class="text-muted mt8"/>
@@ -49,10 +49,10 @@
             </div>
         </xpath>
         <xpath expr="//div[@id='payment_method']" position="before">
-            <div t-if="deliveries" class="col-lg-12" id="delivery_carrier">
+            <div t-if="deliveries" id="delivery_carrier">
                 <t t-set="delivery_nb" t-value="len(deliveries)"/>
                 <h3 t-if="delivery_nb &gt; 1" class="mb24">Choose a delivery method</h3>
-                <div t-if="delivery_nb &gt; 1" class="card" id="delivery_method">
+                <div t-if="delivery_nb &gt; 1" id="delivery_method">
                     <ul class="list-group">
                     <t t-foreach="deliveries" t-as="delivery">
                         <li class="list-group-item">

addons/website_sale_options/views/website_sale_options_templates.xml

@@ -123,7 +123,7 @@
                    }'/>
                   <p class="css_not_available_msg bg-danger" style="padding: 5px;">Product not available</p>
 
-                  <div class='mt8'>
+                  <div>
                     <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product_index}" value="0"/>
                     <a role="button" href="#" class="js_add btn btn-info"><strong>Add<span class='d-none d-md-inline'> to Cart</span></strong></a>
                     <span class="js_remove d-none">

addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss

@@ -12,7 +12,7 @@
 @include media-breakpoint-down(sm) {
     .oe_website_sale {
         .td-wish-btn {
-            width: 100px;
+            width: 65px;
         }
     }
 }

addons/website_sale_wishlist/views/website_sale_wishlist_template.xml

@@ -64,7 +64,7 @@
                                             <small class='d-none d-md-block'><p t-field="wish.product_id.description_sale" class="text-muted"/></small>
                                             <button type="button" class="btn btn-link o_wish_rm no-decoration"><small><i class='fa fa-trash-o'></i> Remove</small></button>
                                         </td>
-                                        <td style='width:80px'>
+                                        <td style='width:120px' class="text-right">
                                             <t t-if='wish.price_new != wish.price'>
                                                 <del class='text-danger'><t t-esc='wish.price' t-options="{'widget': 'monetary', 'display_currency': wish.currency_id}"/></del>
                                                 <br/>
@@ -73,7 +73,7 @@
                                         </td>
                                         <td class='text-center td-wish-btn'>
                                             <input name="product_id" t-att-value="wish.product_id.id" type="hidden"/>
-                                            <button type="button" role="button" class="btn btn-secondary btn-block o_wish_add mb4" >Add <span class='d-none d-md-inline'>to Cart</span></button>
+                                            <button type="button" role="button" class="btn btn-secondary btn-block o_wish_add mb4 px-0" ><i class="fa fa-shopping-cart"></i><span class='d-none d-md-inline'> Add to Cart</span></button>
                                         </td>
                                     </tr>
                                 </t>