[AI-111] - Magento Infinite Loader Fix (#54)

* AI-111: Retry when the form needs to be rendered but the element is still not available * Increase version
conekta · Dec 6, 2024 · 470d400 · 470d400
1 parent ba5442b
commit 470d400
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ![alt tag](https://conekta.com/static/assets/Home/conekta-logo-blue-full.svg)
 
-Magento 2 Plugin v.5.1.6 (Stable)
+Magento 2 Plugin v.5.1.7 (Stable)
 ========================
 
 Installation for Magento 2.3
@@ -13,7 +13,7 @@ composer config repositories.conekta git https://github.com/conekta/customer-mag
 
 2. Add composer dependency
 ```bash
-composer require conekta/conekta_payments 5.1.6
+composer require conekta/conekta_payments 5.1.7
 ```
 
 3. Update Magento

diff --git a/composer.json b/composer.json
@@ -6,7 +6,7 @@
         "conekta/conekta-php": "v6.0.8"
     },
     "type": "magento2-module",
-    "version": "5.1.6",
+    "version": "5.1.7",
     "license": [
         "OSL-3.0",
         "AFL-3.0"

diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml
@@ -3,7 +3,7 @@
     <system>
         <section id="payment">
             <group id="conekta" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="0">
-                <comment><![CDATA[<div class="conekta-payment-logo"></div><div class="conekta-payment-text">Conekta Configuration. (v5.1.6) </div>]]></comment>
+                <comment><![CDATA[<div class="conekta-payment-logo"></div><div class="conekta-payment-text">Conekta Configuration. (v5.1.7) </div>]]></comment>
                 <fieldset_css>complex conekta-section</fieldset_css>
                 <frontend_model>Magento\Paypal\Block\Adminhtml\System\Config\Fieldset\Payment</frontend_model>
                 <!--global-->

diff --git a/etc/config.xml b/etc/config.xml
@@ -100,7 +100,7 @@
             <global>
                 <api_version><![CDATA[2.0.0]]></api_version>
                 <plugin_type><![CDATA[Magento 2]]></plugin_type>
-                <plugin_version><![CDATA[5.1.6]]></plugin_version>
+                <plugin_version><![CDATA[5.1.7]]></plugin_version>
             </global>
         </conekta>
     </default>

diff --git a/etc/module.xml b/etc/module.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
-    <module name="Conekta_Payments" setup_version="5.1.6">
+    <module name="Conekta_Payments" setup_version="5.1.7">
         <sequence>
             <module name="Magento_Sales"/>
             <module name="Magento_Payment"/>

diff --git a/view/frontend/web/js/view/payment/method-renderer/embedform.js b/view/frontend/web/js/view/payment/method-renderer/embedform.js
@@ -260,6 +260,7 @@ define(
                             self.checkoutId(response.checkout_id);
 
                             if (self.checkoutId()) {
+                                self.renderizeEmbedFormTimes = 0
                                 self.renderizeEmbedForm();
                             } else {
                                 self.isFormLoading(false);
@@ -279,32 +280,42 @@ define(
 
             renderizeEmbedForm: function () {
                 var self = this;
-                document.getElementById("conektaIframeContainer").innerHTML = "";
-                window.ConektaCheckoutComponents.Integration({
-                    targetIFrame: '#conektaIframeContainer',
-                    checkoutRequestId: this.checkoutId(),
-                    publicKey: this.getPublicKey(),
-                    paymentMethods: this.getPaymenMethods(),
-                    options: {
-                        theme: 'default'
-                    },
-                    onCreateTokenSucceeded: function (token) {
-
-                    },
-                    onCreateTokenError: function (error) {
-                        console.error(error);
-                    },
-                    onFinalizePayment: function (event) {
-                        self.iframOrderData(event);
-                        self.beforePlaceOrder();
-                    },
-                    onErrorPayment: function(a) {
-                        self.conektaError("Ocurrió un error al procesar el pago. Por favor, inténtalo de nuevo.");
-                    },
-                });
-
-                $('#conektaIframeContainer').find('iframe').attr('data-cy', 'the-frame');
-                self.isFormLoading(false);
+                try {
+                    document.getElementById("conektaIframeContainer").innerHTML = "";
+                    window.ConektaCheckoutComponents.Integration({
+                        targetIFrame: '#conektaIframeContainer',
+                        checkoutRequestId: this.checkoutId(),
+                        publicKey: this.getPublicKey(),
+                        paymentMethods: this.getPaymenMethods(),
+                        options: {
+                            theme: 'default'
+                        },
+                        onCreateTokenSucceeded: function (token) {
+
+                        },
+                        onCreateTokenError: function (error) {
+                            console.error(error);
+                        },
+                        onFinalizePayment: function (event) {
+                            self.iframOrderData(event);
+                            self.beforePlaceOrder();
+                        },
+                        onErrorPayment: function(a) {
+                            self.conektaError("Ocurrió un error al procesar el pago. Por favor, inténtalo de nuevo.");
+                        },
+                    });
+
+                    $('#conektaIframeContainer').find('iframe').attr('data-cy', 'the-frame');
+                    self.isFormLoading(false);
+                } catch {
+                    if(self.renderizeEmbedFormTimes > 4) 
+                        return self.isFormLoading(false);
+
+                    self.renderizeEmbedFormTimes++;
+                    setTimeout(function() { 
+                        self.renderizeEmbedForm();
+                    }, 500);
+                }
             },
 
             getData: function () {