[IMP] payment, website_sale_delivery : payment acquirer and delivery method whole part should be clickable and cursor pointer on mouse hover.

Purpose: user click anywhere from panel box to select delivery method and payment method.

Related task ID 1918459

closes odoo/odoo#29604

addons/payment/static/src/js/payment_form.js

@@ -16,7 +16,7 @@ odoo.define('payment.payment_form', function (require) {
             'click #o_payment_form_pay': 'payEvent',
             'click #o_payment_form_add_pm': 'addPmEvent',
             'click button[name="delete_pm"]': 'deletePmEvent',
-            'click input[type="radio"]': 'radioClickEvent',
+            'click .o_payment_acquirer_select': 'radioClickEvent',
             'click .o_payment_form_pay_icon_more': 'onClickMorePaymentIcon',
         },
 
@@ -383,6 +383,7 @@ odoo.define('payment.payment_form', function (require) {
         // event handler when clicking on 'and more' to show more payment icon
         onClickMorePaymentIcon: function (ev) {
             ev.preventDefault();
+            ev.stopPropagation();
             var $listItems = $(ev.currentTarget).parents('ul').children('li');
             var $moreItem = $(ev.currentTarget).parents('li');
             $listItems.removeClass('d-none');
@@ -391,6 +392,8 @@ odoo.define('payment.payment_form', function (require) {
 
         // event handler when clicking on a radio button
         radioClickEvent: function (ev) {
+            // radio button checked when we click on entire zone(body) of the payment acquirer
+            $(ev.currentTarget).find('input[type="radio"]').prop("checked", true);
             this.updateNewPaymentDisplayStatus();
         },
         updateNewPaymentDisplayStatus: function ()

addons/payment/static/src/scss/payment_form.scss

@@ -33,6 +33,9 @@
     .card-body {
         border-top: 1px solid #ddd;
         padding: 1.14em !important;
+        &.o_payment_acquirer_select:hover {
+            cursor: pointer;
+        }
     }
 
     .payment_icon_list {

addons/payment/views/payment_templates.xml

@@ -44,7 +44,7 @@
                 <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="acquirers" t-as="acq">
-                    <div class="card-body">
+                    <div class="card-body o_payment_acquirer_select">
                         <label>
                             <t t-if="acq.payment_flow == 'form'">
                                 <input type="radio" t-att-data-acquirer-id="acq.id"
@@ -103,7 +103,7 @@
                     </t>
                 </t>
                 <t t-foreach="pms" t-as="pm">
-                    <div class="card-body">
+                    <div class="card-body o_payment_acquirer_select">
                         <label>
                             <input t-if="mode == 'payment'" type="radio" name="pm_id" t-att-value="pm.id" t-att-checked="checked_pm_id == pm.id"/>
                             <span class="payment_option_name" t-esc="pm.name"/>

addons/website_sale_delivery/static/src/js/website_sale_delivery.js

@@ -10,7 +10,7 @@ sAnimations.registry.websiteSaleDelivery = sAnimations.Class.extend({
     selector: '.oe_website_sale',
     read_events: {
         'change select[name="shipping_id"]': '_onSetAddress',
-        'click #delivery_carrier input[name="delivery_type"]': '_onCarrierClick',
+        'click #delivery_carrier .o_delivery_carrier_select': '_onCarrierClick',
     },
 
     /**
@@ -82,11 +82,13 @@ sAnimations.registry.websiteSaleDelivery = sAnimations.Class.extend({
      * @param {Event} ev
      */
     _onCarrierClick: function (ev) {
+        var $radio = $(ev.currentTarget).find('input[type="radio"]');
+        $radio.prop("checked", true);
         $('#o_payment_form_pay').prop('disabled', true);
         this._rpc({
             route: '/shop/update_carrier',
             params: {
-                carrier_id: $(ev.currentTarget).val(),
+                carrier_id: $radio.val(),
             },
         }).then(this._handleCarrierUpdateResult.bind(this));
     },

addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss

@@ -5,3 +5,6 @@
         overflow: hidden;
     }
 }
+#delivery_method .o_delivery_carrier_select:hover {
+    cursor: pointer;
+}

addons/website_sale_delivery/views/website_sale_delivery_templates.xml

@@ -24,7 +24,7 @@
 
     <template id="payment_delivery_methods">
         <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"/>
+        <label class="label-optional" t-field="delivery.name"/>
         <t t-set='badge_class' t-value="(delivery_nb != 1 and 'float-right ' or '') + 'badge badge-secondary'" />
         <t t-if="delivery.delivery_type == 'fixed'">
             <span t-if="delivery.fixed_price > 0.0" t-att-class="badge_class" 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}'/>
@@ -56,7 +56,7 @@
                 <div t-if="delivery_nb &gt; 1" class="card border-0" id="delivery_method">
                     <ul class="list-group">
                     <t t-foreach="deliveries" t-as="delivery">
-                        <li class="list-group-item">
+                        <li class="list-group-item o_delivery_carrier_select">
                             <t t-call="website_sale_delivery.payment_delivery_methods"/>
                         </li>
                     </t>