From a1200bf22e2270c9564d46a87d806455c2f2a0bb Mon Sep 17 00:00:00 2001 From: Mateus Picoloto <38541352+mateus-picoloto@users.noreply.github.com> Date: Fri, 11 Aug 2023 10:44:24 -0300 Subject: [PATCH] feat: compatibilization with bundle js (#217) --- view/frontend/web/js/core/checkout/Bin.js | 113 +- .../web/js/core/checkout/CreditCardToken.js | 68 +- .../web/js/core/checkout/FormObject.js | 448 +++++ .../web/js/core/checkout/Installments.js | 18 - .../core/checkout/PaymentMethodController.js | 1442 ++++++++--------- .../core/checkout/PaymentModuleBootstrap.js | 104 +- .../web/js/core/checkout/PlatformConfig.js | 163 ++ .../js/core/checkout/PlatformFormBiding.js | 597 ------- .../js/core/checkout/PlatformFormHandler.js | 399 +++-- .../js/core/checkout/PlatformPlaceOrder.js | 27 +- .../js/core/models/BoletoCreditcardModel.js | 375 ++--- .../web/js/core/models/BoletoModel.js | 120 +- .../web/js/core/models/CreditCardModel.js | 235 ++- .../frontend/web/js/core/models/DebitModel.js | 235 ++- view/frontend/web/js/core/models/PixModel.js | 118 +- .../web/js/core/models/TwoCreditcardsModel.js | 406 ++--- .../web/js/core/models/VoucherModel.js | 278 ++-- .../js/core/validators/CreditCardValidator.js | 279 ++-- .../js/core/validators/CustomerValidator.js | 52 +- .../js/core/validators/MultibuyerValidator.js | 123 +- .../core/validators/VoucherCardValidator.js | 109 +- view/frontend/web/js/view/payment/boleto.js | 5 +- .../web/js/view/payment/boletocreditcard.js | 2 +- .../web/js/view/payment/creditcard.js | 2 +- view/frontend/web/js/view/payment/debit.js | 2 +- view/frontend/web/js/view/payment/default.js | 21 +- view/frontend/web/js/view/payment/pix.js | 5 +- .../web/js/view/payment/twocreditcards.js | 5 +- view/frontend/web/js/view/payment/voucher.js | 2 +- 29 files changed, 2870 insertions(+), 2883 deletions(-) create mode 100644 view/frontend/web/js/core/checkout/FormObject.js delete mode 100644 view/frontend/web/js/core/checkout/Installments.js create mode 100644 view/frontend/web/js/core/checkout/PlatformConfig.js delete mode 100644 view/frontend/web/js/core/checkout/PlatformFormBiding.js diff --git a/view/frontend/web/js/core/checkout/Bin.js b/view/frontend/web/js/core/checkout/Bin.js index 5a36f257..65925f5b 100644 --- a/view/frontend/web/js/core/checkout/Bin.js +++ b/view/frontend/web/js/core/checkout/Bin.js @@ -1,65 +1,64 @@ -var Bin = function () { - binValue = '', - brand = '', - checkedBins = [0] - selectedBrand = '' -}; +define(['jquery'], ($) => { + return class Bin { + constructor() { + this.binValue = ''; + this.brand = ''; + this.checkedBins = [0]; + this.selectedBrand = ''; + } + init(newValue) { -Bin.prototype.init = function (newValue) { + const formattedNewValue = this.formatNumber(newValue); - var newValue = this.formatNumber(newValue); + if ( + typeof this.checkedBins != 'undefined' && + typeof this.checkedBins[formattedNewValue] != 'undefined' + ){ + this.binValue = formattedNewValue; + this.selectedBrand = this.checkedBins[formattedNewValue]; + return; + } - if ( - typeof this.checkedBins != 'undefined' && - typeof this.checkedBins[newValue] != 'undefined' - ){ - this.binValue = newValue; - this.selectedBrand = this.checkedBins[newValue]; - return; - } + if (this.validate(formattedNewValue)) { + this.binValue = formattedNewValue; + this.getBrand().done(function (data) { + this.saveBinInformation(data); + }.bind(this)); - if (this.validate(newValue)) { - this.binValue = newValue; - this.getBrand().done(function (data) { - this.saveBinInformation(data); - }.bind(this)); + return; + } - return; - } + this.selectedBrand = ''; + } + formatNumber(number) { + const newValue = String(number); + return newValue.slice(0, 6); + } + validate(newValue) { + if (newValue.length == 6 && this.binValue != newValue) { + return true; + } - this.selectedBrand = ''; -}; + return false; + } + getBrand() { + const bin = this.binValue.slice(0, 6); -Bin.prototype.formatNumber = function (number) { - var newValue = String(number); - return newValue.slice(0, 6); -}; + return $.ajax({ + type: 'GET', + dataType: 'json', + url: 'https://api.mundipagg.com/bin/v1/' + bin, + async: false, + cache: true, + }); + } + saveBinInformation(data) { + if (typeof this.checkedBins == 'undefined') { + this.checkedBins = []; + } -Bin.prototype.validate = function (newValue) { - if (newValue.length == 6 && this.binValue != newValue) { - return true; - } - - return false; -}; - -Bin.prototype.getBrand = function () { - var bin = this.binValue.slice(0, 6); - - return jQuery.ajax({ - type: 'GET', - dataType: 'json', - url: 'https://api.mundipagg.com/bin/v1/' + bin, - async: false, - cache: true, - }); -}; - -Bin.prototype.saveBinInformation = function (data) { - if (typeof this.checkedBins == 'undefined') { - this.checkedBins = []; - } - - this.checkedBins[this.binValue] = data.brand; - this.selectedBrand = data.brand; -}; \ No newline at end of file + this.checkedBins[this.binValue] = data.brand; + this.selectedBrand = data.brand; + } + }; +}); diff --git a/view/frontend/web/js/core/checkout/CreditCardToken.js b/view/frontend/web/js/core/checkout/CreditCardToken.js index fa6faed7..9169724b 100644 --- a/view/frontend/web/js/core/checkout/CreditCardToken.js +++ b/view/frontend/web/js/core/checkout/CreditCardToken.js @@ -1,36 +1,38 @@ -var CreditCardToken = function (formObject, documentNumber = null) { - this.documentNumber = documentNumber; - if (documentNumber != null) { - this.documentNumber = documentNumber.replace(/(\.|\/|\-)/g,""); - } - this.formObject = formObject; -}; - -CreditCardToken.prototype.getDataToGenerateToken = function () { - return { - type: "card", - card : { - holder_name: this.formObject.creditCardHolderName.val(), - number: this.formObject.creditCardNumber.val(), - exp_month: this.formObject.creditCardExpMonth.val(), - exp_year: this.formObject.creditCardExpYear.val(), - cvv: this.formObject.creditCardCvv.val(), - holder_document: this.documentNumber +define([], () => { + return class CreditCardToken { + constructor(formObject, documentNumber = null) { + this.documentNumber = documentNumber; + if (documentNumber != null) { + this.documentNumber = documentNumber.replace(/(\.|\/|\-)/g,""); + } + this.formObject = formObject; } - }; -} - -CreditCardToken.prototype.getToken = function (pkKey) { - var data = this.getDataToGenerateToken(); + getDataToGenerateToken() { + return { + type: "card", + card : { + holder_name: this.formObject.creditCardHolderName.val(), + number: this.formObject.creditCardNumber.val(), + exp_month: this.formObject.creditCardExpMonth.val(), + exp_year: this.formObject.creditCardExpYear.val(), + cvv: this.formObject.creditCardCvv.val(), + holder_document: this.documentNumber + } + }; + } + getToken(pkKey) { + const data = this.getDataToGenerateToken(); - const url = 'https://api.mundipagg.com/core/v1/tokens?appId='; + const url = 'https://api.mundipagg.com/core/v1/tokens?appId='; - return jQuery.ajax({ - type: 'POST', - dataType: 'json', - url: url + pkKey, - async: false, - cache: true, - data - }); -} + return jQuery.ajax({ + type: 'POST', + dataType: 'json', + url: url + pkKey, + async: false, + cache: true, + data + }); + } + } +}); diff --git a/view/frontend/web/js/core/checkout/FormObject.js b/view/frontend/web/js/core/checkout/FormObject.js new file mode 100644 index 00000000..4666a514 --- /dev/null +++ b/view/frontend/web/js/core/checkout/FormObject.js @@ -0,0 +1,448 @@ +define(['jquery'], ($) => { + const FormObject = { + FormObject: {} + }; + + FormObject.creditCardInit = (isMultibuyerEnabled) => { + + FormObject.FormObject = {}; + + const containerSelector = '#pagarme_creditcard-form'; + + if (typeof $(containerSelector).html() == 'undefined') { + FormObject.FormObject = null; + return; + } + + const creditCardForm = { + 'containerSelector' : containerSelector, + "creditCardNumber" : $(containerSelector + " .cc_number"), + "creditCardHolderName" : $(containerSelector + " .cc_owner"), + "creditCardExpMonth" : $(containerSelector + " .cc_exp_month"), + "creditCardExpYear" : $(containerSelector + " .cc_exp_year"), + "creditCardCvv" : $(containerSelector + " .cc_cid"), + "creditCardInstallments" : $(containerSelector + " .cc_installments"), + "creditCardBrand" : $(containerSelector + " .cc_type"), + "creditCardToken" : $(containerSelector + " .cc_token"), + "inputAmount" : $(containerSelector + " .cc_amount"), + "inputAmountContainer" : $(containerSelector + " .amount-container"), + "savedCreditCardSelect" : $(containerSelector + " .cc_saved_creditcards"), + "saveThisCard" : $(containerSelector + " .save_this_card") + }; + + let multibuyerForm = undefined; + if (isMultibuyerEnabled) { + multibuyerForm = { + "showMultibuyer" : $(containerSelector + " .show_multibuyer"), + "firstname" : $(containerSelector + " .multibuyer_firstname"), + "lastname" : $(containerSelector + " .multibuyer_lastname"), + "email" : $(containerSelector + " .multibuyer_email"), + "zipcode" : $(containerSelector + " .multibuyer_zipcode"), + "document" : $(containerSelector + " .multibuyer_document"), + "street" : $(containerSelector + " .multibuyer_street"), + "number" : $(containerSelector + " .multibuyer_number"), + "complement" : $(containerSelector + " .multibuyer_complement"), + "neighborhood" : $(containerSelector + " .multibuyer_neighborhood"), + "city" : $(containerSelector + " .multibuyer_city"), + "state" : $(containerSelector + " .multibuyer_state"), + "homePhone" : $(containerSelector + " .multibuyer_home_phone"), + "mobilePhone" : $(containerSelector + " .multibuyer_mobile_phone") + } + } + + FormObject.FormObject = creditCardForm; + FormObject.FormObject.numberOfPaymentForms = 1; + FormObject.FormObject.multibuyer = multibuyerForm; + FormObject.FormObject.savedCardSelectUsed = 'pagarme_creditcard'; + + return FormObject.FormObject; + }; + + FormObject.voucherInit = (isMultibuyerEnabled) => { + + FormObject.FormObject = {}; + + const containerSelector = '#pagarme_voucher-form'; + + if (typeof $(containerSelector).html() == 'undefined') { + FormObject.FormObject = null; + return; + } + + const voucherForm = { + 'containerSelector' : containerSelector, + "creditCardNumber" : $(containerSelector + " .cc_number"), + "creditCardHolderName" : $(containerSelector + " .cc_owner"), + "creditCardExpMonth" : $(containerSelector + " .cc_exp_month"), + "creditCardExpYear" : $(containerSelector + " .cc_exp_year"), + "creditCardCvv" : $(containerSelector + " .cc_cid"), + "creditCardInstallments" : $(containerSelector + " .cc_installments"), + "creditCardBrand" : $(containerSelector + " .cc_type"), + "creditCardToken" : $(containerSelector + " .cc_token"), + "inputAmount" : $(containerSelector + " .cc_amount"), + "savedCreditCardSelect" : $(containerSelector + " .cc_saved_creditcards"), + "saveThisCard" : $(containerSelector + " .save_this_card") + }; + + let multibuyerForm = undefined; + if (isMultibuyerEnabled) { + multibuyerForm = { + "showMultibuyer" : $(containerSelector + " .show_multibuyer"), + "firstname" : $(containerSelector + " .multibuyer_firstname"), + "lastname" : $(containerSelector + " .multibuyer_lastname"), + "email" : $(containerSelector + " .multibuyer_email"), + "zipcode" : $(containerSelector + " .multibuyer_zipcode"), + "document" : $(containerSelector + " .multibuyer_document"), + "street" : $(containerSelector + " .multibuyer_street"), + "number" : $(containerSelector + " .multibuyer_number"), + "complement" : $(containerSelector + " .multibuyer_complement"), + "neighborhood" : $(containerSelector + " .multibuyer_neighborhood"), + "city" : $(containerSelector + " .multibuyer_city"), + "state" : $(containerSelector + " .multibuyer_state"), + "homePhone" : $(containerSelector + " .multibuyer_home_phone"), + "mobilePhone" : $(containerSelector + " .multibuyer_mobile_phone") + } + } + + FormObject.FormObject = voucherForm; + FormObject.FormObject.numberOfPaymentForms = 1; + FormObject.FormObject.multibuyer = multibuyerForm; + FormObject.FormObject.savedCardSelectUsed = 'pagarme_voucher'; + + return FormObject.FormObject; + }; + + FormObject.getMultibuyerForm = (containerSelector) => { + return { + "showMultibuyer" : $(containerSelector + " .show_multibuyer"), + "firstname" : $(containerSelector + " .multibuyer_firstname"), + "lastname" : $(containerSelector + " .multibuyer_lastname"), + "email" : $(containerSelector + " .multibuyer_email"), + "zipcode" : $(containerSelector + " .multibuyer_zipcode"), + "document" : $(containerSelector + " .multibuyer_document"), + "street" : $(containerSelector + " .multibuyer_street"), + "number" : $(containerSelector + " .multibuyer_number"), + "complement" : $(containerSelector + " .multibuyer_complement"), + "neighborhood" : $(containerSelector + " .multibuyer_neighborhood"), + "city" : $(containerSelector + " .multibuyer_city"), + "state" : $(containerSelector + " .multibuyer_state"), + "homePhone" : $(containerSelector + " .multibuyer_home_phone"), + "mobilePhone" : $(containerSelector + " .multibuyer_mobile_phone") + } + }; + + FormObject.debitInit = (isMultibuyerEnabled) => { + + FormObject.FormObject = {}; + + const containerSelector = '#pagarme_debit-form'; + + if (typeof $(containerSelector).html() == 'undefined') { + FormObject.FormObject = null; + return; + } + + const debitForm = { + 'containerSelector' : containerSelector, + "creditCardNumber" : $(containerSelector + " .cc_number"), + "creditCardHolderName" : $(containerSelector + " .cc_owner"), + "creditCardExpMonth" : $(containerSelector + " .cc_exp_month"), + "creditCardExpYear" : $(containerSelector + " .cc_exp_year"), + "creditCardCvv" : $(containerSelector + " .cc_cid"), + "creditCardInstallments" : $(containerSelector + " .cc_installments"), + "creditCardBrand" : $(containerSelector + " .cc_type"), + "creditCardToken" : $(containerSelector + " .cc_token"), + "inputAmount" : $(containerSelector + " .cc_amount"), + "savedCreditCardSelect" : $(containerSelector + " .cc_saved_creditcards"), + "saveThisCard" : $(containerSelector + " .save_this_card") + }; + + let multibuyerForm = undefined; + if (isMultibuyerEnabled) { + multibuyerForm = FormObject.getMultibuyerForm(containerSelector) + } + + FormObject.FormObject = debitForm; + FormObject.FormObject.numberOfPaymentForms = 1; + FormObject.FormObject.multibuyer = multibuyerForm; + FormObject.FormObject.savedCardSelectUsed = 'pagarme_debit'; + + return FormObject.FormObject; + }; + + FormObject.renameTwoCreditCardsElements = (elements, elementId) => { + const twoCreditCardForm = {}; + + for (let key in elements) { + + const name = elements[key].attr('name'); + + if (name === undefined) { + continue; + } + + let newName = name + '[' + elementId + ']'; + + if (name.match(/\[\d\]/g)) { + newName = name; + } + + elements[key].attr('name', newName); + let elementType = 'input'; + + if (elements[key].is('select')) { + elementType = 'select'; + } + + twoCreditCardForm[key] = $( + elementType + + "[name='" + + newName + + "']" + ); + } + + return twoCreditCardForm; + }; + + FormObject.fillTwoCreditCardsElements = (containerSelector, elementId, isMultibuyerEnabled) => { + + if ($(containerSelector).children().length == 0) { + return; + } + + const elements = { + "creditCardNumber" : $(containerSelector + " .cc_number"), + "creditCardHolderName" : $(containerSelector + " .cc_owner"), + "creditCardExpMonth" : $(containerSelector + " .cc_exp_month"), + "creditCardExpYear" : $(containerSelector + " .cc_exp_year"), + "creditCardCvv" : $(containerSelector + " .cc_cid"), + "creditCardInstallments" : $(containerSelector + " .cc_installments"), + "creditCardBrand" : $(containerSelector + " .cc_type"), + "creditCardToken" : $(containerSelector + " .cc_token"), + "inputAmount" : $(containerSelector + " .cc_amount"), + "inputAmountContainer" : $(containerSelector + " .amount-container"), + "savedCreditCardSelect" : $(containerSelector + " .cc_saved_creditcards"), + "saveThisCard" : $(containerSelector + " .save_this_card") + }; + + let multibuyerForm = undefined; + if (isMultibuyerEnabled) { + multibuyerForm = { + "showMultibuyer" : $(containerSelector + " .show_multibuyer"), + "firstname" : $(containerSelector + " .multibuyer_firstname"), + "lastname" : $(containerSelector + " .multibuyer_lastname"), + "email" : $(containerSelector + " .multibuyer_email"), + "zipcode" : $(containerSelector + " .multibuyer_zipcode"), + "document" : $(containerSelector + " .multibuyer_document"), + "street" : $(containerSelector + " .multibuyer_street"), + "number" : $(containerSelector + " .multibuyer_number"), + "complement" : $(containerSelector + " .multibuyer_complement"), + "neighborhood" : $(containerSelector + " .multibuyer_neighborhood"), + "city" : $(containerSelector + " .multibuyer_city"), + "state" : $(containerSelector + " .multibuyer_state"), + "homePhone" : $(containerSelector + " .multibuyer_home_phone"), + "mobilePhone" : $(containerSelector + " .multibuyer_mobile_phone") + } + } + + FormObject.FormObject[elementId] = + FormObject.renameTwoCreditCardsElements( + elements, + elementId + ); + + FormObject.FormObject[elementId].multibuyer = + FormObject.renameTwoCreditCardsElements( + multibuyerForm, + elementId + ); + + FormObject.FormObject[elementId].containerSelector = containerSelector; + FormObject.FormObject[elementId].savedCardSelectUsed = 'pagarme_two_creditcard'; + + return FormObject.FormObject; + }; + + FormObject.twoCreditCardsInit = (isMultibuyerEnabled) => { + + FormObject.FormObject = {}; + + const containerSelector = []; + containerSelector.push("#pagarme_two_creditcard-form #two-credit-cards-form-0"); + containerSelector.push("#pagarme_two_creditcard-form #two-credit-cards-form-1"); + + + if (typeof $(containerSelector[0]).html() == 'undefined') { + FormObject.FormObject = null; + return; + } + + //Using for for IE compatibility + for (let i = 0, len = containerSelector.length; i < len; i++) { + FormObject.fillTwoCreditCardsElements(containerSelector[i], i, isMultibuyerEnabled); + } + + FormObject.FormObject.numberOfPaymentForms = 2; + + return FormObject.FormObject; + }; + + FormObject.pixInit = (isMultibuyerEnabled) => { + + FormObject.FormObject = {}; + + const containerSelector = '#pagarme_pix-form'; + + if (typeof $(containerSelector).html() == 'undefined') { + FormObject.FormObject = null; + return; + } + + const pixElements = { + 'containerSelector' : containerSelector, + "inputAmount" : $(containerSelector + " .cc_amount"), + "inputAmountContainer" : $(containerSelector + " .amount-container") + }; + + let multibuyerForm = undefined; + if (isMultibuyerEnabled) { + multibuyerForm = { + "showMultibuyer": $(containerSelector + " .show_multibuyer"), + "firstname": $(containerSelector + " .multibuyer_firstname"), + "lastname": $(containerSelector + " .multibuyer_lastname"), + "email": $(containerSelector + " .multibuyer_email"), + "zipcode": $(containerSelector + " .multibuyer_zipcode"), + "document": $(containerSelector + " .multibuyer_document"), + "street": $(containerSelector + " .multibuyer_street"), + "number": $(containerSelector + " .multibuyer_number"), + "complement": $(containerSelector + " .multibuyer_complement"), + "neighborhood": $(containerSelector + " .multibuyer_neighborhood"), + "city": $(containerSelector + " .multibuyer_city"), + "state": $(containerSelector + " .multibuyer_state"), + "homePhone": $(containerSelector + " .multibuyer_home_phone"), + "mobilePhone": $(containerSelector + " .multibuyer_mobile_phone") + } + } + + FormObject.FormObject = pixElements; + FormObject.FormObject.numberOfPaymentForms = 1; + FormObject.FormObject.multibuyer = multibuyerForm; + return FormObject.FormObject; + }; + + FormObject.boletoInit = (isMultibuyerEnabled) => { + + FormObject.FormObject = {}; + + const containerSelector = '#pagarme_billet-form'; + + if (typeof $(containerSelector).html() == 'undefined') { + FormObject.FormObject = null; + return; + } + + const boletoElements = { + 'containerSelector' : containerSelector, + "inputAmount" : $(containerSelector + " .cc_amount"), + "inputAmountContainer" : $(containerSelector + " .amount-container") + }; + + let multibuyerForm = undefined; + if (isMultibuyerEnabled) { + multibuyerForm = { + "showMultibuyer": $(containerSelector + " .show_multibuyer"), + "firstname": $(containerSelector + " .multibuyer_firstname"), + "lastname": $(containerSelector + " .multibuyer_lastname"), + "email": $(containerSelector + " .multibuyer_email"), + "zipcode": $(containerSelector + " .multibuyer_zipcode"), + "document": $(containerSelector + " .multibuyer_document"), + "street": $(containerSelector + " .multibuyer_street"), + "number": $(containerSelector + " .multibuyer_number"), + "complement": $(containerSelector + " .multibuyer_complement"), + "neighborhood": $(containerSelector + " .multibuyer_neighborhood"), + "city": $(containerSelector + " .multibuyer_city"), + "state": $(containerSelector + " .multibuyer_state"), + "homePhone": $(containerSelector + " .multibuyer_home_phone"), + "mobilePhone": $(containerSelector + " .multibuyer_mobile_phone") + } + } + + FormObject.FormObject = boletoElements; + FormObject.FormObject.numberOfPaymentForms = 1; + FormObject.FormObject.multibuyer = multibuyerForm; + return FormObject.FormObject; + }; + + FormObject.fillBoletoCreditCardElements = (containerSelector, elementId, isMultibuyerEnabled) => { + if (isMultibuyerEnabled) { + const multibuyerForm = { + "showMultibuyer" : $(containerSelector + " .show_multibuyer"), + "firstname" : $(containerSelector + " .multibuyer_firstname"), + "lastname" : $(containerSelector + " .multibuyer_lastname"), + "email" : $(containerSelector + " .multibuyer_email"), + "zipcode" : $(containerSelector + " .multibuyer_zipcode"), + "document" : $(containerSelector + " .multibuyer_document"), + "street" : $(containerSelector + " .multibuyer_street"), + "number" : $(containerSelector + " .multibuyer_number"), + "complement" : $(containerSelector + " .multibuyer_complement"), + "neighborhood" : $(containerSelector + " .multibuyer_neighborhood"), + "city" : $(containerSelector + " .multibuyer_city"), + "state" : $(containerSelector + " .multibuyer_state"), + "homePhone" : $(containerSelector + " .multibuyer_home_phone"), + "mobilePhone" : $(containerSelector + " .multibuyer_mobile_phone") + } + + FormObject.FormObject[elementId].multibuyer = multibuyerForm; + } + return FormObject.FormObject; + } + + FormObject.boletoCreditCardInit = (isMultibuyerEnabled) => { + const containerBoletoSelector = "#pagarme_billet_creditcard-form #billet-form"; + const containerCreditCardSelector = "#pagarme_billet_creditcard-form #credit-card-form"; + + FormObject.FormObject = {}; + + if (typeof $(containerCreditCardSelector + " .cc_installments").html() == 'undefined') { + FormObject.FormObject = null; + return; + } + + const boletoElements = { + 'containerSelector' : containerBoletoSelector, + "inputAmount" : $(containerBoletoSelector + " .cc_amount"), + "inputAmountContainer" : $(containerBoletoSelector + " .amount-container"), + }; + + const cardsElements = { + 'containerSelector' : containerCreditCardSelector, + "creditCardNumber" : $(containerCreditCardSelector + " .cc_number"), + "creditCardHolderName" : $(containerCreditCardSelector + " .cc_owner"), + "creditCardExpMonth" : $(containerCreditCardSelector + " .cc_exp_month"), + "creditCardExpYear" : $(containerCreditCardSelector + " .cc_exp_year"), + "creditCardCvv" : $(containerCreditCardSelector + " .cc_cid"), + "creditCardInstallments" : $(containerCreditCardSelector + " .cc_installments"), + "creditCardBrand" : $(containerCreditCardSelector + " .cc_type"), + "creditCardToken" : $(containerCreditCardSelector + " .cc_token"), + "inputAmount" : $(containerCreditCardSelector + " .cc_amount"), + "inputAmountContainer" : $(containerCreditCardSelector + " .amount-container"), + "savedCreditCardSelect" : $(containerCreditCardSelector + " .cc_saved_creditcards"), + "saveThisCard" : $(containerCreditCardSelector + " .save_this_card") + }; + + FormObject.FormObject[0] = boletoElements; + FormObject.FormObject[1] = cardsElements; + + for (let i = 0, len = 2; i < len; i++) { + FormObject.fillBoletoCreditCardElements(FormObject.FormObject[i].containerSelector, i, isMultibuyerEnabled); + } + + FormObject.FormObject.numberOfPaymentForms = 2; + FormObject.FormObject[1].savedCardSelectUsed = 'pagarme_billet_creditcard'; + + return FormObject.FormObject; + }; + + return FormObject; +}) diff --git a/view/frontend/web/js/core/checkout/Installments.js b/view/frontend/web/js/core/checkout/Installments.js deleted file mode 100644 index 4743945d..00000000 --- a/view/frontend/web/js/core/checkout/Installments.js +++ /dev/null @@ -1,18 +0,0 @@ -var Installments = function () { -} - -Installments.prototype.init = function () { -}; - -Installments.prototype.addOptions = function (element, installments) { - - if (installments != undefined) { - jQuery(element).find('option').remove(); - - installments.forEach(function (value) { - opt = new Option(value.label, value.id); - jQuery(opt).attr("interest", value.interest); - jQuery(element).append(opt); - }); - } -} diff --git a/view/frontend/web/js/core/checkout/PaymentMethodController.js b/view/frontend/web/js/core/checkout/PaymentMethodController.js index de75cb2d..1b302c7d 100644 --- a/view/frontend/web/js/core/checkout/PaymentMethodController.js +++ b/view/frontend/web/js/core/checkout/PaymentMethodController.js @@ -1,928 +1,920 @@ -var PaymentMethodController = function (methodCode, platformConfig) { - this.methodCode = methodCode; - this.platformConfig = platformConfig; -}; - -PaymentMethodController.prototype.init = function () { - var paymentMethodInit = this.methodCode + 'Init'; - this[paymentMethodInit](); -}; - -PaymentMethodController.prototype.formObject = function (formObject) { - this.formObject = formObject -}; - -PaymentMethodController.prototype.formValidation = function () { - formValidation = this.methodCode + 'Validation'; - - return this[formValidation](); -}; - -PaymentMethodController.prototype.creditcardInit = function () { - this.platformConfig = PlatformConfig.bind(this.platformConfig); - this.formObject = FormObject.creditCardInit(this.platformConfig.isMultibuyerEnabled); - - if (!this.formObject) { - return; - } - - this.model = new CreditCardModel( - this.formObject, - this.platformConfig.publicKey - ); - - this.fillCardAmount(this.formObject, 1); - this.hideCardAmount(this.formObject); - this.fillFormText(this.formObject, 'pagarme_creditcard'); - this.fillSavedCreditCardsSelect(this.formObject); - this.fillBrandList(this.formObject, 'pagarme_creditcard'); - this.fillInstallments(this.formObject); +define([ + 'jquery', + 'Pagarme_Pagarme/js/core/checkout/PlatformConfig', + 'Pagarme_Pagarme/js/core/checkout/FormObject', + 'Pagarme_Pagarme/js/core/checkout/PlatformFormHandler', + 'Pagarme_Pagarme/js/core/checkout/Bin', + 'Pagarme_Pagarme/js/core/models/CreditCardModel', + 'Pagarme_Pagarme/js/core/checkout/CreditCardToken', + 'Pagarme_Pagarme/js/core/models/VoucherModel', + 'Pagarme_Pagarme/js/core/models/DebitModel', + 'Pagarme_Pagarme/js/core/models/TwoCreditcardsModel', + 'Pagarme_Pagarme/js/core/models/PixModel', + 'Pagarme_Pagarme/js/core/models/BoletoModel', + 'Pagarme_Pagarme/js/core/models/BoletoCreditcardModel', + 'Pagarme_Pagarme/js/core/validators/CustomerValidator', +], ( + $, + PlatformConfig, + FormObject, + FormHandler, + Bin, + CreditCardModel, + CreditCardToken, + VoucherModel, + DebitModel, + TwoCreditcardsModel, + PixModel, + BoletoModel, + BoletoCreditcardModel, + CustomerValidator, +) => { + + const fieldError = '.field-error'; + const errorClass = '_error'; + return class PaymentMethodController { + constructor(methodCode, platformConfig) { + this.methodCode = methodCode; + this.platformConfig = platformConfig; + } - if (!this.platformConfig.isMultibuyerEnabled) { - this.removeMultibuyerForm(this.formObject); - } + init() { + const paymentMethodInit = this.methodCode + 'Init'; + this[paymentMethodInit](); + } - if (this.platformConfig.isMultibuyerEnabled) { - this.fillMultibuyerStateSelect(this.formObject); - this.addShowMultibuyerListener(this.formObject); - } + formObject(formObject) { + this.formObject = formObject + } - this.addCreditCardListeners(this.formObject); - this.modelToken = new CreditCardToken(this.formObject); -}; + formValidation() { + const formValidation = this.methodCode + 'Validation'; -PaymentMethodController.prototype.voucherInit = function () { - this.platformConfig = PlatformConfig.bind(this.platformConfig); - this.formObject = FormObject.voucherInit(this.platformConfig.isMultibuyerEnabled); + return this[formValidation](); + } - if (!this.formObject) { - return; - } + creditcardInit() { + this.platformConfig = PlatformConfig.bind(this.platformConfig); + this.formObject = FormObject.creditCardInit(this.platformConfig.isMultibuyerEnabled); - this.model = new VoucherModel( - this.formObject, - this.platformConfig.publicKey - ); - - this.fillCardAmount(this.formObject, 1); - this.hideCardAmount(this.formObject); - this.fillFormText(this.formObject, 'pagarme_voucher'); - this.fillBrandList(this.formObject, "pagarme_voucher"); - this.removeInstallmentsSelect(this.formObject); - this.fillSavedCreditCardsSelect(this.formObject); - this.showCvvCard(this.formObject); - - if (!this.platformConfig.isMultibuyerEnabled) { - this.removeMultibuyerForm(this.formObject); - } + if (!this.formObject) { + return; + } - if (this.platformConfig.isMultibuyerEnabled) { - this.fillMultibuyerStateSelect(this.formObject); - this.addShowMultibuyerListener(this.formObject); - } + this.model = new CreditCardModel( + this.formObject, + this.platformConfig.publicKey + ); - this.addCreditCardListeners(this.formObject); - this.modelToken = new CreditCardToken(this.formObject); -}; + this.fillCardAmount(this.formObject, 1); + this.hideCardAmount(this.formObject); + this.fillFormText(this.formObject, 'pagarme_creditcard'); + this.fillSavedCreditCardsSelect(this.formObject); + this.fillBrandList(this.formObject, 'pagarme_creditcard'); + this.fillInstallments(this.formObject); -PaymentMethodController.prototype.debitInit = function () { - this.platformConfig = PlatformConfig.bind(this.platformConfig); - this.formObject = FormObject.debitInit(this.platformConfig.isMultibuyerEnabled); + if (!this.platformConfig.isMultibuyerEnabled) { + this.removeMultibuyerForm(this.formObject); + } - if (!this.formObject) { - return; - } + if (this.platformConfig.isMultibuyerEnabled) { + this.fillMultibuyerStateSelect(this.formObject); + this.addShowMultibuyerListener(this.formObject); + } - this.model = new DebitModel( - this.formObject, - this.platformConfig.publicKey - ); + this.addCreditCardListeners(this.formObject); + this.modelToken = new CreditCardToken(this.formObject); + } - this.fillCardAmount(this.formObject, 1); - this.hideCardAmount(this.formObject); - this.fillFormText(this.formObject, 'pagarme_debit'); - this.fillBrandList(this.formObject, "pagarme_debit"); - this.removeInstallmentsSelect(this.formObject); - this.fillSavedCreditCardsSelect(this.formObject); + voucherInit() { + this.platformConfig = PlatformConfig.bind(this.platformConfig); + this.formObject = FormObject.voucherInit(this.platformConfig.isMultibuyerEnabled); - if (!this.platformConfig.isMultibuyerEnabled) { - this.removeMultibuyerForm(this.formObject); - } + if (!this.formObject) { + return; + } - if (this.platformConfig.isMultibuyerEnabled) { - this.fillMultibuyerStateSelect(this.formObject); - this.addShowMultibuyerListener(this.formObject); - } + this.model = new VoucherModel( + this.formObject, + this.platformConfig.publicKey + ); - this.addCreditCardListeners(this.formObject); - this.modelToken = new CreditCardToken(this.formObject); -} + this.fillCardAmount(this.formObject, 1); + this.hideCardAmount(this.formObject); + this.fillFormText(this.formObject, 'pagarme_voucher'); + this.fillBrandList(this.formObject, "pagarme_voucher"); + this.removeInstallmentsSelect(this.formObject); + this.fillSavedCreditCardsSelect(this.formObject); + this.showCvvCard(this.formObject); -PaymentMethodController.prototype.twocreditcardsInit = function () { - this.platformConfig = PlatformConfig.bind(this.platformConfig); - this.formObject = FormObject.twoCreditCardsInit(this.platformConfig.isMultibuyerEnabled); + if (!this.platformConfig.isMultibuyerEnabled) { + this.removeMultibuyerForm(this.formObject); + } - if (!this.formObject) { - return; - } - this.model = new TwoCreditcardsModel( - this.formObject, - this.platformConfig.publicKey - ); + if (this.platformConfig.isMultibuyerEnabled) { + this.fillMultibuyerStateSelect(this.formObject); + this.addShowMultibuyerListener(this.formObject); + } - var isTotalOnAmountInputs = this.isTotalOnAmountInputs(this.formObject, this.platformConfig); + this.addCreditCardListeners(this.formObject); + this.modelToken = new CreditCardToken(this.formObject); + } - if (typeof this.formObject[1] !== "undefined") { - for (var i = 0, len = this.formObject.numberOfPaymentForms; i < len; i++) { - this.fillFormText(this.formObject[i], 'pagarme_two_creditcard'); + debitInit() { + this.platformConfig = PlatformConfig.bind(this.platformConfig); + this.formObject = FormObject.debitInit(this.platformConfig.isMultibuyerEnabled); - if (this.formObject[i].inputAmount.val() === "" || !isTotalOnAmountInputs) { - this.fillCardAmount(this.formObject[i], 2, i); + if (!this.formObject) { + return; } - this.fillBrandList(this.formObject[i], 'pagarme_two_creditcard'); - this.fillSavedCreditCardsSelect(this.formObject[i]); - this.fillInstallments(this.formObject[i]); + this.model = new DebitModel( + this.formObject, + this.platformConfig.publicKey + ); + + this.fillCardAmount(this.formObject, 1); + this.hideCardAmount(this.formObject); + this.fillFormText(this.formObject, 'pagarme_debit'); + this.fillBrandList(this.formObject, "pagarme_debit"); + this.removeInstallmentsSelect(this.formObject); + this.fillSavedCreditCardsSelect(this.formObject); if (!this.platformConfig.isMultibuyerEnabled) { - this.removeMultibuyerForm(this.formObject[i]); + this.removeMultibuyerForm(this.formObject); } if (this.platformConfig.isMultibuyerEnabled) { - this.fillMultibuyerStateSelect(this.formObject[i]); - this.addShowMultibuyerListener(this.formObject[i]); + this.fillMultibuyerStateSelect(this.formObject); + this.addShowMultibuyerListener(this.formObject); } - this.addCreditCardListeners(this.formObject[i]); - this.addInputAmountBalanceListener(this.formObject[i], i); - + this.addCreditCardListeners(this.formObject); + this.modelToken = new CreditCardToken(this.formObject); } - } - this.modelToken = new CreditCardToken(this.formObject); -}; + twocreditcardsInit() { + this.platformConfig = PlatformConfig.bind(this.platformConfig); + this.formObject = FormObject.twoCreditCardsInit(this.platformConfig.isMultibuyerEnabled); + if (!this.formObject) { + return; + } + this.model = new TwoCreditcardsModel( + this.formObject, + this.platformConfig.publicKey + ); -PaymentMethodController.prototype.pixInit = function () { - this.platformConfig = PlatformConfig.bind(this.platformConfig); - this.formObject = FormObject.pixInit(this.platformConfig.isMultibuyerEnabled); - - if (!this.formObject) { - return; - } - - this.model = new PixModel(this.formObject); - this.hideCardAmount(this.formObject); + const isTotalOnAmountInputs = this.isTotalOnAmountInputs(this.formObject, this.platformConfig); - if (!this.platformConfig.isMultibuyerEnabled) { - this.removeMultibuyerForm(this.formObject); - } + if (typeof this.formObject[1] !== "undefined") { + for (let i = 0, len = this.formObject.numberOfPaymentForms; i < len; i++) { + this.fillFormText(this.formObject[i], 'pagarme_two_creditcard'); - if (this.platformConfig.isMultibuyerEnabled) { - this.fillMultibuyerStateSelect(this.formObject); - this.addShowMultibuyerListener(this.formObject); - this.addValidatorListener(this.formObject); - } -}; + if (this.formObject[i].inputAmount.val() === "" || !isTotalOnAmountInputs) { + this.fillCardAmount(this.formObject[i], 2, i); + } -PaymentMethodController.prototype.boletoInit = function () { - this.platformConfig = PlatformConfig.bind(this.platformConfig); - this.formObject = FormObject.boletoInit(this.platformConfig.isMultibuyerEnabled); + this.fillBrandList(this.formObject[i], 'pagarme_two_creditcard'); + this.fillSavedCreditCardsSelect(this.formObject[i]); + this.fillInstallments(this.formObject[i]); - if (!this.formObject) { - return; - } + if (!this.platformConfig.isMultibuyerEnabled) { + this.removeMultibuyerForm(this.formObject[i]); + } - this.model = new BoletoModel(this.formObject); - this.hideCardAmount(this.formObject); + if (this.platformConfig.isMultibuyerEnabled) { + this.fillMultibuyerStateSelect(this.formObject[i]); + this.addShowMultibuyerListener(this.formObject[i]); + } - if (!this.platformConfig.isMultibuyerEnabled) { - this.removeMultibuyerForm(this.formObject); - } + this.addCreditCardListeners(this.formObject[i]); + this.addInputAmountBalanceListener(this.formObject[i], i); - if (this.platformConfig.isMultibuyerEnabled) { - this.fillMultibuyerStateSelect(this.formObject); - this.addShowMultibuyerListener(this.formObject); - this.addValidatorListener(this.formObject); - } -}; + } + } -PaymentMethodController.prototype.removeSavedCardsSelect = function (formObject) { - var formHandler = new FormHandler(); - formHandler.init(formObject); - formHandler.removeSavedCardsSelect(formObject); -} + this.modelToken = new CreditCardToken(this.formObject); + } + pixInit() { + this.platformConfig = PlatformConfig.bind(this.platformConfig); + this.formObject = FormObject.pixInit(this.platformConfig.isMultibuyerEnabled); -PaymentMethodController.prototype.boletoCreditcardInit = function () { - this.platformConfig = PlatformConfig.bind(this.platformConfig); - this.formObject = FormObject.boletoCreditCardInit(this.platformConfig.isMultibuyerEnabled); + if (!this.formObject) { + return; + } - if (!this.formObject) { - return; - } + this.model = new PixModel(this.formObject); + this.hideCardAmount(this.formObject); - var isTotalOnAmountInputs = this.isTotalOnAmountInputs(this.formObject, this.platformConfig); + if (!this.platformConfig.isMultibuyerEnabled) { + this.removeMultibuyerForm(this.formObject); + } - if (typeof this.formObject[1] !== "undefined") { + if (this.platformConfig.isMultibuyerEnabled) { + this.fillMultibuyerStateSelect(this.formObject); + this.addShowMultibuyerListener(this.formObject); + this.addValidatorListener(this.formObject); + } + } - for (var i = 0, len = this.formObject.numberOfPaymentForms; i < len; i++) { + boletoInit() { + this.platformConfig = PlatformConfig.bind(this.platformConfig); + this.formObject = FormObject.boletoInit(this.platformConfig.isMultibuyerEnabled); - if (this.formObject[i].inputAmount.val() === "" || !isTotalOnAmountInputs) { - this.fillCardAmount(this.formObject[i], 2, i); + if (!this.formObject) { + return; } + this.model = new BoletoModel(this.formObject); + this.hideCardAmount(this.formObject); + if (!this.platformConfig.isMultibuyerEnabled) { - this.removeMultibuyerForm(this.formObject[i]); + this.removeMultibuyerForm(this.formObject); } if (this.platformConfig.isMultibuyerEnabled) { - this.fillMultibuyerStateSelect(this.formObject[i]); - this.addShowMultibuyerListener(this.formObject[i]); + this.fillMultibuyerStateSelect(this.formObject); + this.addShowMultibuyerListener(this.formObject); + this.addValidatorListener(this.formObject); } - - this.formObject[i].inputAmountContainer.show(); - this.addInputAmountBalanceListener(this.formObject[i], i); } - this.fillBrandList(this.formObject[1], 'pagarme_billet_creditcard'); - this.fillFormText(this.formObject[1], 'pagarme_billet_creditcard'); - this.fillSavedCreditCardsSelect(this.formObject[1]); - this.fillInstallments(this.formObject[1]); - this.addCreditCardListeners(this.formObject[1]); - this.modelToken = new CreditCardToken(this.formObject[1]); - } + removeSavedCardsSelect(formObject) { + const formHandler = new FormHandler(); + formHandler.init(formObject); + formHandler.removeSavedCardsSelect(formObject); + } - this.model = new BoletoCreditcardModel( - this.formObject, - this.platformConfig.publicKey - ); -} + boletoCreditcardInit() { + this.platformConfig = PlatformConfig.bind(this.platformConfig); + this.formObject = FormObject.boletoCreditCardInit(this.platformConfig.isMultibuyerEnabled); -var timesRunObserver = 1; -PaymentMethodController.prototype.addCreditCardListeners = function (formObject) { - if (!formObject) { - return; - } + if (!this.formObject) { + return; + } - this.addValidatorListener(formObject); - this.addCreditCardNumberListener(formObject); - this.addCreditCardInstallmentsListener(formObject); - this.addCreditCardHolderNameListener(formObject); - this.addSavedCreditCardsListener(formObject); - this.removeSavedCards(formObject); + const isTotalOnAmountInputs = this.isTotalOnAmountInputs(this.formObject, this.platformConfig); - if (timesRunObserver <= 1) { - timesRunObserver++; - this.addListenerUpdateAmount(); - } -}; + if (typeof this.formObject[1] !== "undefined") { -PaymentMethodController.prototype.removeSavedCards = function (formObject) { - if (checkoutConfig.payment[formObject.savedCardSelectUsed].enabled_saved_cards) { - return; - } + for (let i = 0, len = this.formObject.numberOfPaymentForms; i < len; i++) { - var selectCard = document.querySelector(formObject.containerSelector) - .querySelector('.saved-card'); + if (this.formObject[i].inputAmount.val() === "" || !isTotalOnAmountInputs) { + this.fillCardAmount(this.formObject[i], 2, i); + } - if (selectCard == null) { - return; - } + if (!this.platformConfig.isMultibuyerEnabled) { + this.removeMultibuyerForm(this.formObject[i]); + } - selectCard.remove(); -}; + if (this.platformConfig.isMultibuyerEnabled) { + this.fillMultibuyerStateSelect(this.formObject[i]); + this.addShowMultibuyerListener(this.formObject[i]); + } -PaymentMethodController.prototype.addListenerUpdateAmount = function () { - var observerMutation = new MutationObserver(function (mutationsList, observer) { + this.formObject[i].inputAmountContainer.show(); + this.addInputAmountBalanceListener(this.formObject[i], i); + } - var paymentMethodName = ['twocreditcards', 'boletoCreditcard', 'voucher']; - setTimeout(function () { - for (var i = 0; i < paymentMethodName.length; i++) { - var initPaymentMethod = new PaymentMethodController(paymentMethodName[i], platFormConfig); - initPaymentMethod.init(); + this.fillBrandList(this.formObject[1], 'pagarme_billet_creditcard'); + this.fillFormText(this.formObject[1], 'pagarme_billet_creditcard'); + this.fillSavedCreditCardsSelect(this.formObject[1]); + this.fillInstallments(this.formObject[1]); + this.addCreditCardListeners(this.formObject[1]); + this.modelToken = new CreditCardToken(this.formObject[1]); } - }, 800); - var initCreditCard = new PaymentMethodController('creditcard', platFormConfig); - initCreditCard.init(); - }); + this.model = new BoletoCreditcardModel( + this.formObject, + this.platformConfig.publicKey + ); + } + + addCreditCardListeners(formObject) { + if (!formObject) { + return; + } - observerMutation.observe( - document.getElementById('opc-sidebar'), - { - attributes: false, - childList: true, - subtree: true + this.addValidatorListener(formObject); + this.addCreditCardNumberListener(formObject); + this.addCreditCardInstallmentsListener(formObject); + this.addCreditCardHolderNameListener(formObject); + this.addSavedCreditCardsListener(formObject); + this.removeSavedCards(formObject); } - ); -} -PaymentMethodController.prototype.addInputAmountBalanceListener = function(formObject, id) { - var paymentMethodController = this; - var id = id; + removeSavedCards(formObject) { + if (checkoutConfig.payment[formObject.savedCardSelectUsed].enabled_saved_cards) { + return; + } - formObject.inputAmount.on('change', function () { - paymentMethodController.fillInstallments(formObject); - var formId = paymentMethodController.model.getFormIdInverted(id); - var form = paymentMethodController.formObject[formId]; - paymentMethodController.fillInstallments(form); + const selectCard = document.querySelector(formObject.containerSelector) + .querySelector('.saved-card'); - setTimeout(function () { - paymentMethodController.updateTotalByPaymentMethod(paymentMethodController, form.creditCardInstallments); - }, 3000); + if (selectCard == null) { + return; + } - }); + selectCard.remove(); + } - formObject.inputAmount.on('keyup', function(){ - element = jQuery(this); + addInputAmountBalanceListener(formObject, id) { + const paymentMethodController = this; - var orginalValue = platFormConfig.updateTotals.getTotals()().grand_total - var orderAmount = (orginalValue).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); - orderAmount = orderAmount.replace(/[^0-9]/g, ''); - orderAmount = Number(orderAmount); + formObject.inputAmount.on('change', function () { + paymentMethodController.fillInstallments(formObject); + const formId = paymentMethodController.model.getFormIdInverted(id); + const form = paymentMethodController.formObject[formId]; + paymentMethodController.fillInstallments(form); - var value = element.val(); - value = value.replace(/[^0-9]/g, ''); - value = Number(value); + setTimeout(function () { + paymentMethodController.updateTotalByPaymentMethod(paymentMethodController, form.creditCardInstallments); + }, 3000); - if (value >= orderAmount) { - value = orderAmount - 1; - } + }); - if (isNaN(value) || value == 0) { - value = 1; - } + formObject.inputAmount.on('keyup', function(){ + const element = $(this); - var remaining = orderAmount - value; + const originalValue = paymentMethodController.platformConfig.updateTotals.getTotals()().grand_total + let orderAmount = (originalValue).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); + orderAmount = orderAmount.replace(/[^0-9]/g, ''); + orderAmount = Number(orderAmount); - remaining = (remaining / 100).toFixed(2); - value = (value / 100).toFixed(2); + let value = element.val(); + value = value.replace(/[^0-9]/g, ''); + value = Number(value); - var formId = paymentMethodController.model.getFormIdInverted(id); - var form = paymentMethodController.formObject[formId]; + if (value >= orderAmount) { + value = orderAmount - 1; + } - form.inputAmount.val(remaining.toString().replace('.', paymentMethodController.platformConfig.currency.decimalSeparator)); - element.val(value.toString().replace('.', paymentMethodController.platformConfig.currency.decimalSeparator)); - }); -} + if (isNaN(value) || value == 0) { + value = 1; + } -PaymentMethodController.prototype.addCreditCardHolderNameListener = function(formObject) { - var paymentMethodController = this; - formObject.creditCardHolderName.on('keyup', function () { - var element = jQuery(this); - paymentMethodController.clearNumbers(element); - }); -} + let remaining = orderAmount - value; -PaymentMethodController.prototype.addValidatorListener = function(formObject) { - const paymentMethodController = this; + remaining = (remaining / 100).toFixed(2); + value = (value / 100).toFixed(2); - jQuery(formObject.containerSelector).on('change', function (event) { - const element = jQuery(event.target); - if ( - element.attr('name').startsWith('payment[cc_type]') - && element.val() !== 'default' - ) { - paymentMethodController.validateBrandField(formObject); - return; - } - if (element.attr('name').startsWith('payment[cc_number]')) { - paymentMethodController.validateCcNumberField(element, formObject); - return; + const formId = paymentMethodController.model.getFormIdInverted(id); + const form = paymentMethodController.formObject[formId]; + + form.inputAmount.val(remaining.toString().replace('.', paymentMethodController.platformConfig.currency.decimalSeparator)); + element.val(value.toString().replace('.', paymentMethodController.platformConfig.currency.decimalSeparator)); + }); } - if ( - element.attr('name').startsWith('payment[cc_exp_month]') - || element.attr('name').startsWith('payment[cc_exp_year]') - ) { - paymentMethodController.validateCcExpDateField(formObject); - return; + + addCreditCardHolderNameListener(formObject) { + const paymentMethodController = this; + formObject.creditCardHolderName.on('keyup', function () { + const element = $(this); + paymentMethodController.clearNumbers(element); + }); } - paymentMethodController.validateDefaultField(element); - }); -}; -PaymentMethodController.prototype.addCreditCardNumberListener = function(formObject) { + addValidatorListener(formObject) { + const paymentMethodController = this; + + $(formObject.containerSelector).on('change', function (event) { + const element = $(event.target); + if ( + element.attr('name').startsWith('payment[cc_type]') + && element.val() !== 'default' + ) { + paymentMethodController.validateBrandField(formObject); + return; + } + if (element.attr('name').startsWith('payment[cc_number]')) { + paymentMethodController.validateCcNumberField(element, formObject); + return; + } + if ( + element.attr('name').startsWith('payment[cc_exp_month]') + || element.attr('name').startsWith('payment[cc_exp_year]') + ) { + paymentMethodController.validateCcExpDateField(formObject); + return; + } + paymentMethodController.validateDefaultField(element); + }); + } + addCreditCardNumberListener(formObject) { - var paymentMethodController = this; + const paymentMethodController = this; - formObject.creditCardNumber.unbind(); - formObject.creditCardNumber.on('keydown', function () { - element = jQuery(this); - paymentMethodController.limitCharacters(element, 19); - }); + formObject.creditCardNumber.unbind(); + formObject.creditCardNumber.on('keydown', function () { + const element = $(this); + paymentMethodController.limitCharacters(element, 19); + }); - var binObj = new Bin(); + const binObj = new Bin(); - formObject.creditCardNumber.on('keyup', function () { - var element = jQuery(this); - paymentMethodController.clearLetters(element); - }); + formObject.creditCardNumber.on('keyup', function () { + const element = $(this); + paymentMethodController.clearLetters(element); + }); - formObject.creditCardNumber.on('change', function () { - var element = jQuery(this); + formObject.creditCardNumber.on('change', function () { + const element = $(this); - setTimeout(function() { - paymentMethodController.setBin(binObj, element, formObject); - }, 300); - }); -}; + setTimeout(function() { + paymentMethodController.setBin(binObj, element, formObject); + }, 300); + }); + } -PaymentMethodController.prototype.twoCardsTotal = function (paymentMethod) { - var card1 = paymentMethod.formObject[0].creditCardInstallments; - var card2 = paymentMethod.formObject[1].creditCardInstallments; + twoCardsTotal(paymentMethod) { + const card1 = paymentMethod.formObject[0].creditCardInstallments; + const card2 = paymentMethod.formObject[1].creditCardInstallments; - var totalCard1 = paymentMethod.formObject[0].inputAmount.val().replace(platformConfig.currency.decimalSeparator, "."); - var totalCard2 = paymentMethod.formObject[1].inputAmount.val().replace(platformConfig.currency.decimalSeparator, "."); + const totalCard1 = paymentMethod.formObject[0].inputAmount.val().replace(this.platformConfig.currency.decimalSeparator, "."); + const totalCard2 = paymentMethod.formObject[1].inputAmount.val().replace(this.platformConfig.currency.decimalSeparator, "."); - var interestTotalCard1 = jQuery(card1).find(":selected").attr("interest"); - var interestTotalCard2 = jQuery(card2).find(":selected").attr("interest"); + const interestTotalCard1 = $(card1).find(":selected").attr("interest"); + const interestTotalCard2 = $(card2).find(":selected").attr("interest"); - var sumTotal = (parseFloat(totalCard1) + parseFloat(totalCard2)); - var sumInterestTotal = (parseFloat(interestTotalCard1) + parseFloat(interestTotalCard2)); + let sumTotal = (parseFloat(totalCard1) + parseFloat(totalCard2)); + let sumInterestTotal = (parseFloat(interestTotalCard1) + parseFloat(interestTotalCard2)); - sumTotal = (sumTotal + sumInterestTotal).toString(); - sumInterestTotal = sumInterestTotal.toString(); + sumTotal = (sumTotal + sumInterestTotal).toString(); + sumInterestTotal = sumInterestTotal.toString(); - return { sumTotal, sumInterestTotal }; -} + return { sumTotal, sumInterestTotal }; + } -PaymentMethodController.prototype.boletoCreditCardTotal = function (paymentMethod) { - var cardElement = paymentMethod.formObject[1].creditCardInstallments; + boletoCreditCardTotal(paymentMethod) { + const cardElement = paymentMethod.formObject[1].creditCardInstallments; - var sumInterestTotal = jQuery(cardElement).find(":selected").attr("interest"); + let sumInterestTotal = $(cardElement).find(":selected").attr("interest"); - var valueCard = paymentMethod.formObject[1].inputAmount.val().replace(platformConfig.currency.decimalSeparator, "."); - var valueBoleto = paymentMethod.formObject[0].inputAmount.val().replace(platformConfig.currency.decimalSeparator, "."); + const valueCard = paymentMethod.formObject[1].inputAmount.val().replace(this.platformConfig.currency.decimalSeparator, "."); + const valueBoleto = paymentMethod.formObject[0].inputAmount.val().replace(this.platformConfig.currency.decimalSeparator, "."); - var sumTotal = (parseFloat(valueCard) + parseFloat(valueBoleto)); + let sumTotal = (parseFloat(valueCard) + parseFloat(valueBoleto)); - sumTotal = (sumTotal + parseFloat(sumInterestTotal)).toString(); - sumInterestTotal = sumInterestTotal.toString(); + sumTotal = (sumTotal + parseFloat(sumInterestTotal)).toString(); + sumInterestTotal = sumInterestTotal.toString(); - return { sumTotal, sumInterestTotal }; -} + return { sumTotal, sumInterestTotal }; + } -PaymentMethodController.prototype.updateTotalByPaymentMethod = function (paymentMethod, event) { - var interest = jQuery(event).find(':selected').attr("interest"); - var grandTotal = jQuery(event).find(':selected').attr("total_with_tax"); + updateTotalByPaymentMethod(paymentMethod, event) { + let interest = $(event).find(':selected').attr("interest"); + let grandTotal = $(event).find(':selected').attr("total_with_tax"); - if (paymentMethod.methodCode === "twocreditcards") { - var twoCardsTotalObject = paymentMethod.twoCardsTotal(paymentMethod); + if (paymentMethod.methodCode === "twocreditcards") { + const twoCardsTotalObject = paymentMethod.twoCardsTotal(paymentMethod); - grandTotal = twoCardsTotalObject.sumTotal; - interest = twoCardsTotalObject.sumInterestTotal; - } + grandTotal = twoCardsTotalObject.sumTotal; + interest = twoCardsTotalObject.sumInterestTotal; + } - if (paymentMethod.methodCode === "boletoCreditcard") { - var boletoCreditCardTotalObject = paymentMethod.boletoCreditCardTotal(paymentMethod); + if (paymentMethod.methodCode === "boletoCreditcard") { + const boletoCreditCardTotalObject = paymentMethod.boletoCreditCardTotal(paymentMethod); - grandTotal = boletoCreditCardTotalObject.sumTotal; - interest = boletoCreditCardTotalObject.sumInterestTotal; - } + grandTotal = boletoCreditCardTotalObject.sumTotal; + interest = boletoCreditCardTotalObject.sumInterestTotal; + } - paymentMethod.updateTotal( - interest, - grandTotal, - jQuery(event).attr('name') - ); -} + paymentMethod.updateTotal( + interest, + grandTotal, + $(event).attr('name') + ); + } -PaymentMethodController.prototype.addCreditCardInstallmentsListener = function (formObject) { - var paymentMethodController = this; + addCreditCardInstallmentsListener(formObject) { + const paymentMethodController = this; - formObject.creditCardInstallments.on('change', function () { - var value = jQuery(this).val(); + formObject.creditCardInstallments.on('change', function () { + const value = $(this).val(); - if (value != "" && value != 'undefined') { - paymentMethodController.updateTotalByPaymentMethod(paymentMethodController, this); + if (value != "" && value != 'undefined') { + paymentMethodController.updateTotalByPaymentMethod(paymentMethodController, this); + } + }); } - }); -}; -PaymentMethodController.prototype.addSavedCreditCardsListener = function(formObject) { + addSavedCreditCardsListener(formObject) { - var paymentMethodController = this; - var brand = jQuery('option:selected').attr('brand'); + const paymentMethodController = this; + let brand = $('option:selected').attr('brand'); - if (brand == undefined) { - brand = formObject.creditCardBrand.val(); - } + if (brand == undefined) { + brand = formObject.creditCardBrand.val(); + } - var formObject = formObject; - formObject.creditCardBrand.val(brand); - formObject.savedCreditCardSelect.on('change', function() { - var value = jQuery(this).val(); - var brand = jQuery('option:selected').attr('brand'); + formObject.creditCardBrand.val(brand); - formObject.creditCardBrand.val(brand); - if (value === 'new') { - jQuery(formObject.containerSelector + ' .new').show(); + formObject.savedCreditCardSelect.on('change', function() { + const value = $(this).val(); + const brand = $('option:selected').attr('brand'); - if ( - typeof formObject.multibuyer != 'undefined' && - typeof formObject.multibuyer.showMultibuyer != 'undefined' - ) { - formObject.multibuyer.showMultibuyer.parent().show(); - } - return; - } + formObject.creditCardBrand.val(brand); + if (value === 'new') { + $(formObject.containerSelector + ' .new').show(); - paymentMethodController.fillInstallments(formObject); - jQuery(formObject.containerSelector + ' .new').hide(); + if ( + typeof formObject.multibuyer != 'undefined' && + typeof formObject.multibuyer.showMultibuyer != 'undefined' + ) { + formObject.multibuyer.showMultibuyer.parent().show(); + } + return; + } - if ( - typeof formObject.multibuyer != 'undefined' && - typeof formObject.multibuyer.showMultibuyer != 'undefined' - ) { - formObject.multibuyer.showMultibuyer.parent().hide(); - } + paymentMethodController.fillInstallments(formObject); + $(formObject.containerSelector + ' .new').hide(); - if (formObject.containerSelector == "#pagarme_voucher-form") { - paymentMethodController.showCvvCard(formObject); + if ( + typeof formObject.multibuyer != 'undefined' && + typeof formObject.multibuyer.showMultibuyer != 'undefined' + ) { + formObject.multibuyer.showMultibuyer.parent().hide(); + } + + if (formObject.containerSelector == "#pagarme_voucher-form") { + paymentMethodController.showCvvCard(formObject); + } + }); } - }); -}; -PaymentMethodController.prototype.placeOrder = function (placeOrderObject) { - var customerValidator = new CustomerValidator( - this.platformConfig.addresses.billingAddress - ); - customerValidator.validate(); - var errors = customerValidator.getErrors(); + placeOrder(placeOrderObject) { + const customerValidator = new CustomerValidator( + this.platformConfig.addresses.billingAddress + ); + customerValidator.validate(); + const errors = customerValidator.getErrors(); + + if (errors.length > 0) { + for (let id in errors) { + this.model.addErrors(errors[id]); + } + return; + } - if (errors.length > 0) { - for (id in errors) { - this.model.addErrors(errors[id]); - } - return; - } + const isPublicKeyValid = this.validatePublicKey( + this.platformConfig.publicKey + ); - var isPublickKeyValid = this.validatePublicKey( - this.platformConfig.publicKey - ); + if (!isPublicKeyValid) { + return; + } - if (!isPublickKeyValid) { - return; - } + this.model.placeOrder(placeOrderObject); + } - this.model.placeOrder(placeOrderObject); -}; + updateTotal(interest, grandTotal, selectName) { + const paymentMethodController = this; -PaymentMethodController.prototype.updateTotal = function(interest, grandTotal, selectName) { - var paymentMethodController = this; + /**@fixme Move gettotals() to PlatformFormBiding */ + const total = paymentMethodController.platformConfig.updateTotals.getTotals()(); + interest = (parseInt((interest * 100).toFixed(2))) / 100; - /**@fixme Move gettotals() to PlatformFormBiding */ - var total = paymentMethodController.platformConfig.updateTotals.getTotals()(); - interest = (parseInt((interest * 100).toFixed(2))) / 100; + if (interest < 0) { + interest = 0; + } - if (interest < 0) { - interest = 0; - } + total.tax_amount = interest; + total.base_tax_amount = interest; - total.tax_amount = interest; - total.base_tax_amount = interest; + for (let i = 0, len = total.total_segments.length; i < len; i++) { + if (total.total_segments[i].code === "grand_total") { + grandTotal = parseInt((grandTotal * 100).toFixed(2)); + total.total_segments[i].value = grandTotal / 100; + continue; + } + if (total.total_segments[i].code === "tax") { - for (var i = 0, len = total.total_segments.length; i < len; i++) { - if (total.total_segments[i].code === "grand_total") { - grandTotal = parseInt((grandTotal * 100).toFixed(2)); - total.total_segments[i].value = grandTotal / 100; - continue; - } - if (total.total_segments[i].code === "tax") { + total.total_segments[i].value = interest; + } + } - total.total_segments[i].value = interest; + paymentMethodController.platformConfig.updateTotals.setTotals(total); } - } - paymentMethodController.platformConfig.updateTotals.setTotals(total); -}; + sumInterests(interest, selectName) { + const paymentMethodController = this; + + const formObject = paymentMethodController.formObject; -PaymentMethodController.prototype.sumInterests = function(interest, selectName) { - var interest = interest; - var paymentMethodController = this; + for (let id in formObject) { - var formObject = paymentMethodController.formObject; + if (id.length > 1 || formObject[id].creditCardInstallments == undefined) { + continue; + } - for (id in formObject) { + const name = formObject[id].creditCardInstallments.attr('name'); + if (name == selectName) { + continue; + } + + const otherInterest = formObject[id].creditCardInstallments.find(':selected').attr('interest'); + if (isNaN(otherInterest)) { + continue; + } + + interest = parseFloat(otherInterest) + parseFloat(interest); + } - if (id.length > 1 || formObject[id].creditCardInstallments == undefined) { - continue; + return interest; } - var name = formObject[id].creditCardInstallments.attr('name'); - if (name == selectName) { - continue; + removeInstallmentsSelect(formObject) { + const formHandler = new FormHandler(); + formHandler.init(formObject); + formHandler.removeInstallmentsSelect(formObject); } - var otherInterest = formObject[id].creditCardInstallments.find(':selected').attr('interest'); - if (isNaN(otherInterest)) { - continue; + showCvvCard(formObject) { + const cvvElement = document.querySelector(formObject.containerSelector + " .cvv"); + + if (cvvElement != undefined) { + cvvElement.style.display = ""; + } } - interest = parseFloat(otherInterest) + parseFloat(interest); - } + fillInstallments(form) { + const _self = this; - return interest; -} + if (form.creditCardBrand == undefined) { + return; + } -PaymentMethodController.prototype.removeInstallmentsSelect = function (formObject) { - var formHandler = new FormHandler(); - formHandler.init(formObject); - formHandler.removeInstallmentsSelect(formObject); -} + const installmentSelected = form.creditCardInstallments.val(); -PaymentMethodController.prototype.showCvvCard = function (formObject) { - var cvvElement = document.querySelector(formObject.containerSelector + " .cvv"); + let formHandler = new FormHandler(); - if (cvvElement != undefined) { - cvvElement.style.display = ""; - } -} + let selectedBrand = form.creditCardBrand.val(); -PaymentMethodController.prototype.fillInstallments = function (form) { - var _self = this; + let amount = form.inputAmount.val(); + if (typeof selectedBrand == "undefined") { + selectedBrand = 'default'; + } - if (form.creditCardBrand == undefined) { - return; - } + if (typeof amount == "undefined") { + amount = 0; + } - var installmentSelected = form.creditCardInstallments.val(); + const installmentsUrl = + this.platformConfig.urls.installments + '/' + + selectedBrand + '/' + + amount; - formHandler = new FormHandler(); + $.ajax({ + url: installmentsUrl, + method: 'GET', + cache: true, + }).done(function(data) { + formHandler = new FormHandler(); - var selectedBrand = form.creditCardBrand.val(); + if (!data.length) return; - var amount = form.inputAmount.val(); - if (typeof selectedBrand == "undefined") { - selectedBrand = 'default'; - } + form.creditCardInstallments.prop('disabled', true); + formHandler.updateInstallmentSelect(data, form.creditCardInstallments, installmentSelected); + form.creditCardInstallments.prop('disabled', false); - if (typeof amount == "undefined") { - amount = 0; - } + formHandler.init(form); + formHandler.switchBrand(selectedBrand); + }); + } + fillBrandList(formObject, method) { + if (method == undefined) { + method = 'pagarme_creditcard'; + } + const formHandler = new FormHandler(); + formHandler.fillBrandList( + this.platformConfig.avaliableBrands[method], + formObject + ); + } - var installmentsUrl = - this.platformConfig.urls.installments + '/' + - selectedBrand + '/' + - amount; + fillCardAmount(formObject, count, card = null) { + const orderAmount = this.platformConfig.updateTotals.getTotals()().grand_total / count; - jQuery.ajax({ - url: installmentsUrl, - method: 'GET', - cache: true, - }).done(function(data) { - formHandler = new FormHandler(); + let amount = orderAmount.toFixed(this.platformConfig.currency.precision); + const separator = "."; - if (!data.length) return; + amount = amount.replace(separator, this.platformConfig.currency.decimalSeparator); - form.creditCardInstallments.prop('disabled', true); - formHandler.updateInstallmentSelect(data, form.creditCardInstallments, installmentSelected); - form.creditCardInstallments.prop('disabled', false); + if (card === 1) { + const orderAmountOriginal = amount.replace(this.platformConfig.currency.decimalSeparator, "."); + const amountBalance = (this.platformConfig.updateTotals.getTotals()().grand_total - orderAmountOriginal).toFixed(2); + formObject.inputAmount.val(amountBalance.replace(".", this.platformConfig.currency.decimalSeparator)); + return; + } - formHandler.init(form); - formHandler.switchBrand(selectedBrand); - }); -}; + formObject.inputAmount.val(amount); + } + validateCcNumberField(element, formObject) { + if (element.val() === '') { + formObject.creditCardBrand.val(''); -PaymentMethodController.prototype.fillBrandList = function (formObject, method) { - if (method == undefined) { - method = 'pagarme_creditcard'; - } - var formHandler = new FormHandler(); - formHandler.fillBrandList( - this.platformConfig.avaliableBrands[method], - formObject - ); -}; - -PaymentMethodController.prototype.fillCardAmount = function (formObject, count, card = null) { - var orderAmount = platFormConfig.updateTotals.getTotals()().grand_total / count; - - var amount = orderAmount.toFixed(this.platformConfig.currency.precision); - var separator = "."; - - amount = amount.replace(separator, this.platformConfig.currency.decimalSeparator); - - if (card === 1) { - var orderAmountOriginal = amount.replace(this.platformConfig.currency.decimalSeparator, "."); - var amountBalance = (platFormConfig.updateTotals.getTotals()().grand_total - orderAmountOriginal).toFixed(2); - formObject.inputAmount.val(amountBalance.replace(".", this.platformConfig.currency.decimalSeparator)); - return; - } + const formHandler = new FormHandler(); + formHandler.init(formObject); + formHandler.switchBrand(''); + } + this.validateDefaultField(element); + this.validateBrandField(formObject); + } + validateCcExpDateField(formObject) { + const cardExpirationMonth = formObject.creditCardExpMonth; + const cardExpirationYear = formObject.creditCardExpYear; + + const cardDate = new Date(cardExpirationYear.val(), cardExpirationMonth.val() -1); + const dateNow = new Date(); + + const monthParentsElements = cardExpirationMonth.parent().parent(); + const yearParentsElements = cardExpirationYear.parent().parent(); + const parentsElements = yearParentsElements.parents('.field'); + const parentsElementsError = parentsElements.find(fieldError); + + if (cardDate < dateNow) { + monthParentsElements.addClass(errorClass); + yearParentsElements.addClass(errorClass); + parentsElementsError.show(); + return true; + } - formObject.inputAmount.val(amount); -}; + monthParentsElements.removeClass(errorClass); + yearParentsElements.removeClass(errorClass); + parentsElementsError.hide(); + return false; + } + validateDefaultField(element) { + const requiredElement = element.parent().parent(); + const requiredElementError = requiredElement.children(fieldError); + + if (element.val() === '') { + requiredElement.addClass(errorClass); + requiredElementError.show(); + return true; + } -PaymentMethodController.prototype.validateCcNumberField = function (element, formObject) { - if (element.val() === '') { - formObject.creditCardBrand.val(''); + requiredElement.removeClass(errorClass); + requiredElementError.hide(); + return false; + } + validateBrandField(formObject) { + const element = formObject.creditCardBrand; + const requiredElement = element.parent().parent(); + const requiredElementError = requiredElement.find(fieldError); - formHandler = new FormHandler(); - formHandler.init(formObject); - formHandler.switchBrand(''); - } - this.validateDefaultField(element); - this.validateBrandField(formObject); -}; - -const fieldError = '.field-error'; -const errorClass = '_error'; - -PaymentMethodController.prototype.validateCcExpDateField = function (formObject) { - const cardExpirationMonth = formObject.creditCardExpMonth; - const cardExpirationYear = formObject.creditCardExpYear; - - const cardDate = new Date (cardExpirationYear.val(), cardExpirationMonth.val() -1); - const dateNow = new Date(); - - const monthParentsElements = cardExpirationMonth.parent().parent(); - const yearParentsElements = cardExpirationYear.parent().parent(); - const parentsElements = yearParentsElements.parents('.field'); - const parentsElementsError = parentsElements.find(fieldError); - - if (cardDate < dateNow) { - monthParentsElements.addClass(errorClass); - yearParentsElements.addClass(errorClass); - parentsElementsError.show(); - return true; - } + const brands = []; + PlatformConfig.PlatformConfig.avaliableBrands[formObject.savedCardSelectUsed].forEach(function (item) { + brands.push(item.title.toUpperCase()); + }); - monthParentsElements.removeClass(errorClass); - yearParentsElements.removeClass(errorClass); - parentsElementsError.hide(); - return false; -}; + if ( + !brands.includes(element.val().toUpperCase()) + || element.val === '' + ) { + requiredElement.addClass(errorClass); + requiredElementError.show(); + requiredElement.find('.nobrand').hide(); + return true; + } -PaymentMethodController.prototype.validateDefaultField = function (element) { - const requiredElement = element.parent().parent(); - const requiredElementError = requiredElement.children(fieldError); + requiredElement.removeClass(errorClass); + requiredElementError.hide(); - if (element.val() === '') { - requiredElement.addClass(errorClass); - requiredElementError.show(); - return true; - } + return false; + } + setBin(binObj, creditCardNumberElement, formObject) { - requiredElement.removeClass(errorClass); - requiredElementError.hide(); - return false; -}; - -PaymentMethodController.prototype.validateBrandField = function (formObject) { - const element = formObject.creditCardBrand; - const requiredElement = element.parent().parent(); - const requiredElementError = requiredElement.find(fieldError); - - const brands = []; - PlatformConfig.PlatformConfig.avaliableBrands[formObject.savedCardSelectUsed].forEach(function (item) { - brands.push(item.title.toUpperCase()); - }); - - if ( - !brands.includes(element.val().toUpperCase()) - || element.val === '' - ) { - requiredElement.addClass(errorClass); - requiredElementError.show(); - requiredElement.find('.nobrand').hide(); - return true; - } + const bin = binObj; + const cardNumber = bin.formatNumber(creditCardNumberElement.val()); - requiredElement.removeClass(errorClass); - requiredElementError.hide(); + if (cardNumber.length < 4) { + return; + } - return false; -}; + const isNewBrand = bin.validate(cardNumber); -PaymentMethodController.prototype.setBin = function (binObj, creditCardNumberElement, formObject) { + bin.init(cardNumber); - var bin = binObj; - var cardNumber = bin.formatNumber(creditCardNumberElement.val()); + const formHandler = new FormHandler(); + formHandler.init(formObject); + formHandler.switchBrand(bin.selectedBrand); + if (isNewBrand) { + this.fillInstallments(formObject); + } - if (cardNumber.length < 4) { - return; - } + return; + } - var isNewBrand = bin.validate(cardNumber); + limitCharacters(element, limit) { + const val = element.val(); - bin.init(cardNumber); + if(val != "" && val.length > limit) { + element.val(val.substring(0, limit)); + } + } - formHandler = new FormHandler(); - formHandler.init(formObject); - formHandler.switchBrand(bin.selectedBrand); - if (isNewBrand) { - this.fillInstallments(formObject); - } + clearLetters(element) { + const val = element.val(); + const newVal = val.replace(/[^0-9]+/g, ''); + element.val(newVal); + } + + clearNumbers(element) { + const val = element.val(); + const newVal = val.replace(/[0-9.-]+/g, ''); + element.val(newVal); + } - return; -}; + hideCardAmount(formObject) { + const formHandler = new FormHandler(); + formHandler.init(formObject); + formHandler.hideInputAmount(formObject); + } -PaymentMethodController.prototype.limitCharacters = function (element, limit) { - var val = element.val(); + fillFormText(formObject, method = null) { + const formText = this.platformConfig.text; - if(val != "" && val.length > limit) { - element.val(val.substring(0, limit)); - } -}; + const creditCardExpYear = formObject.creditCardExpYear.val(); + const creditCardExpMonth = formObject.creditCardExpMonth.val() + + const formHandler = new FormHandler(); + formHandler.init(formObject); + formHandler.fillExpirationYearSelect(formText, method, creditCardExpYear); + formHandler.fillExpirationMonthSelect(formText, method, creditCardExpMonth); + //@Todo add other texts + } -PaymentMethodController.prototype.clearLetters = function (element) { - var val = element.val(); - var newVal = val.replace(/[^0-9]+/g, ''); - element.val(newVal); -}; + fillSavedCreditCardsSelect(formObject) { + const platformConfig = this.platformConfig; -PaymentMethodController.prototype.clearNumbers = function (element) { - var val = element.val(); - var newVal = val.replace(/[0-9.-]+/g, ''); - element.val(newVal); -}; + const formHandler = new FormHandler(); + formHandler.init(formObject); + formHandler.fillSavedCreditCardsSelect(platformConfig, formObject); -PaymentMethodController.prototype.hideCardAmount = function (formObject) { - formHandler = new FormHandler(); - formHandler.init(formObject); - formHandler.hideInputAmount(formObject); -}; + if (typeof formObject.savedCreditCardSelect[0] != 'undefined') { -PaymentMethodController.prototype.fillFormText = function (formObject, method = null) { - formText = this.platformConfig.text; + let brand = $('option:selected').attr('brand'); - var creditCardExpYear = formObject.creditCardExpYear.val(); - var creditCardExpMonth = formObject.creditCardExpMonth.val() + if (brand == undefined) { + brand = formObject.creditCardBrand.val(); + } - formHandler = new FormHandler(); - formHandler.init(formObject); - formHandler.fillExpirationYearSelect(formText, method, creditCardExpYear); - formHandler.fillExpirationMonthSelect(formText, method, creditCardExpMonth); - //@Todo add other texts -}; + formObject.creditCardBrand.val(brand); -PaymentMethodController.prototype.fillSavedCreditCardsSelect = function (formObject) { - platformConfig = this.platformConfig; + if ( + typeof formObject.multibuyer != 'undefined' && + typeof formObject.multibuyer.showMultibuyer != 'undefined' && + formObject.savedCreditCardSelect[0].length > 0 + ) { + formObject.multibuyer.showMultibuyer.parent().hide(); + } + } + } - formHandler = new FormHandler(); - formHandler.init(formObject); - formHandler.fillSavedCreditCardsSelect(platformConfig, formObject); + fillMultibuyerStateSelect(formObject) { + const platformConfig = this.platformConfig; - if (typeof formObject.savedCreditCardSelect[0] != 'undefined') { + const formHandler = new FormHandler(); + formHandler.init(formObject); + formHandler.fillMultibuyerStateSelect(platformConfig, formObject); + } - var brand = jQuery('option:selected').attr('brand'); + removeMultibuyerForm(formObject) { + const formHandler = new FormHandler(); + formHandler.init(formObject); + formHandler.removeMultibuyerForm(formObject); + } - if (brand == undefined) { - brand = formObject.creditCardBrand.val(); + addShowMultibuyerListener(formObject) { + $(formObject.multibuyer.showMultibuyer).on('click', function () { + formHandler.init(formObject); + formHandler.toggleMultibuyer(formObject); + }); } - formObject.creditCardBrand.val(brand); + isTotalOnAmountInputs(formObject, platformConfig) { + const orderTotal = platformConfig.updateTotals.getTotals()().grand_total; + const card1 = formObject[0].inputAmount.val()?.replace(platformConfig.currency.decimalSeparator, "."); + const card2 = formObject[1].inputAmount.val()?.replace(platformConfig.currency.decimalSeparator, "."); + const totalInputs = (parseFloat(card1) + parseFloat(card2)); - if ( - typeof formObject.multibuyer != 'undefined' && - typeof formObject.multibuyer.showMultibuyer != 'undefined' && - formObject.savedCreditCardSelect[0].length > 0 - ) { - formObject.multibuyer.showMultibuyer.parent().hide(); + return orderTotal == totalInputs; } - } -}; - -PaymentMethodController.prototype.fillMultibuyerStateSelect = function (formObject) { - platformConfig = this.platformConfig; - - formHandler = new FormHandler(); - formHandler.init(formObject); - formHandler.fillMultibuyerStateSelect(platformConfig, formObject); -}; - -PaymentMethodController.prototype.removeMultibuyerForm = function (formObject) { - formHandler = new FormHandler(); - formHandler.init(formObject); - formHandler.removeMultibuyerForm(formObject); -}; - -PaymentMethodController.prototype.addShowMultibuyerListener = function(formObject) { - jQuery(formObject.multibuyer.showMultibuyer).on('click', function () { - formHandler.init(formObject); - formHandler.toggleMultibuyer(formObject); - }); -}; - -PaymentMethodController.prototype.isTotalOnAmountInputs = function(formObject, platformConfig) { - var orderTotal = platformConfig.updateTotals.getTotals()().grand_total; - var card1 = formObject[0].inputAmount.val().replace(platformConfig.currency.decimalSeparator, "."); - var card2 = formObject[1].inputAmount.val().replace(platformConfig.currency.decimalSeparator, "."); - var totalInputs = (parseFloat(card1) + parseFloat(card2)); - - return orderTotal == totalInputs; -}; - -PaymentMethodController.prototype.validatePublicKey = function (publicKey) { - if (!publicKey) { - var error = - "Não foi possivel conectar com o serviço de pagamento. " + - "Por favor contate o administrador da loja."; - this.model.addErrors(error); - return false; - } - return true; -}; + validatePublicKey(publicKey) { + if (!publicKey) { + const error = + "Não foi possivel conectar com o serviço de pagamento. " + + "Por favor contate o administrador da loja."; + this.model.addErrors(error); + return false; + } + + return true; + } + } +}); diff --git a/view/frontend/web/js/core/checkout/PaymentModuleBootstrap.js b/view/frontend/web/js/core/checkout/PaymentModuleBootstrap.js index 0882118d..65e8bae1 100644 --- a/view/frontend/web/js/core/checkout/PaymentModuleBootstrap.js +++ b/view/frontend/web/js/core/checkout/PaymentModuleBootstrap.js @@ -2,56 +2,60 @@ * This code should be migrated to core_module */ -var PagarmeCore = { - paymentMethod : [] -}; - -PagarmeCore.initPaymentMethod = function (methodCode, platformConfig) { - var _self = this; - setTimeout(function() { - _self.init(methodCode, platformConfig); - }, 1000); -}; - -PagarmeCore.init = function (methodCode, platformConfig) { - this.paymentMethod[methodCode] = new PaymentMethodController(methodCode, platformConfig); - this.paymentMethod[methodCode].init(); -} -PagarmeCore.initBin = function (methodCode, obj) { - this.paymentMethod[methodCode].initBin(obj); -}; - -PagarmeCore.validatePaymentMethod = function (methodCode) { - this.paymentMethod = - new PaymentMethodController(methodCode); - - this.paymentMethod.init(); - return this.paymentMethod.formValidation(); -}; - -PagarmeCore.placeOrder = function(platformObject, model) { - - if (this.paymentMethod[model].model.validate()) { - try { - //This object should be injected on this method, not instantiated here - var platformOrderPlace = new PlatformPlaceOrder( - platformObject.obj, - platformObject.data, - platformObject.event - ); - - this.paymentMethod[model].placeOrder(platformOrderPlace); - } catch (e) { - console.log(e) +define([ + 'Pagarme_Pagarme/js/core/checkout/PaymentMethodController', + 'Pagarme_Pagarme/js/core/checkout/PlatformPlaceOrder' +], (PaymentMethodController, PlatformPlaceOrder) => { + const PagarmeCore = { + paymentMethod : [] + }; + + PagarmeCore.init = (methodCode, platformConfig) => { + PagarmeCore.paymentMethod[methodCode] = new PaymentMethodController(methodCode, platformConfig); + PagarmeCore.paymentMethod[methodCode].init(); + }; + + PagarmeCore.initPaymentMethod = (methodCode, platformConfig) => { + setTimeout(function() { + PagarmeCore.init(methodCode, platformConfig); + }, 1000); + }; + + PagarmeCore.initBin = (methodCode, obj) => { + PagarmeCore.paymentMethod[methodCode].initBin(obj); + }; + + PagarmeCore.validatePaymentMethod = (methodCode) => { + PagarmeCore.paymentMethod = + new PaymentMethodController(methodCode); + + PagarmeCore.paymentMethod.init(); + return PagarmeCore.paymentMethod.formValidation(); + }; + + PagarmeCore.placeOrder = (platformObject, model) => { + if (PagarmeCore.paymentMethod[model].model.validate()) { + try { + const platformOrderPlace = new PlatformPlaceOrder( + platformObject.obj, + platformObject.data, + platformObject.event + ); + PagarmeCore.paymentMethod[model].placeOrder(platformOrderPlace); + } catch (e) { + console.log(e) + } } - } - var errors = this.paymentMethod[model].model.errors; - if (errors.length > 0) { - for (index in errors) { - this.messageList.addErrorMessage(errors[index]); + const errors = PagarmeCore.paymentMethod[model].model.errors; + if (errors.length > 0) { + for (let index in errors) { + this.messageList.addErrorMessage(errors[index]); + } + jQuery("html, body").animate({scrollTop: 0}, 600); + console.log(errors); } - jQuery("html, body").animate({scrollTop: 0}, 600); - console.log(errors); - } -} \ No newline at end of file + }; + + return PagarmeCore; +}); diff --git a/view/frontend/web/js/core/checkout/PlatformConfig.js b/view/frontend/web/js/core/checkout/PlatformConfig.js new file mode 100644 index 00000000..9fcf6999 --- /dev/null +++ b/view/frontend/web/js/core/checkout/PlatformConfig.js @@ -0,0 +1,163 @@ +define([], () => { + const PlatformConfig = { + PlatformConfig: {} + }; + + PlatformConfig.getBrands = (data, paymentMethodBrands) => { + const availableBrands = []; + + if (paymentMethodBrands !== undefined) { + const brands = Object.keys(paymentMethodBrands); + + for (let i = 0, len = brands.length; i < len; i++) { + const brand = data.payment.ccform.icons[brands[i]]; + if (!brand) continue; + const url = brand.url; + + availableBrands[i] = { + 'title': brands[i], + 'image': url + + }; + } + } + return availableBrands; + }; + + PlatformConfig.getAvaliableBrands = (data) => { + const creditCardBrands = PlatformConfig.getBrands( + data, + data.payment.ccform.availableTypes.pagarme_creditcard + ); + + const voucherBrands = PlatformConfig.getBrands( + data, + data.payment.ccform.availableTypes.pagarme_voucher + ); + + const debitBrands = PlatformConfig.getBrands( + data, + data.payment.ccform.availableTypes.pagarme_debit + ); + + const twoCreditcardBrands = PlatformConfig.getBrands( + data, + data.payment.ccform.availableTypes.pagarme_two_creditcard + ); + + const billetCreditcardBrands = PlatformConfig.getBrands( + data, + data.payment.ccform.availableTypes.pagarme_billet_creditcard + ); + + return { + 'pagarme_creditcard': creditCardBrands, + 'pagarme_voucher': voucherBrands, + 'pagarme_debit': debitBrands, + 'pagarme_two_creditcard': twoCreditcardBrands, + 'pagarme_billet_creditcard': billetCreditcardBrands + }; + }; + + PlatformConfig.getSavedCreditCards = (platFormConfig) => { + let creditCard = null; + let twoCreditCard = null; + let billetCreditCard = null; + let voucherCard = null; + let debitCard = null; + + if ( + platFormConfig.payment.pagarme_creditcard.enabled_saved_cards && + typeof(platFormConfig.payment.pagarme_creditcard.cards != "undefined") + ) { + creditCard = platFormConfig.payment.pagarme_creditcard.cards; + } + + if ( + platFormConfig.payment.pagarme_voucher.enabled_saved_cards && + typeof(platFormConfig.payment.pagarme_voucher.cards != "undefined") + ) { + voucherCard = platFormConfig.payment.pagarme_voucher.cards; + } + + if ( + platFormConfig.payment.pagarme_two_creditcard.enabled_saved_cards && + typeof(platFormConfig.payment.pagarme_two_creditcard.cards != "undefined") + ) { + twoCreditCard = platFormConfig.payment.pagarme_two_creditcard.cards; + } + + if ( + platFormConfig.payment.pagarme_billet_creditcard.enabled_saved_cards && + typeof(platFormConfig.payment.pagarme_billet_creditcard.cards != "undefined") + ) { + billetCreditCard = platFormConfig.payment.pagarme_billet_creditcard.cards; + } + + if ( + platFormConfig.payment.pagarme_debit.enabled_saved_cards && + typeof(platFormConfig.payment.pagarme_debit.cards != "undefined") + ) { + debitCard = platFormConfig.payment.pagarme_debit.cards; + } + + return { + "pagarme_creditcard": creditCard, + "pagarme_two_creditcard": twoCreditCard, + "pagarme_billet_creditcard": billetCreditCard, + "pagarme_voucher": voucherCard, + "pagarme_debit": debitCard + }; + }; + + PlatformConfig.bind = (platformConfig) => { + const grandTotal = parseFloat(platformConfig.grand_total); + + const publicKey = platformConfig.payment.ccform.pk_token; + + const urls = { + base: platformConfig.base_url, + installments : platformConfig.moduleUrls.installments + }; + + const currency = { + code : platformConfig.quoteData.base_currency_code, + decimalSeparator : platformConfig.basePriceFormat.decimalSymbol, + precision : platformConfig.basePriceFormat.precision + }; + + const text = { + months: platformConfig.payment.ccform.months, + years: platformConfig.payment.ccform.years + } + + const avaliableBrands = PlatformConfig.getAvaliableBrands(platformConfig); + const savedAllCards = PlatformConfig.getSavedCreditCards(platformConfig); + + const loader = { + start: platformConfig.loader.startLoader, + stop: platformConfig.loader.stopLoader + }; + const totals = platformConfig.totalsData; + + PlatformConfig.PlatformConfig = { + avaliableBrands: avaliableBrands, + orderAmount : grandTotal.toFixed(platformConfig.basePriceFormat.precision), + urls: urls, + currency : currency, + text: text, + publicKey: publicKey, + totals: totals, + loader: loader, + addresses: platformConfig.addresses, + updateTotals: platformConfig.updateTotals, + savedAllCards: savedAllCards, + region_states: platformConfig.region_states, + isMultibuyerEnabled: platformConfig.is_multi_buyer_enabled + }; + + return PlatformConfig.PlatformConfig; + } + + return PlatformConfig; +}); diff --git a/view/frontend/web/js/core/checkout/PlatformFormBiding.js b/view/frontend/web/js/core/checkout/PlatformFormBiding.js deleted file mode 100644 index 02393242..00000000 --- a/view/frontend/web/js/core/checkout/PlatformFormBiding.js +++ /dev/null @@ -1,597 +0,0 @@ -var FormObject = {}; -var PlatformConfig = {}; - -PlatformConfig.bind = function (platformConfig) { - grandTotal = parseFloat(platformConfig.grand_total); - - publicKey = platformConfig.payment.ccform.pk_token; - - urls = { - base: platformConfig.base_url, - installments : platformConfig.moduleUrls.installments - }; - - currency = { - code : platformConfig.quoteData.base_currency_code, - decimalSeparator : platformConfig.basePriceFormat.decimalSymbol, - precision : platformConfig.basePriceFormat.precision - }; - - text = { - months: platformConfig.payment.ccform.months, - years: platformConfig.payment.ccform.years - } - - avaliableBrands = this.getAvaliableBrands(platformConfig); - savedAllCards = this.getSavedCreditCards(platformConfig); - - loader = { - start: platformConfig.loader.startLoader, - stop: platformConfig.loader.stopLoader - }; - totals = platformConfig.totalsData; - - var config = { - avaliableBrands: avaliableBrands, - orderAmount : grandTotal.toFixed(platformConfig.basePriceFormat.precision), - urls: urls, - currency : currency, - text: text, - publicKey: publicKey, - totals: totals, - loader: loader, - addresses: platformConfig.addresses, - updateTotals: platformConfig.updateTotals, - savedAllCards: savedAllCards, - region_states: platformConfig.region_states, - isMultibuyerEnabled: platformConfig.is_multi_buyer_enabled - }; - - this.PlatformConfig = config; - - return this.PlatformConfig; -}; - -PlatformConfig.getAvaliableBrands = function (data) { - creditCardBrands = this.getBrands( - data, - data.payment.ccform.availableTypes.pagarme_creditcard - ); - - voucherBrands = this.getBrands( - data, - data.payment.ccform.availableTypes.pagarme_voucher - ); - - debitBrands = this.getBrands( - data, - data.payment.ccform.availableTypes.pagarme_debit - ); - - twoCreditcardBrands = this.getBrands( - data, - data.payment.ccform.availableTypes.pagarme_two_creditcard - ); - - billetCreditcardBrands = this.getBrands( - data, - data.payment.ccform.availableTypes.pagarme_billet_creditcard - ); - - return { - 'pagarme_creditcard': creditCardBrands, - 'pagarme_voucher': voucherBrands, - 'pagarme_debit': debitBrands, - 'pagarme_two_creditcard': twoCreditcardBrands, - 'pagarme_billet_creditcard': billetCreditcardBrands - }; -} - -PlatformConfig.getBrands = function (data, paymentMethodBrands) { - var availableBrands = []; - - if (paymentMethodBrands !== undefined) { - var brands = Object.keys(paymentMethodBrands); - - for (var i = 0, len = brands.length; i < len; i++) { - brand = data.payment.ccform.icons[brands[i]]; - if (!brand) continue; - url = brand.url; - fixArray = []; - imageUrl = fixArray.concat(url); - - availableBrands[i] = { - 'title': brands[i], - 'image': imageUrl[0] - - }; - } - } - return availableBrands; -} - -FormObject.creditCardInit = function (isMultibuyerEnabled) { - - this.FormObject = {}; - - var containerSelector = '#pagarme_creditcard-form'; - - if (typeof jQuery(containerSelector).html() == 'undefined') { - this.FormObject = null; - return; - } - - var creditCardForm = { - 'containerSelector' : containerSelector, - "creditCardNumber" : jQuery(containerSelector + " .cc_number"), - "creditCardHolderName" : jQuery(containerSelector + " .cc_owner"), - "creditCardExpMonth" : jQuery(containerSelector + " .cc_exp_month"), - "creditCardExpYear" : jQuery(containerSelector + " .cc_exp_year"), - "creditCardCvv" : jQuery(containerSelector + " .cc_cid"), - "creditCardInstallments" : jQuery(containerSelector + " .cc_installments"), - "creditCardBrand" : jQuery(containerSelector + " .cc_type"), - "creditCardToken" : jQuery(containerSelector + " .cc_token"), - "inputAmount" : jQuery(containerSelector + " .cc_amount"), - "inputAmountContainer" : jQuery(containerSelector + " .amount-container"), - "savedCreditCardSelect" : jQuery(containerSelector + " .cc_saved_creditcards"), - "saveThisCard" : jQuery(containerSelector + " .save_this_card") - }; - - if (isMultibuyerEnabled) { - var multibuyerForm = { - "showMultibuyer" : jQuery(containerSelector + " .show_multibuyer"), - "firstname" : jQuery(containerSelector + " .multibuyer_firstname"), - "lastname" : jQuery(containerSelector + " .multibuyer_lastname"), - "email" : jQuery(containerSelector + " .multibuyer_email"), - "zipcode" : jQuery(containerSelector + " .multibuyer_zipcode"), - "document" : jQuery(containerSelector + " .multibuyer_document"), - "street" : jQuery(containerSelector + " .multibuyer_street"), - "number" : jQuery(containerSelector + " .multibuyer_number"), - "complement" : jQuery(containerSelector + " .multibuyer_complement"), - "neighborhood" : jQuery(containerSelector + " .multibuyer_neighborhood"), - "city" : jQuery(containerSelector + " .multibuyer_city"), - "state" : jQuery(containerSelector + " .multibuyer_state"), - "homePhone" : jQuery(containerSelector + " .multibuyer_home_phone"), - "mobilePhone" : jQuery(containerSelector + " .multibuyer_mobile_phone") - } - } - - this.FormObject = creditCardForm; - this.FormObject.numberOfPaymentForms = 1; - this.FormObject.multibuyer = multibuyerForm; - this.FormObject.savedCardSelectUsed = 'pagarme_creditcard'; - - return this.FormObject; -}; - -FormObject.voucherInit = function (isMultibuyerEnabled) { - - this.FormObject = {}; - - var containerSelector = '#pagarme_voucher-form'; - - if (typeof jQuery(containerSelector).html() == 'undefined') { - this.FormObject = null; - return; - } - - var voucherForm = { - 'containerSelector' : containerSelector, - "creditCardNumber" : jQuery(containerSelector + " .cc_number"), - "creditCardHolderName" : jQuery(containerSelector + " .cc_owner"), - "creditCardExpMonth" : jQuery(containerSelector + " .cc_exp_month"), - "creditCardExpYear" : jQuery(containerSelector + " .cc_exp_year"), - "creditCardCvv" : jQuery(containerSelector + " .cc_cid"), - "creditCardInstallments" : jQuery(containerSelector + " .cc_installments"), - "creditCardBrand" : jQuery(containerSelector + " .cc_type"), - "creditCardToken" : jQuery(containerSelector + " .cc_token"), - "inputAmount" : jQuery(containerSelector + " .cc_amount"), - "savedCreditCardSelect" : jQuery(containerSelector + " .cc_saved_creditcards"), - "saveThisCard" : jQuery(containerSelector + " .save_this_card") - }; - - if (isMultibuyerEnabled) { - var multibuyerForm = { - "showMultibuyer" : jQuery(containerSelector + " .show_multibuyer"), - "firstname" : jQuery(containerSelector + " .multibuyer_firstname"), - "lastname" : jQuery(containerSelector + " .multibuyer_lastname"), - "email" : jQuery(containerSelector + " .multibuyer_email"), - "zipcode" : jQuery(containerSelector + " .multibuyer_zipcode"), - "document" : jQuery(containerSelector + " .multibuyer_document"), - "street" : jQuery(containerSelector + " .multibuyer_street"), - "number" : jQuery(containerSelector + " .multibuyer_number"), - "complement" : jQuery(containerSelector + " .multibuyer_complement"), - "neighborhood" : jQuery(containerSelector + " .multibuyer_neighborhood"), - "city" : jQuery(containerSelector + " .multibuyer_city"), - "state" : jQuery(containerSelector + " .multibuyer_state"), - "homePhone" : jQuery(containerSelector + " .multibuyer_home_phone"), - "mobilePhone" : jQuery(containerSelector + " .multibuyer_mobile_phone") - } - } - - this.FormObject = voucherForm; - this.FormObject.numberOfPaymentForms = 1; - this.FormObject.multibuyer = multibuyerForm; - this.FormObject.savedCardSelectUsed = 'pagarme_voucher'; - - return this.FormObject; -}; - -FormObject.debitInit = function (isMultibuyerEnabled) { - - this.FormObject = {}; - - var containerSelector = '#pagarme_debit-form'; - - if (typeof jQuery(containerSelector).html() == 'undefined') { - this.FormObject = null; - return; - } - - var debitForm = { - 'containerSelector' : containerSelector, - "creditCardNumber" : jQuery(containerSelector + " .cc_number"), - "creditCardHolderName" : jQuery(containerSelector + " .cc_owner"), - "creditCardExpMonth" : jQuery(containerSelector + " .cc_exp_month"), - "creditCardExpYear" : jQuery(containerSelector + " .cc_exp_year"), - "creditCardCvv" : jQuery(containerSelector + " .cc_cid"), - "creditCardInstallments" : jQuery(containerSelector + " .cc_installments"), - "creditCardBrand" : jQuery(containerSelector + " .cc_type"), - "creditCardToken" : jQuery(containerSelector + " .cc_token"), - "inputAmount" : jQuery(containerSelector + " .cc_amount"), - "savedCreditCardSelect" : jQuery(containerSelector + " .cc_saved_creditcards"), - "saveThisCard" : jQuery(containerSelector + " .save_this_card") - }; - - if (isMultibuyerEnabled) { - var multibuyerForm = this.getMultibuyerForm(containerSelector) - } - - this.FormObject = debitForm; - this.FormObject.numberOfPaymentForms = 1; - this.FormObject.multibuyer = multibuyerForm; - this.FormObject.savedCardSelectUsed = 'pagarme_debit'; - - return this.FormObject; -}; - -FormObject.getMultibuyerForm = function (containerSelector) { - return { - "showMultibuyer" : jQuery(containerSelector + " .show_multibuyer"), - "firstname" : jQuery(containerSelector + " .multibuyer_firstname"), - "lastname" : jQuery(containerSelector + " .multibuyer_lastname"), - "email" : jQuery(containerSelector + " .multibuyer_email"), - "zipcode" : jQuery(containerSelector + " .multibuyer_zipcode"), - "document" : jQuery(containerSelector + " .multibuyer_document"), - "street" : jQuery(containerSelector + " .multibuyer_street"), - "number" : jQuery(containerSelector + " .multibuyer_number"), - "complement" : jQuery(containerSelector + " .multibuyer_complement"), - "neighborhood" : jQuery(containerSelector + " .multibuyer_neighborhood"), - "city" : jQuery(containerSelector + " .multibuyer_city"), - "state" : jQuery(containerSelector + " .multibuyer_state"), - "homePhone" : jQuery(containerSelector + " .multibuyer_home_phone"), - "mobilePhone" : jQuery(containerSelector + " .multibuyer_mobile_phone") - } -} - -FormObject.twoCreditCardsInit = function (isMultibuyerEnabled) { - - this.FormObject = {}; - - containerSelector = []; - containerSelector.push("#pagarme_two_creditcard-form #two-credit-cards-form-0"); - containerSelector.push("#pagarme_two_creditcard-form #two-credit-cards-form-1"); - - - if (typeof jQuery(containerSelector[0]).html() == 'undefined') { - this.FormObject = null; - return; - } - - //Using for for IE compatibility - for (var i = 0, len = containerSelector.length; i < len; i++) { - FormObject.fillTwoCreditCardsElements(containerSelector[i], i, isMultibuyerEnabled); - } - - this.FormObject.numberOfPaymentForms = 2; - - return this.FormObject; -}; - - -FormObject.pixInit = function (isMultibuyerEnabled) { - - this.FormObject = {}; - - var containerSelector = '#pagarme_pix-form'; - - if (typeof jQuery(containerSelector).html() == 'undefined') { - this.FormObject = null; - return; - } - - var pixElements = { - 'containerSelector' : containerSelector, - "inputAmount" : jQuery(containerSelector + " .cc_amount"), - "inputAmountContainer" : jQuery(containerSelector + " .amount-container") - }; - - if (isMultibuyerEnabled) { - var multibuyerForm = { - "showMultibuyer": jQuery(containerSelector + " .show_multibuyer"), - "firstname": jQuery(containerSelector + " .multibuyer_firstname"), - "lastname": jQuery(containerSelector + " .multibuyer_lastname"), - "email": jQuery(containerSelector + " .multibuyer_email"), - "zipcode": jQuery(containerSelector + " .multibuyer_zipcode"), - "document": jQuery(containerSelector + " .multibuyer_document"), - "street": jQuery(containerSelector + " .multibuyer_street"), - "number": jQuery(containerSelector + " .multibuyer_number"), - "complement": jQuery(containerSelector + " .multibuyer_complement"), - "neighborhood": jQuery(containerSelector + " .multibuyer_neighborhood"), - "city": jQuery(containerSelector + " .multibuyer_city"), - "state": jQuery(containerSelector + " .multibuyer_state"), - "homePhone": jQuery(containerSelector + " .multibuyer_home_phone"), - "mobilePhone": jQuery(containerSelector + " .multibuyer_mobile_phone") - } - } - - this.FormObject = pixElements; - this.FormObject.numberOfPaymentForms = 1; - this.FormObject.multibuyer = multibuyerForm; - return this.FormObject; -} - -FormObject.boletoInit = function (isMultibuyerEnabled) { - - this.FormObject = {}; - - var containerSelector = '#pagarme_billet-form'; - - if (typeof jQuery(containerSelector).html() == 'undefined') { - this.FormObject = null; - return; - } - - var boletoElements = { - 'containerSelector' : containerSelector, - "inputAmount" : jQuery(containerSelector + " .cc_amount"), - "inputAmountContainer" : jQuery(containerSelector + " .amount-container") - }; - - if (isMultibuyerEnabled) { - var multibuyerForm = { - "showMultibuyer": jQuery(containerSelector + " .show_multibuyer"), - "firstname": jQuery(containerSelector + " .multibuyer_firstname"), - "lastname": jQuery(containerSelector + " .multibuyer_lastname"), - "email": jQuery(containerSelector + " .multibuyer_email"), - "zipcode": jQuery(containerSelector + " .multibuyer_zipcode"), - "document": jQuery(containerSelector + " .multibuyer_document"), - "street": jQuery(containerSelector + " .multibuyer_street"), - "number": jQuery(containerSelector + " .multibuyer_number"), - "complement": jQuery(containerSelector + " .multibuyer_complement"), - "neighborhood": jQuery(containerSelector + " .multibuyer_neighborhood"), - "city": jQuery(containerSelector + " .multibuyer_city"), - "state": jQuery(containerSelector + " .multibuyer_state"), - "homePhone": jQuery(containerSelector + " .multibuyer_home_phone"), - "mobilePhone": jQuery(containerSelector + " .multibuyer_mobile_phone") - } - } - - this.FormObject = boletoElements; - this.FormObject.numberOfPaymentForms = 1; - this.FormObject.multibuyer = multibuyerForm; - return this.FormObject; -} - -FormObject.boletoCreditCardInit = function (isMultibuyerEnabled) { - - var containerBoletoSelector = "#pagarme_billet_creditcard-form #billet-form"; - var containerCreditCardSelector = "#pagarme_billet_creditcard-form #credit-card-form"; - - this.FormObject = {}; - - if (typeof jQuery(containerCreditCardSelector + " .cc_installments").html() == 'undefined') { - this.FormObject = null; - return; - } - - var boletoElements = { - 'containerSelector' : containerBoletoSelector, - "inputAmount" : jQuery(containerBoletoSelector + " .cc_amount"), - "inputAmountContainer" : jQuery(containerBoletoSelector + " .amount-container"), - }; - - var cardsElements = { - 'containerSelector' : containerCreditCardSelector, - "creditCardNumber" : jQuery(containerCreditCardSelector + " .cc_number"), - "creditCardHolderName" : jQuery(containerCreditCardSelector + " .cc_owner"), - "creditCardExpMonth" : jQuery(containerCreditCardSelector + " .cc_exp_month"), - "creditCardExpYear" : jQuery(containerCreditCardSelector + " .cc_exp_year"), - "creditCardCvv" : jQuery(containerCreditCardSelector + " .cc_cid"), - "creditCardInstallments" : jQuery(containerCreditCardSelector + " .cc_installments"), - "creditCardBrand" : jQuery(containerCreditCardSelector + " .cc_type"), - "creditCardToken" : jQuery(containerCreditCardSelector + " .cc_token"), - "inputAmount" : jQuery(containerCreditCardSelector + " .cc_amount"), - "inputAmountContainer" : jQuery(containerCreditCardSelector + " .amount-container"), - "savedCreditCardSelect" : jQuery(containerCreditCardSelector + " .cc_saved_creditcards"), - "saveThisCard" : jQuery(containerCreditCardSelector + " .save_this_card") - }; - - this.FormObject[0] = boletoElements; - this.FormObject[1] = cardsElements; - - for (var i = 0, len = 2; i < len; i++) { - FormObject.fillBoletoCreditCardElements(this.FormObject[i].containerSelector, i, isMultibuyerEnabled); - } - - this.FormObject.numberOfPaymentForms = 2; - this.FormObject[1].savedCardSelectUsed = 'pagarme_billet_creditcard'; - - return this.FormObject; -} - -FormObject.fillBoletoCreditCardElements = function (containerSelector, elementId, isMultibuyerEnabled) { - if (isMultibuyerEnabled) { - var multibuyerForm = { - "showMultibuyer" : jQuery(containerSelector + " .show_multibuyer"), - "firstname" : jQuery(containerSelector + " .multibuyer_firstname"), - "lastname" : jQuery(containerSelector + " .multibuyer_lastname"), - "email" : jQuery(containerSelector + " .multibuyer_email"), - "zipcode" : jQuery(containerSelector + " .multibuyer_zipcode"), - "document" : jQuery(containerSelector + " .multibuyer_document"), - "street" : jQuery(containerSelector + " .multibuyer_street"), - "number" : jQuery(containerSelector + " .multibuyer_number"), - "complement" : jQuery(containerSelector + " .multibuyer_complement"), - "neighborhood" : jQuery(containerSelector + " .multibuyer_neighborhood"), - "city" : jQuery(containerSelector + " .multibuyer_city"), - "state" : jQuery(containerSelector + " .multibuyer_state"), - "homePhone" : jQuery(containerSelector + " .multibuyer_home_phone"), - "mobilePhone" : jQuery(containerSelector + " .multibuyer_mobile_phone") - } - - this.FormObject[elementId].multibuyer = multibuyerForm; - } - return this.FormObject; -} - -FormObject.fillTwoCreditCardsElements = function (containerSelector, elementId, isMultibuyerEnabled) { - - if (jQuery(containerSelector).children().length == 0) { - return; - } - - var elements = { - "creditCardNumber" : jQuery(containerSelector + " .cc_number"), - "creditCardHolderName" : jQuery(containerSelector + " .cc_owner"), - "creditCardExpMonth" : jQuery(containerSelector + " .cc_exp_month"), - "creditCardExpYear" : jQuery(containerSelector + " .cc_exp_year"), - "creditCardCvv" : jQuery(containerSelector + " .cc_cid"), - "creditCardInstallments" : jQuery(containerSelector + " .cc_installments"), - "creditCardBrand" : jQuery(containerSelector + " .cc_type"), - "creditCardToken" : jQuery(containerSelector + " .cc_token"), - "inputAmount" : jQuery(containerSelector + " .cc_amount"), - "inputAmountContainer" : jQuery(containerSelector + " .amount-container"), - "savedCreditCardSelect" : jQuery(containerSelector + " .cc_saved_creditcards"), - "saveThisCard" : jQuery(containerSelector + " .save_this_card") - }; - - if (isMultibuyerEnabled) { - var multibuyerForm = { - "showMultibuyer" : jQuery(containerSelector + " .show_multibuyer"), - "firstname" : jQuery(containerSelector + " .multibuyer_firstname"), - "lastname" : jQuery(containerSelector + " .multibuyer_lastname"), - "email" : jQuery(containerSelector + " .multibuyer_email"), - "zipcode" : jQuery(containerSelector + " .multibuyer_zipcode"), - "document" : jQuery(containerSelector + " .multibuyer_document"), - "street" : jQuery(containerSelector + " .multibuyer_street"), - "number" : jQuery(containerSelector + " .multibuyer_number"), - "complement" : jQuery(containerSelector + " .multibuyer_complement"), - "neighborhood" : jQuery(containerSelector + " .multibuyer_neighborhood"), - "city" : jQuery(containerSelector + " .multibuyer_city"), - "state" : jQuery(containerSelector + " .multibuyer_state"), - "homePhone" : jQuery(containerSelector + " .multibuyer_home_phone"), - "mobilePhone" : jQuery(containerSelector + " .multibuyer_mobile_phone") - } - } - - this.FormObject[elementId] = - this.renameTwoCreditCardsElements( - elements, - elementId - ); - - this.FormObject[elementId].multibuyer = - this.renameTwoCreditCardsElements( - multibuyerForm, - elementId - ); - - this.FormObject[elementId].containerSelector = containerSelector; - this.FormObject[elementId].savedCardSelectUsed = 'pagarme_two_creditcard'; - - return this.FormObject; -}; - -FormObject.renameTwoCreditCardsElements = function (elements, elementId) { - var twoCreditCardForm = {}; - - for (var key in elements) { - - name = elements[key].attr('name'); - - newName = name + '[' + elementId + ']'; - - if (name.match(/\[\d\]/g)) { - newName = name; - } - - elements[key].attr('name', newName); - elementType = 'input'; - - if (elements[key].is('select')) { - elementType = 'select'; - } - - newElement = - jQuery( - elementType + - "[name='" + - newName + - "']" - ); - twoCreditCardForm[key] = newElement; - } - - return twoCreditCardForm; -}; - -PlatformConfig.getSavedCreditCards = function (platFormConfig) { - var creditCard = null; - var twoCreditCard = null; - var billetCreditCard = null; - var voucherCard = null; - var debitCard = null; - - if ( - platFormConfig.payment.pagarme_creditcard.enabled_saved_cards && - typeof(platFormConfig.payment.pagarme_creditcard.cards != "undefined") - ) { - creditCard = platFormConfig.payment.pagarme_creditcard.cards; - } - - if ( - platFormConfig.payment.pagarme_voucher.enabled_saved_cards && - typeof(platFormConfig.payment.pagarme_voucher.cards != "undefined") - ) { - voucherCard = platFormConfig.payment.pagarme_voucher.cards; - } - - if ( - platFormConfig.payment.pagarme_two_creditcard.enabled_saved_cards && - typeof(platFormConfig.payment.pagarme_two_creditcard.cards != "undefined") - ) { - twoCreditCard = platFormConfig.payment.pagarme_two_creditcard.cards; - } - - if ( - platFormConfig.payment.pagarme_billet_creditcard.enabled_saved_cards && - typeof(platFormConfig.payment.pagarme_billet_creditcard.cards != "undefined") - ) { - billetCreditCard = platFormConfig.payment.pagarme_billet_creditcard.cards; - } - - if ( - platFormConfig.payment.pagarme_debit.enabled_saved_cards && - typeof(platFormConfig.payment.pagarme_debit.cards != "undefined") - ) { - debitCard = platFormConfig.payment.pagarme_debit.cards; - } - - return { - "pagarme_creditcard": creditCard, - "pagarme_two_creditcard": twoCreditCard, - "pagarme_billet_creditcard": billetCreditCard, - "pagarme_voucher": voucherCard, - "pagarme_debit": debitCard - }; -}; diff --git a/view/frontend/web/js/core/checkout/PlatformFormHandler.js b/view/frontend/web/js/core/checkout/PlatformFormHandler.js index 620216ed..91273cfa 100644 --- a/view/frontend/web/js/core/checkout/PlatformFormHandler.js +++ b/view/frontend/web/js/core/checkout/PlatformFormHandler.js @@ -1,234 +1,225 @@ -var FormHandler = function () { - formObject = {} -}; - -FormHandler.prototype.init = function (formObject) { - this.formObject = formObject; -}; - -FormHandler.prototype.switchBrand = function (brand) { - const brandsSelector = this.formObject.containerSelector + ' .brands'; - const brandElement = this.formObject.creditCardBrand; - - jQuery(brandsSelector).css('filter', 'grayscale(100%) opacity(60%)'); - - if(typeof brand != 'undefined' && brand.length > 0){ - const brandSelector = - this.formObject.containerSelector + ' .' + - brand.toLowerCase(); - - jQuery(brandSelector).css('filter', 'none'); - brandElement.val(brand); - - if (brandElement.val() !== 'default' && brandElement.val() !== '') { - brandElement.change(); +define(['jquery'], ($) => { + return class FormHandler { + constructor() { + this.formObject = {} } - - return; - } - - brandElement.val(''); -}; - -FormHandler.prototype.updateInstallmentSelect = function (installmentsObj, element, installmentSelected = null) { - var content = ""; - for (var i = 0, len = installmentsObj.length; i < len; i++) { - content += - ""; - } - - element.html(content); - - for (var i = 0; i < element[0].length; i++) { - var option = element[0].options[i]; - if (option.value == installmentSelected) { - element.val(installmentSelected); + init(formObject) { + this.formObject = formObject; } - } -}; - -FormHandler.prototype.fillBrandList = function (brandsObject, formObject) { - var html = ''; - - for (var i = 0, len = brandsObject.length; i < len; i++) { - if (!brandsObject[i]) continue; - html += - "