tonder-web-sdk 1.10.2 → 1.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.10.2",
+  "version": "1.10.6",
   "description": "tonder sdk for integrations",
   "main": "src/index.js",
   "scripts": {

package/src/classes/3dsHandler.js

@@ -39,18 +39,6 @@ export class ThreeDSHandler {
     }
   }
 
-  saveCheckoutId(checkoutId) {
-    localStorage.setItem('checkout_id', JSON.stringify(checkoutId))
-  }
-
-  removeCheckoutId() {
-    localStorage.removeItem("checkout_id")
-  }
-
-  getCurrentCheckoutId() {
-    return JSON.parse(localStorage.getItem("checkout_id"));
-  }
-
   getUrlWithExpiration() {
     const item = JSON.parse(localStorage.getItem("verify_transaction_status"))
     if (!item) return

package/src/classes/globalLoader.js

@@ -0,0 +1,29 @@
+import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
+
+class GlobalLoader {
+  constructor() {
+    this.requestCount = 0;
+  }
+
+  show() {
+    this.requestCount++;
+    const checkoutContainer = document.querySelector("#global-loader");
+    if (checkoutContainer) {
+      checkoutContainer.innerHTML = cardTemplateSkeleton;
+      checkoutContainer.style.display = 'block';
+    }
+  }
+
+  remove() {
+    this.requestCount--;
+    if (this.requestCount <= 0) {
+      this.requestCount = 0;
+      const loader = document.querySelector('#global-loader');
+      if (loader) {
+        loader.style.display = 'none';
+      }
+    }
+  }
+}
+
+export const globalLoader = new GlobalLoader();

package/src/classes/inlineCheckout.js

@@ -1,5 +1,4 @@
 import { cardItemsTemplate, cardTemplate } from '../helpers/template.js'
-import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
 import {
   getBusiness,
   customerRegister,
@@ -19,6 +18,7 @@ import {
 } from '../helpers/utils';
 import { initSkyflow } from '../helpers/skyflow'
 import { ThreeDSHandler } from './3dsHandler.js';
+import { globalLoader } from './globalLoader.js';
 
 
 export class InlineCheckout {
@@ -147,7 +147,6 @@ export class InlineCheckout {
         this.#handleCard(data)
         const response = await this.#checkout()
         this.process3ds.setPayload(response)
-        this.process3ds.saveCheckoutId(response.checkout_id)
         this.callBack(response);
         const payload = await this.handle3dsRedirect(response)
         if (payload) {
@@ -243,38 +242,29 @@ export class InlineCheckout {
 
   async resumeCheckout(response) {
     if (["Failed", "Declined", "Cancelled"].includes(response?.status)) {
+      globalLoader.show()
       const routerItems = {
-        // TODO: Replace this with reponse.checkout_id
-        checkout_id: this.process3ds.getCurrentCheckoutId(),
+        checkout_id: response.checkout?.id,
       };
-      const routerResponse = await startCheckoutRouter(
-        this.baseUrl,
-        this.apiKeyTonder,
-        routerItems
-      );
-      return routerResponse
+      try {
+        const routerResponse = await startCheckoutRouter(
+          this.baseUrl,
+          this.apiKeyTonder,
+          routerItems
+        );
+        return routerResponse
+      } catch (error) {
+        throw error
+      } finally {
+        globalLoader.remove()
+      }
     }
     return response
   }
 
-  #addGlobalLoader() {
-    let checkoutContainer = document.querySelector("#global-loader");
-    if (checkoutContainer) {
-      checkoutContainer.innerHTML = cardTemplateSkeleton;
-      checkoutContainer.style.display = 'block';
-    }
-  }
-
-  #removeGlobalLoader() {
-    const loader = document.querySelector('#global-loader');
-    if (loader) {
-      loader.style.display = 'none';
-    }
-  }
-
   #mount(containerTonderCheckout) {
     containerTonderCheckout.innerHTML = cardTemplate;
-    this.#addGlobalLoader();
+    globalLoader.show()
     this.#mountTonder();
     InlineCheckout.injected = true;
   }
@@ -292,7 +282,7 @@ export class InlineCheckout {
     return await customerRegister(this.baseUrl, this.apiKeyTonder, customer, signal);
   }
 
-  async #mountTonder(getCards = true) {
+  async #mountTonder(getCards = false) {
     this.#mountPayButton()
     try {
       const {
@@ -304,18 +294,11 @@ export class InlineCheckout {
         const customerResponse = await this.getCustomer({ email: this.email });
         if ("auth_token" in customerResponse) {
           const { auth_token } = customerResponse
-          const saveCardCheckbox = document.getElementById('save-card-container');
-
-          saveCardCheckbox.style.display = 'none';
-          console.log("mode: ", this.mode)
-          if (this.mode !== 'production') {
-            const cards = await getCustomerCards(this.baseUrl, auth_token);
-            saveCardCheckbox.style.display = '';
-
-            if ("cards" in cards) {
-              const cardsMapped = cards.cards.map(mapCards)
-              this.#loadCardsList(cardsMapped, auth_token)
-            }
+          const cards = await getCustomerCards(this.baseUrl, auth_token);
+
+          if ("cards" in cards) {
+            const cardsMapped = cards.cards.map(mapCards)
+            this.#loadCardsList(cardsMapped, auth_token)
           }
         }
       }
@@ -330,11 +313,11 @@ export class InlineCheckout {
         this.collectorIds
       );
       setTimeout(() => {
-        this.#removeGlobalLoader()
+        globalLoader.remove()
       }, 800)
     } catch (e) {
       if (e && e.name !== 'AbortError') {
-        this.#removeGlobalLoader()
+        globalLoader.remove()
         showError("No se pudieron cargar los datos del comercio.")
       }
     }
@@ -530,7 +513,7 @@ export class InlineCheckout {
     }
     if (radio.id === "new") {
       if (this.radioChecked !== radio.id) {
-        this.#addGlobalLoader()
+        globalLoader.show()
         this.#mountTonder(false);
         InlineCheckout.injected = true;
       }

package/src/helpers/template.js

@@ -19,12 +19,6 @@ export const cardTemplate = `
       <div id="collectExpirationYear" class="expiration-year"></div>
       <div id="collectCvv" class="empty-div"></div>
     </div>
-    <div class="checkbox" id="save-card-container">
-      <input id="save-checkout-card" type="checkbox">
-      <label for="save-checkout-card">
-        Guardar tarjeta para futuros pagos
-      </label>
-    </div>
     <div id="msgError"></div>
     <div id="msgNotification"></div>
   </div>