From df0ca4d4fe36419c34e3efc7bed61bb5a9951097 Mon Sep 17 00:00:00 2001
From: Giovanni Cavallari <giovanni.cavallari@mercadolivre.com>
Date: Mon, 21 Mar 2022 12:01:34 -0300
Subject: [PATCH] feat: cho ticket logo adjustments (#223)

---
 .../web/template/payment/custom_ticket.html   | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/MercadoPago/Core/view/frontend/web/template/payment/custom_ticket.html b/src/MercadoPago/Core/view/frontend/web/template/payment/custom_ticket.html
index d91ea463..d7e112a3 100644
--- a/src/MercadoPago/Core/view/frontend/web/template/payment/custom_ticket.html
+++ b/src/MercadoPago/Core/view/frontend/web/template/payment/custom_ticket.html
@@ -43,32 +43,24 @@
                 <ul id="mercadopago-payment-methods-ticket">
                     <!-- ko foreach: {data: getTicketsData(), as: 'ticket'} -->
                     <!-- ko if: (ticket.payment_places.length === 0) -->
-                    <li style="display:inline-block; width: 40%; vertical-align: top;" class="mercadopago-ticket-option">
-                        <input type="radio" class="optionsTicketMp" name="mercadopago_custom_ticket[payment_method_ticket]" data-bind="'attr':{
-                            value: ticket.id,
-                            id: `mp-ticket-input-${ticket.name.replace(/ /d, '-').replace(/\W/g, '').toLowerCase()}`,
-                            'data-validate': JSON.stringify({ 'validate-one-required-by-name':true })
-                        }" />
-                        <label class="mercadopago-ticket-label" data-bind="attr:{
-                            for:`mp-ticket-input-${ticket.name.replace(/ /d, '-').replace(/\W/g, '').toLowerCase()}`
-                        }">
-                            <img data-bind="'attr':{src: ticket.secure_thumbnail, alt: ticket.name}" />
+                    <li class="mercadopago-ticket-option">
+                        <input type="radio" class="optionsTicketMp" name="mercadopago_custom_ticket[payment_method_ticket]" data-bind="'attr':{ id: ticket.id, value: ticket.id, 'data-validate': JSON.stringify({ 'validate-one-required-by-name':true })}" />
+                        <label class="mercadopago-ticket-label" data-bind="'attr':{ for: ticket.id }">
+                            <div class="mp-payment-method-logo-container">
+                                <img data-bind="'attr':{src: ticket.secure_thumbnail, alt: ticket.name}" class="img-fluid mp-payment-method-logo-image" />
+                            </div>
                             <span class="mercadopago-ticket-label" data-bind="text: ticket.name"></span>
                         </label>
                     </li>
                     <!--/ko-->
                     <!-- ko if: (ticket.payment_places.length > 0) -->
                     <!-- ko foreach: {data: ticket.payment_places, as: 'payment_place'} -->
-                    <li style="display:inline-block;  width: 40%; vertical-align: top;" class="mercadopago-ticket-option">
-                        <input type="radio" class="optionsTicketMp" name="mercadopago_custom_ticket[payment_method_ticket]" data-bind="'attr':{
-                            value: (ticket.id + '|' + payment_place.payment_option_id),
-                            id: `mp-ticket-input-${ticket.name.replace(/ /d, '-').replace(/\W/g, '').toLowerCase()}`,
-                            'data-validate': JSON.stringify({ 'validate-one-required-by-name':true })
-                        }" />
-                        <label class="mercadopago-ticket-label" data-bind="attr:{
-                            for:`mp-ticket-input-${ticket.name.replace(/ /d, '-').replace(/\W/g, '').toLowerCase()}`
-                        }">
-                            <img data-bind="'attr':{src: payment_place.thumbnail, alt: payment_place.name}" />
+                    <li class="mercadopago-ticket-option">
+                        <input type="radio" class="optionsTicketMp" name="mercadopago_custom_ticket[payment_method_ticket]" data-bind="'attr':{ id: (ticket.id + '|' + payment_place.payment_option_id), value: (ticket.id + '|' + payment_place.payment_option_id), 'data-validate': JSON.stringify({ 'validate-one-required-by-name':true })}" />
+                        <label class="mercadopago-ticket-label" data-bind="'attr':{ for: (ticket.id + '|' + payment_place.payment_option_id) }">
+                            <div class="mp-payment-method-logo-container">
+                                <img data-bind="'attr':{src: payment_place.thumbnail, alt: payment_place.name}" class="img-fluid mp-payment-method-logo-image" />
+                            </div>
                             <span class="mercadopago-ticket-label" data-bind="text: payment_place.name"></span>
                         </label>
                     </li>