add "required-entry" attribute in all required inputs for pagseguro p…

…ayment method wrap switchToMethod (One Step Checkout shipment.js) to prevent its call when in a pagseguro payment method
pagseguro · Oct 18, 2017 · 39ce1f5 · 39ce1f5
1 parent 075b799
commit 39ce1f5
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 15 deletions.
diff --git a/UOL_PagSeguro-3.3.0.tgz b/UOL_PagSeguro-3.3.0.tgz
diff --git a/app/design/frontend/base/default/template/uol/pagseguro/form/boleto.phtml b/app/design/frontend/base/default/template/uol/pagseguro/form/boleto.phtml
@@ -46,7 +46,7 @@
         </div>
         <div class="pagseguro-cc-input-div">
             <input 
-                class="pagseguro-cc-input pagseguro-document" 
+                class="pagseguro-cc-input pagseguro-document required-entry" 
                 id="bilitDocument"  
                 onblur="validateDocument(this)" 
                 onkeydown="documentMask(this)"

diff --git a/app/design/frontend/base/default/template/uol/pagseguro/form/creditcard.phtml b/app/design/frontend/base/default/template/uol/pagseguro/form/creditcard.phtml
@@ -51,7 +51,7 @@
             <label class="pagseguro-required" for="creditCardNum">Número do cartão</label>
         </div>
         <div class="pagseguro-cc-input-div">
-            <input class="pagseguro-cc-input" type="text" id="creditCardNum" onkeydown="creditCardMask(this)" onblur="getBrand(this)" maxlength="19">
+            <input class="pagseguro-cc-input required-entry" type="text" id="creditCardNum" onkeydown="creditCardMask(this)" onblur="getBrand(this)" maxlength="19">
             <div class="display-none validation-advice creditCardNum-error-message">Insira um número de cartão válido</div>
         </div>
     </div>
@@ -61,7 +61,7 @@
             <label class="pagseguro-required" for="creditCardHolder">Nome impresso no cartão</label>
         </div>
         <div class="pagseguro-cc-input-div">
-            <input class="pagseguro-cc-input" type="text" name="payment[credit_card_holder]" id="creditCardHolder" required onblur="validateCardHolder(this)" onkeydown="notNumberMask(this)" minlength="3">
+            <input class="pagseguro-cc-input required-entry" type="text" name="payment[credit_card_holder]" id="creditCardHolder" required onblur="validateCardHolder(this)" onkeydown="notNumberMask(this)" minlength="3">
             <div class="display-none validation-advice creditCardHolder-error-message">Insira um nome</div>
         </div>
     </div>
@@ -71,7 +71,7 @@
         <label class="pagseguro-required" for="creditCardExpirationMonth">Validade</label>
         </div>
         <div class="pagseguro-cc-input-div">
-            <select onclick="validateCreditCardMonth(this)" id="creditCardExpirationMonth" title="Cartão válido até" class="pagseguro-cc-select" required>
+            <select onclick="validateCreditCardMonth(this)" id="creditCardExpirationMonth" title="Cartão válido até" class="pagseguro-cc-select required-entry" required>
                 <option value="" disabled selected>Mês</option>
                 <option value="01">01</option>
                 <option value="02">02</option>
@@ -87,7 +87,7 @@
                 <option value="12">12</option>
             </select>
             <div class="display-none validation-advice creditCardExpirationMonth-error-message">Escolha um mês</div>
-            <select onclick="validateCreditCardYear(this)" id="creditCardExpirationYear" title="Cartão válido até" class="pagseguro-cc-select" required>
+            <select onclick="validateCreditCardYear(this)" id="creditCardExpirationYear" title="Cartão válido até" class="pagseguro-cc-select required-entry" required>
                 <option value="" disabled selected>Ano</option>
                 <?php
                 $year = idate("Y");
@@ -105,7 +105,7 @@
             <label class="pagseguro-required" for="creditCardCode">Código de segurança</label>
         </div>
         <div class="pagseguro-cc-input-div">
-            <input class="pagseguro-cc-input form-control code-card-mask" id="creditCardCode" type="text" minlength="3"
+            <input class="pagseguro-cc-input form-control code-card-mask required-entry" id="creditCardCode" type="text" minlength="3"
                    maxlength="4"
                    onkeydown="creditCardCodeMask(this)"
                    onblur="validateCreditCardCode(this, true)" required>
@@ -120,7 +120,7 @@
         <div class="pagseguro-cc-input-div">
             <input
                 id="creditCardDocument"
-                class="pagseguro-cc-input pagseguro-document"
+                class="pagseguro-cc-input pagseguro-document required-entry"
                 onblur="validateDocument(this)"
                 onkeydown="documentMask(this)"
                 type="text"
@@ -138,7 +138,7 @@
         <label class="pagseguro-required" for="creditCardHolderBirthdate">Data de nascimento</label>
         </div>
         <div class="pagseguro-cc-input-div">
-            <input maxlength="10" type="text" name="payment[credit_card_holder_birthdate]" class="form-control date-mask pagseguro-cc-input" id="creditCardHolderBirthdate" required
+            <input maxlength="10" type="text" name="payment[credit_card_holder_birthdate]" class="form-control date-mask pagseguro-cc-input required-entry" id="creditCardHolderBirthdate" required
                    placeholder="dd/mm/aaaa" onblur="validateCreditCardHolderBirthdate(this)" onkeydown="MascaraData(this)">
             <div class="display-none validation-advice creditCardHolderBirthdate-error-message">Insira uma data de nascimento válida</div>
         </div>
@@ -149,7 +149,7 @@
             <label class="pagseguro-required" for="card_installments">Parcelas</label>
         </div>
         <div class="pagseguro-cc-input-div">
