tonder-web-sdk 1.10.3 → 1.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.10.3",
+  "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;
   }
@@ -323,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.")
       }
     }
@@ -523,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;
       }