tonder-web-sdk 1.11.0-beta.2 → 1.11.1

package/.idea/aws.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="accountSettings">
+    <option name="activeProfile" value="profile:default" />
+    <option name="activeRegion" value="us-east-1" />
+    <option name="recentlyUsedProfiles">
+      <list>
+        <option value="profile:default" />
+      </list>
+    </option>
+    <option name="recentlyUsedRegions">
+      <list>
+        <option value="us-east-1" />
+      </list>
+    </option>
+  </component>
+</project>

package/.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

package/.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.12" project-jdk-type="Python SDK" />
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/.idea/workspace.xml

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="37fc62e5-7dd0-4a2e-b68c-304069cdf5bd" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/classes/inlineCheckout.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/classes/inlineCheckout.js" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectColorInfo"><![CDATA[{
+  "customColor": "",
+  "associatedIndex": 2
+}]]></component>
+  <component name="ProjectId" id="2iy5RvaLleBBnn8yOfQNLpzKK66" />
+  <component name="ProjectViewState">
+    <option name="autoscrollFromSource" value="true" />
+    <option name="autoscrollToSource" value="true" />
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="openDirectoriesWithSingleClick" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "git-widget-placeholder": "Merging TNDR-1140",
+    "nodejs_package_manager_path": "npm",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-python-sdk-50da183f06c8-2887949eec09-com.jetbrains.pycharm.pro.sharedIndexes.bundled-PY-233.13135.95" />
+      </set>
+    </attachedChunks>
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="37fc62e5-7dd0-4a2e-b68c-304069cdf5bd" name="Changes" comment="" />
+      <created>1720449973301</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1720449973301</updated>
+      <workItem from="1720449976262" duration="22000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonder-web-sdk",
-  "version": "1.11.0-beta.2",
+  "version": "1.11.1",
   "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

@@ -21,6 +21,7 @@ import {
 } from '../helpers/utils';
 import { initSkyflow } from '../helpers/skyflow'
 import { ThreeDSHandler } from './3dsHandler.js';
+import { globalLoader } from './globalLoader.js';
 
 
 export class InlineCheckout {
@@ -152,7 +153,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) {
@@ -248,38 +248,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({renderPaymentButton: this.renderPaymentButton, customStyles: this.customStyles});
-    this.#addGlobalLoader();
+    globalLoader.show()
     this.#mountTonder();
     InlineCheckout.injected = true;
   }
@@ -308,7 +299,8 @@ export class InlineCheckout {
       console.warn("Error getting APMS")
     }
   }
-  async #mountTonder(getCards = true) {
+
+  async #mountTonder(getCards = false) {
     this.#mountPayButton()
     try {
       const {
@@ -319,23 +311,16 @@ 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';
-          if (this.mode !== 'production') {
-            const cards = await getCustomerCards(this.baseUrl, auth_token);
-            saveCardCheckbox.style.display = '';
+          const cards = await getCustomerCards(this.baseUrl, auth_token);
 
-            if ("cards" in cards) {
-              const cardsMapped = cards.cards.map(mapCards)
-              this.#loadCardsList(cardsMapped, auth_token)
-            }
+          if ("cards" in cards) {
+            const cardsMapped = cards.cards.map(mapCards)
+            this.#loadCardsList(cardsMapped, auth_token)
           }
-
-
         }
       }
-      this.#mountAPMs();
+      
+      await this.#mountAPMs();
 
       this.collectContainer = await initSkyflow(
         vault_id,
@@ -347,11 +332,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.")
       }
     }
@@ -464,7 +449,7 @@ export class InlineCheckout {
       );
 
       const selected_apm = this.apmsData ? this.apmsData.find((iapm) => iapm.pk ===  this.radioChecked):{};