-            <select class="pagseguro-cc-select" id="card_installment_option" title="Nº de parcelas" required
+            <select class="pagseguro-cc-select required-entry" id="card_installment_option" title="Nº de parcelas" required
                     disabled onchange="cardInstallmentOnChange(this.value)" onclick="validateCreditCardInstallment(this)">
                 <option value="null" disabled selected>Escolha o N° de parcelas</option>
             </select>

diff --git a/app/design/frontend/base/default/template/uol/pagseguro/form/onlinedebit.phtml b/app/design/frontend/base/default/template/uol/pagseguro/form/onlinedebit.phtml
@@ -50,7 +50,7 @@
         <div class="pagseguro-cc-input-div">
             <input 
                 id="debitDocument"
-                class="input-text pagseguro-document"
+                class="input-text pagseguro-document required-entry"
                 onblur="validateDocument(this)"
                 onkeydown="documentMask(this)"
                 type="text"
@@ -67,7 +67,7 @@
             <div>
                 <div>
                     <label>
-                        <input class="input-radio" type="radio" id="debitbankName" name="debitbankName" value="itau"
+                        <input class="input-radio required-entry" type="radio" id="debitbankName" name="debitbankName" value="itau"
                                required onclick="validateDebitBankName(this)">
                         Itaú
                     </label>
@@ -76,7 +76,7 @@
             <div>
                 <div>
                     <label>
-                        <input class="input-radio" type="radio" id="debitbankName" name="debitbankName" value="bradesco"
+                        <input class="input-radio required-entry" type="radio" id="debitbankName" name="debitbankName" value="bradesco"
                                required onclick="validateDebitBankName(this)">
                         Bradesco
                     </label>
@@ -85,7 +85,7 @@
             <div>
                 <div>
                     <label>
-                        <input class="input-radio" type="radio" id="debitbankName" name="debitbankName" value="banrisul"
+                        <input class="input-radio required-entry" type="radio" id="debitbankName" name="debitbankName" value="banrisul"
                                required onclick="validateDebitBankName(this)">
                         Banrisul
                     </label>
@@ -94,7 +94,7 @@
             <div>
                 <div>
                     <label>
-                        <input class="input-radio" type="radio" id="debitbankName" name="debitbankName"
+                        <input class="input-radio required-entry" type="radio" id="debitbankName" name="debitbankName"
                                value="bancodobrasil" onclick="validateDebitBankName(this)">
                         Banco do Brasil
                     </label>

diff --git a/skin/frontend/base/default/uol/pagseguro/css/direct-payment-onestepcheckout.css b/skin/frontend/base/default/uol/pagseguro/css/direct-payment-onestepcheckout.css
@@ -83,3 +83,11 @@ span > input {
     text-align: right;
     padding-right: 4px;
 }
+
+label.required:after {
+    content: '*';
+    color: #df280a;
+    font-weight: normal;
+    font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
+    font-size: 11px;
+}
diff --git a/skin/frontend/base/default/uol/pagseguro/js/online-debit.js b/skin/frontend/base/default/uol/pagseguro/js/online-debit.js
@@ -1,10 +1,22 @@
 function validateDebitBankName(self) {
-  document.getElementById('onlineDebitBankName').value = self.value;
   if (!self.validity.valid) {
     displayError(self)
     return false
   } else {
     displayError(self, false)
+
+    var radioBankInputs =  document.querySelectorAll('#debitbankName');
+    var i;
+    for (i=0; i < radioBankInputs.length; i++) {
+        if (radioBankInputs[i].checked) {
+          document.getElementById('onlineDebitBankName').value = radioBankInputs[i].value;
+        }
+        // one time selected it will be already select, so they don't need more to be required entry
+        radioBankInputs[i].classList.remove('required-entry');
+        // remove One Step Checkout observer from calling everytime a bank is selected
+        radioBankInputs[i].stopObserving('blur');
+    }
+
     return true
   }
 }

diff --git a/skin/frontend/base/default/uol/pagseguro/js/pagseguro-onestepcheckout-before-save.js b/skin/frontend/base/default/uol/pagseguro/js/pagseguro-onestepcheckout-before-save.js
@@ -1,3 +1,19 @@
+/**
+ * Call events before magento OneSstepChekouPayment switchToMethod event - only call
+ * when the type of payment selected is relative to PagSeguro methods, preventing to
+ * save all the time a PagSeguro Method is selected
+ * @type OnestepcheckoutShipment
+ */
+OnestepcheckoutShipment.prototype.switchToMethod = OnestepcheckoutShipment.prototype.switchToMethod.wrap(
+  function(switchToMethod, methodCode, forced){
+    if (isPagSeguroCurrentPaymentMethod() && forced === true) {
+      return false; //do nothing
+    }
+
+    // normal flow
+    return switchToMethod(methodCode, forced);
+  });
+
 /**
  * Observer for checkout price modifications, like changes in shipment price or taxes
  * to call the installments value with the updated value
@@ -64,4 +80,17 @@ function convertPriceStringToFloat(priceString){
     priceString = parseFloat(priceString);
   }
   return priceString;
+}
+
+/**
+ * Return if is selected an PagSeguro Payment Method as a current payment method
+ * in the checkout payment section
+ * @returns {bolean}
+ */
+function isPagSeguroCurrentPaymentMethod() {
+  currentPaymentMethod = document.querySelector('input[name="payment[method]"]:checked').value;
+  return (currentPaymentMethod === 'pagseguro_credit_card'
+    || currentPaymentMethod === 'pagseguro_boleto'
+    || currentPaymentMethod === 'pagseguro_online_debit'
+    || currentPaymentMethod === 'pagseguro_default_lightbox');
 }