Bugfix: Card tokenize on browser autocomplete - PLATS-63 #530

pagarme · Jan 14, 2025 · 8b26b29 · 8b26b29
2 parents be1debc + 12abd07
commit 8b26b29
Showing 8 changed files with 33 additions and 35 deletions.
diff --git a/assets/javascripts/front/checkout/model/payment/card.js b/assets/javascripts/front/checkout/model/payment/card.js
@@ -434,7 +434,7 @@ let pagarmeCard = {
     },
     canExecute: function (event) {
         const checkoutPaymentElement = pagarmeCard.getCheckoutPaymentElement();
-        
+
         const cardBrand = checkoutPaymentElement.parents('.pagarme-card-number-row')
             .find(this.brandTarget);
         if (cardBrand?.val()?.length === 0 || wc_pagarme_checkout.errorTokenize === true) {
@@ -500,7 +500,7 @@ let pagarmeCard = {
             pagarmeCard.preventSpecialCharacter(this);
         });
 
-        jQuery(this.cardNumberTarget).on('change', function (event) {
+        jQuery(this.cardNumberTarget).on('input', function (event) {
             pagarmeCard.keyEventHandlerCard(event);
         });
 
@@ -509,7 +509,7 @@ let pagarmeCard = {
         });
     },
     renewEventListener: function () {
-        jQuery(this.cardNumberTarget).on('change', function (event) {
+        jQuery(this.cardNumberTarget).on('input', function (event) {
             pagarmeCard.keyEventHandlerCard(event);
         });
         jQuery(`${this.fieldsetCardElements} input`).on('change', function () {

diff --git a/...scripts/front/reactCheckout/payments/Card/inputs/components/InputNumber/useInputNumber.js b/...scripts/front/reactCheckout/payments/Card/inputs/components/InputNumber/useInputNumber.js
@@ -33,11 +33,12 @@ const useInputNumber = (
         cssClasses += " has-error";
     }
 
-    const inputChangeHandler = (event) => {
-        setInputValue(cardIndex, event.target.value);
+    const resetBrand = () => {
+        setBrand(cardIndex, "");
+        setBrandImageSrc("");
     };
 
-    const getBrandContengency = (bin) => {
+    const getBrandContingency = (bin) => {
         let oldPrefix = "";
         let brand = null;
         for (const [currentBrandKey, currentBrand] of Object.entries(brands)) {
@@ -56,13 +57,7 @@ const useInputNumber = (
         return brand;
     };
 
-    const resetBrand = () => {
-        setBrand(cardIndex, "");
-        setBrandImageSrc("");
-    };
-
-    const changeBrand = async () => {
-        const cardNumber = formatCardNumber(inputValue);
+    const changeBrand = async (cardNumber) => {
         if (cardNumber.length !== 16) {
             resetBrand();
             return;
@@ -78,7 +73,7 @@ const useInputNumber = (
 
             let brand = result.brand;
             if (!response.ok || typeof result.brandName == "undefined") {
-                brand = getBrandContengency(bin);
+                brand = getBrandContingency(bin);
             }
 
             if (brand === null) {
@@ -104,9 +99,14 @@ const useInputNumber = (
         }
     };
 
+    const inputChangeHandler = (event) => {
+        setInputValue(cardIndex, event.target.value);
+        changeBrand(formatCardNumber(event.target.value));
+    };
+
     const inputBlurHandler = (event) => {
         validateInputNumber(event.target.value);
-        changeBrand();
+        changeBrand(formatCardNumber(event.target.value));
         setIsActive(false);
     };
 

diff --git a/assets/javascripts/front/reactCheckout/payments/Card/inputs/components/Installments/index.js b/assets/javascripts/front/reactCheckout/payments/Card/inputs/components/Installments/index.js
@@ -1,9 +1,8 @@
 /* jshint esversion: 8 */
 import PropTypes from "prop-types";
+import { SelectControl } from '@wordpress/components';
 import useInstallments from "./useInstallments";
 
-const { ComboboxControl } = wp.components;
-
 const Installments = ({
     label,
     installments,
@@ -27,19 +26,16 @@ const Installments = ({
         );
 
     return (
-        <div className="wc-block-components-select-input pagarme-installments-combobox">
-            <div className={"wc-block-components-combobox is-active"}>
-                <ComboboxControl
-                    className={"wc-block-components-combobox-control"}
-                    label={label}
-                    onChange={installmentsChangeHandler}
-                    value={selectedInstallment}
-                    options={installmentsOptions}
-                    onFilterValueChange={filterHandler}
-                    allowReset={false}
-                    autoComplete={"off"}
-                />
-            </div>
+        <div className="wc-blocks-components-select">
+            <SelectControl
+                label={label}
+                onChange={installmentsChangeHandler}
+                value={selectedInstallment}
+                options={installmentsOptions}
+                onFilterValueChange={filterHandler}
+                allowReset={false}
+                autoComplete={"off"}
+            />
         </div>
     );
 };

diff --git a/assets/javascripts/front/reactCheckout/payments/Card/inputs/utils/cardNumberFormatter.js b/assets/javascripts/front/reactCheckout/payments/Card/inputs/utils/cardNumberFormatter.js
@@ -1,3 +1,4 @@
+/* jshint esversion: 6 */
 export function formatCardNumber(number) {
-    return number.replace(/\s|•/g, "");
+    return number.replace(/\D/g, "");
 }
diff --git a/assets/javascripts/front/reactCheckout/payments/Card/inputs/utils/installmentsFormatter.js b/assets/javascripts/front/reactCheckout/payments/Card/inputs/utils/installmentsFormatter.js
@@ -1,3 +1,4 @@
+/* jshint esversion: 6 */
 const { formatPrice } = window.wc.priceFormat;
 
 const formatInstallmentLabel = ({
@@ -10,7 +11,7 @@ const formatInstallmentLabel = ({
     const formatedPrice = formatPrice(installmentPrice);
     const formatedFinalPrice = formatPrice(finalPrice);
     if (value === 1) {
-        return `${optionLabel} (${formatedPrice})`;
+        return `${value}x ${optionLabel} ${formatedPrice}`;
     }
 
     return `${value}x ${optionLabel} ${formatedPrice} (${formatedFinalPrice}) ${extraText}`.trim();

diff --git a/build/credit_card.asset.php b/build/credit_card.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-data', 'wp-element'), 'version' => 'cf1ceea92a89b27b046f');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-components', 'wp-data', 'wp-element'), 'version' => 'c6f2b0933611ba9b030b');
diff --git a/build/credit_card.js b/build/credit_card.js
diff --git a/src/Helper/Utils.php b/src/Helper/Utils.php
@@ -188,7 +188,7 @@ public static function get_admin_url($path = '')
      */
     public static function get_site_url($path = '')
     {
-        return esc_url(get_home_url(null, $path));
+        return esc_url(get_site_url(null, $path));
     }
 
     /**
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('react', 'react-dom', 'wp-data', 'wp-element'), 'version' => 'cf1ceea92a89b27b046f');
		<?php return array('dependencies' => array('react', 'react-dom', 'wp-components', 'wp-data', 'wp-element'), 'version' => 'c6f2b0933611ba9b030b');