-
+      
       // Checkout router
       const routerItems = {
         name: this.firstName || "",
@@ -488,7 +473,7 @@ export class InlineCheckout {
         metadata: this.metadata,
         browser_info: getBrowserInfo(),
         currency: this.currency,
-        ...( !!selected_apm 
+        ...( selected_apm && Object.keys(selected_apm).length > 0
           ? {payment_method: selected_apm.payment_method}
           : {card: cardTokens}
         )
@@ -537,7 +522,7 @@ export class InlineCheckout {
           .filter((apm) =>
             clearSpace(apm.category.toLowerCase()) !== 'cards' && apm.status.toLowerCase() === 'active')
           .sort((a, b) => a.priority - b.priority);
-  
+
         queryElement.innerHTML = apmItemsTemplate(filteredAndSortedApms);
         clearInterval(injectInterval);
         this.#mountRadioButtons();
@@ -545,7 +530,7 @@ export class InlineCheckout {
       }
     }, 500);
   }
-  
+
   #mountRadioButtons(token = '') {
     const radioButtons = document.getElementsByName(`card_selected`);
     for (const radio of radioButtons) {
@@ -571,7 +556,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 = (data) => `
       <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 pagos futuros
-      </label>
-    </div>
     <div id="msgError"></div>
     <div id="msgNotification"></div>
   </div>
@@ -184,7 +178,6 @@ export const cardTemplate = (data) => `
 .apms-list-container {
   display: flex;
   flex-direction: column;
-  padding: ;
   gap: 33% 20px;
   max-height: 300px;
   overflow-y: auto;
@@ -487,14 +480,18 @@ export const cardItemsTemplate = (cards) => {
 }
 
 export const apmItemsTemplate = (apms) => {
-  
+
   const apmItemsHTML = apms.reduce((total, apm) => {
     const apm_data = getAPMType(apm.payment_method);
     return `${total}
     <div class="apm-item" id="card_container-${apm.pk}">
         <input id="${apm.pk}" class="card_selected" name="card_selected" type="radio"/>
         <label class="apm-item-label" for="${apm.pk}">
-          <img class="apm-image" src="${apm_data.icon}" />
+          
+          <div class="apm-image">
+            <div class="apm-image-border"></div>
+            <img src="${apm_data.icon}" />
+          </div>
           <div class="apm-name">${apm_data.label}</div>
         </label>
     </div>`
@@ -530,13 +527,26 @@ export const apmItemsTemplate = (apms) => {
       .apm-item .apm-name {
         font-size: 16px;
       }
-
       .apm-image {
+        width: 30px;
+        height: 30px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .apm-image img {
         width: auto;
         height: 30px;
-        text-align: left;
-        border: 1px solid #e2e8f0;
-        border-radius: 8px;
+      }
+      .apm-image-border{
+        position: absolute;
+        border: 1px solid #bababa36;
+        border-radius: 4px;
+        pointer-events: none;
+        box-sizing: border-box;
+        width: 100%;
+        height: 97%;
       }
 
       .card_selected {

package/src/helpers/utils.js

@@ -340,8 +340,11 @@ export const getAPMType = (scheme_data) => {
     },
   };
   
-  const default_image = "https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png";
-  return PAYMENT_METHODS_CATALOG[scheme] || default_image;
+  const _default = {
+    icon: "https://d35a75syrgujp0.cloudfront.net/payment_methods/store.png",
+    label: ""
+  };
+  return PAYMENT_METHODS_CATALOG[scheme] || _default;
 }
 
 

package/src/index-dev.js

@@ -104,12 +104,11 @@ const successUrl = "http://127.0.0.1:8080/success"
 // const apiKey = "8365683bdc33dd6d50fe2397188d79f1a6765852";
 
 const inlineCheckout = new InlineCheckout({
-  mode: 'development',
+  mode: 'stage',
   apiKey,
   returnUrl,
   successUrl,
-  styles: customStyles,
-  renderPaymentButton: true
+  styles: customStyles
 });
 inlineCheckout.configureCheckout({customer: checkoutData.customer})
 inlineCheckout.injectCheckout();