tonder-web-sdk 1.9.2-beta.5 → 1.9.3-beta.1

package/package.json

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

package/src/classes/inlineCheckout.js

@@ -24,6 +24,7 @@ import { ThreeDSHandler } from './3dsHandler.js';
 export class InlineCheckout {
   static injected = false;
   static cardsInjected = false
+  deletingCards = [];
   customer = {}
   items = []
   baseUrl = null
@@ -64,6 +65,7 @@ export class InlineCheckout {
     this.baseUrl = this.#getBaseUrl()
 
     this.abortController = new AbortController()
+    this.abortRefreshCardsController = new AbortController()
     this.process3ds = new ThreeDSHandler(
       { apiKey: apiKey, baseUrl: this.baseUrl, successUrl: successUrl }
     )
@@ -516,16 +518,29 @@ export class InlineCheckout {
       if(cardClicked) {
         cardClicked.style.display = "none"
       }
-      await deleteCustomerCard(this.baseUrl, customerToken, skyflow_id)
-      this.cardsInjected = false
-      const cards = await getCustomerCards(this.baseUrl, customerToken)
-      if("cards" in cards) {
-        const cardsMapped = cards.cards.map(mapCards)
-        this.#loadCardsList(cardsMapped, customerToken)
+      try{
+      this.deletingCards.push(skyflow_id);
+      if (this.abortRefreshCardsController) {
+        this.abortRefreshCardsController.abort();
+        this.abortRefreshCardsController = new AbortController();
       }
+      await deleteCustomerCard(this.baseUrl, customerToken, skyflow_id)
+    }catch{
+    } finally {
+      this.deletingCards = this.deletingCards.filter(id => id !== skyflow_id);
+      this.#refreshCardOnDelete(customerToken)
+    }
+    }
+  }
+  async #refreshCardOnDelete(customerToken){
+    if(this.deletingCards.length > 0) return;
+    this.cardsInjected = false
+    const cards = await getCustomerCards(this.baseUrl, customerToken, "", this.abortRefreshCardsController.signal)
+    if("cards" in cards) {
+      const cardsMapped = cards.cards.map(mapCards)
+      this.#loadCardsList(cardsMapped, customerToken)
     }
   }
-
   #unmountForm () {
     InlineCheckout.injected = false
     if(this.collectContainer) {

package/src/data/api.js

@@ -145,7 +145,7 @@ export async function deleteCustomerCard(baseUrlTonder, customerToken, skyflowId
       headers: {
         'Authorization': `Token ${customerToken}`,
         'Content-Type': 'application/json'
-      },
+      }
     });
 
     if (response.ok) return true;
@@ -154,7 +154,7 @@ export async function deleteCustomerCard(baseUrlTonder, customerToken, skyflowId
     throw buildErrorResponseFromCatch(error);
   }
 }
-export async function getCustomerCards(baseUrlTonder, customerToken, query = "") {
+export async function getCustomerCards(baseUrlTonder, customerToken, query = "", signal) {
   try {
     const response = await fetch(`${baseUrlTonder}/api/v1/cards/${query}`, {
       method: 'GET',
@@ -162,6 +162,7 @@ export async function getCustomerCards(baseUrlTonder, customerToken, query = "")
         'Authorization': `Token ${customerToken}`,
         'Content-Type': 'application/json'
       },
+      signal
     });
 
     if (response.ok) return await response.json();

package/src/helpers/skyflow.js

@@ -209,7 +209,7 @@ function updateErrorLabel(element, errorStyles, color = "" ){
       errorTextStyles: {
         ...errorStyles,
         base: {
-          ...errorStyles.base,
+          ...(errorStyles.base && {...errorStyles.base}),
           ...(color != "" && {color})
         }
       }