tonder-web-sdk 1.16.1 → 1.16.3

package/src/classes/checkout.js

@@ -4,80 +4,84 @@ export class Checkout {
   constructor({
     apiKey,
     type = "payment",
-    backgroundColor="#141414",
-    color="#EBEBEB",
-    cb=()=>{},
-    url="http://checkout.tonder.io/#/"
+    backgroundColor = "#141414",
+    color = "#EBEBEB",
+    cb = () => {},
+    url = "http://checkout.tonder.io/#/",
   }) {
-    this.url = url
-    this.apiKey = apiKey
-    this.type = type
-    this.backgroundColor = backgroundColor
-    this.color = color
-    this.params = ""
-    this.order = {}
-    this.buttonText = "Proceder al pago"
-    this.cb = cb
+    this.url = url;
+    this.apiKey = apiKey;
+    this.type = type;
+    this.backgroundColor = backgroundColor;
+    this.color = color;
+    this.params = "";
+    this.order = {};
+    this.buttonText = "Proceder al pago";
+    this.cb = cb;
 
     window.addEventListener("message", this.receiveMessage.bind(this), false);
   }
-  generateButton = (buttonText) => {
-    this.buttonText = buttonText ? buttonText : this.buttonText
-    this.tonderButton = document.createElement('button');
+  generateButton = buttonText => {
+    this.buttonText = buttonText ? buttonText : this.buttonText;
+    this.tonderButton = document.createElement("button");
     this.tonderButton.innerHTML = this.buttonText;
-    this.stylishButton(this.tonderButton)
-    this.tonderButton.onclick = this.openCheckout
-  }
-  getButton = ({buttonText}) => {
-    this.generateButton(buttonText)
-    return this.tonderButton
-  }
-  mountButton = ({buttonText}) => {
-    this.generateButton(buttonText)
-    const entryPoint = document.getElementById("tonder-checkout")
+    this.stylishButton(this.tonderButton);
+    this.tonderButton.onclick = this.openCheckout;
+  };
+  getButton = ({ buttonText }) => {
+    this.generateButton(buttonText);
+    return this.tonderButton;
+  };
+  mountButton = ({ buttonText }) => {
+    this.generateButton(buttonText);
+    const entryPoint = document.getElementById("tonder-checkout");
     try {
-      entryPoint.innerHTML = ""
-      entryPoint.append(this.tonderButton)
-    } catch(error) {
-      console.error(error)
+      entryPoint.innerHTML = "";
+      entryPoint.append(this.tonderButton);
+    } catch (error) {
+      console.error(error);
     }
-  }
-  stylishButton = (element) => {
-    element.style.backgroundColor = this.backgroundColor
-    element.style.color = this.color
-    element.style.display = 'flex'
-    element.style.justifyContent = 'center'
-    element.style.border = 'none'
-    element.style.padding = '1rem'
-    element.style.borderRadius = '10px'
-    element.style.fontSize = '1rem'
-    element.style.width = '100%'
-    element.style.boxShadow = '0 3px 6px 0 rgba(0,0,0,0.16)'
-  }
-  setOrder = ({products, email, shippingCost }) => {
-    let _order = {}
-    if (products) _order.products = products 
-    if (email) _order.email = email 
-    if (shippingCost) _order.shippingCost = shippingCost
-    this.order = {...this.order, ..._order}
-    return this.order
-  }
+  };
+  stylishButton = element => {
+    element.style.backgroundColor = this.backgroundColor;
+    element.style.color = this.color;
+    element.style.display = "flex";
+    element.style.justifyContent = "center";
+    element.style.border = "none";
+    element.style.padding = "1rem";
+    element.style.borderRadius = "10px";
+    element.style.fontSize = "1rem";
+    element.style.width = "100%";
+    element.style.boxShadow = "0 3px 6px 0 rgba(0,0,0,0.16)";
+  };
+  setOrder = ({ products, email, shippingCost }) => {
+    let _order = {};
+    if (products) _order.products = products;
+    if (email) _order.email = email;
+    if (shippingCost) _order.shippingCost = shippingCost;
+    this.order = { ...this.order, ..._order };
+    return this.order;
+  };
   openTabListener = (tab, button) => {
     const tabInterval = setInterval(() => {
       if (tab.closed) {
         clearInterval(tabInterval);
-        button.disabled = false
-        button.innerHTML = this.buttonText
+        button.disabled = false;
+        button.innerHTML = this.buttonText;
       }
-    }, 500)
-  }
+    }, 500);
+  };
   openCheckout = () => {
-    const queryString = this.getUrlParams()
-    const encrypted = AES.encrypt(queryString, 'url-params-encrypt').toString()
+    const queryString = this.getUrlParams();
+    const encrypted = AES.encrypt(queryString, "url-params-encrypt").toString();
     const encodedURL = encodeURIComponent(encrypted);
     this.params = "?" + encodedURL;
-    const newWindow = window.open(this.url + this.params, '_blank', `width=1200,height=$800,left=0,top=0`);
-    this.tonderButton.disabled = true
+    const newWindow = window.open(
+      this.url + this.params,
+      "_blank",
+      `width=1200,height=$800,left=0,top=0`,
+    );
+    this.tonderButton.disabled = true;
     this.tonderButton.innerHTML = `
       <div class="loader"></div>
       <style>
@@ -102,24 +106,24 @@ export class Checkout {
       100% { transform: rotate(360deg); }
     }
       </style>
-      `
-    this.openTabListener(newWindow, this.tonderButton)
-  }
+      `;
+    this.openTabListener(newWindow, this.tonderButton);
+  };
   getUrlParams = () => {
-    const params = { apiKey: this.apiKey, ...this.order, type: this.type}
+    const params = { apiKey: this.apiKey, ...this.order, type: this.type };
     if (params.products) {
-      params.products = JSON.stringify(params.products)
+      params.products = JSON.stringify(params.products);
     }
     const queryString = new URLSearchParams(params).toString();
-    return queryString
-  }
+    return queryString;
+  };
   receiveMessage(event) {
     // Parse data if it is possible, in case of error it will return the raw data.
     try {
-      const data = JSON.parse(event.data)
-      this.cb(data)
-    } catch(error) {
-      this.cb(event.data)
+      const data = JSON.parse(event.data);
+      this.cb(data);
+    } catch (error) {
+      this.cb(event.data);
     }
   }
-}
+}

package/src/classes/globalLoader.js

@@ -1,4 +1,5 @@
-import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
+import { cardTemplateSkeleton } from "../helpers/template-skeleton.js";
+import { HTML_IDS } from "../shared/constants/htmlTonderIds";
 
 class GlobalLoader {
   constructor() {
@@ -7,10 +8,10 @@ class GlobalLoader {
 
   show() {
     this.requestCount++;
-    const checkoutContainer = document.querySelector("#global-loader");
+    const checkoutContainer = document.querySelector(`#${HTML_IDS.globalLoader}`);
     if (checkoutContainer) {
       checkoutContainer.innerHTML = cardTemplateSkeleton;
-      checkoutContainer.style.display = 'block';
+      checkoutContainer.style.display = "block";
     }
   }
 
@@ -18,10 +19,11 @@ class GlobalLoader {
     this.requestCount--;
     if (this.requestCount <= 0) {
       this.requestCount = 0;
-      const loader = document.querySelector('#global-loader');
-      if (loader) {
-        loader.style.display = 'none';
-      }
+      const loaders = document.querySelectorAll(`#${HTML_IDS.globalLoader}`);
+
+      loaders.forEach(loader => {
+        loader.style.display = "none";
+      });
     }
   }
 }