@tonder.io/ionic-full-sdk 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Tonder ionic full SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.js",

package/src/classes/inlineCheckout.ts

@@ -1,7 +1,8 @@
 import { Card, cardItemsTemplate, cardTemplate, CollectorIds } from '../helpers/template'
 import { LiteCheckout } from '@tonder.io/ionic-lite-sdk';
 import {
-  showError
+  showError,
+  showMessage
 } from '../helpers/utils';
 import { initSkyflow } from '../helpers/skyflow'
 import { ThreeDSHandler } from './3dsHandler';
@@ -27,7 +28,6 @@ export type InlineCheckoutConstructor = {
 export class InlineCheckout {
   paymentData = {}
   items = []
-  //@ts-ignore
   baseUrl = "https://stage.tonder.io";
   collectContainer: any = null
   cartTotal?: string | null | number
@@ -59,6 +59,7 @@ export class InlineCheckout {
   platforms?: string[]
   liteCheckout: LiteCheckout
   clientCards: Card[]
+  radioChecked: string | null
 
   constructor ({
     apiKey,
@@ -103,9 +104,11 @@ export class InlineCheckout {
       expirationYear: "collectExpirationYear",
       cvv: "collectCvv",
       tonderPayButton: "tonderPayButton",
-      msgError: "msgError"
+      msgError: "msgError",
+      msgNotification: "msgNotification"
     }
     this.clientCards = []
+    this.radioChecked = "new"
   }
 
   #mountPayButton() {
@@ -160,6 +163,25 @@ export class InlineCheckout {
     });
   }
 
+  #mountRadioButtons () {
+    const radioButtons: NodeListOf<HTMLElement> = document.getElementsByName(`card_selected`);
+    for (const radio of radioButtons) {
+      radio.style.display = "block";
+      radio.onclick = async (event) => {
+        //event.preventDefault();
+        await this.#handleRadioButtonClick(radio);
+      };
+    }
+  }
+
+  async #handleRadioButtonClick (radio: HTMLElement) {
+    const containerForm: HTMLElement | null = document.querySelector(".container-form");
+    if(containerForm) {
+      containerForm.style.display = radio.id === "new" ? "block" : "none";
+    }
+    this.radioChecked = radio.id;
+  }
+
   #handleCustomer(customer: Customer) {
     if (!customer) return
 
@@ -223,6 +245,7 @@ export class InlineCheckout {
       if (queryElement && this.injected) {
         queryElement.innerHTML = cardItemsTemplate(this.customStyles ? true : false, cards)
         clearInterval(injectInterval)
+        this.#mountRadioButtons()
         this.cardsInjected = true
       }
     }, 500);
@@ -311,13 +334,23 @@ export class InlineCheckout {
 
         const total = Number(this.cartTotal)
 
-        var cardTokensSkyflowTonder: any = null;
-        try {
-          const collectResponseSkyflowTonder = await this.collectContainer?.collect();
-          cardTokensSkyflowTonder = await collectResponseSkyflowTonder["records"][0]["fields"];
-        } catch (error) {
-          showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
-          throw error;
+        let cardTokensSkyflowTonder: any = null;
+
+        if(this.radioChecked === "new") {
+          try {
+            const collectResponseSkyflowTonder = await this.collectContainer?.collect();
+            cardTokensSkyflowTonder = await collectResponseSkyflowTonder["records"][0]["fields"];
+          } catch (error) {
+            showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+            throw error;
+          }
+          
+        } else {
+
+          cardTokensSkyflowTonder = {
+            skyflow_id: this.radioChecked
+          }
+          
         }
 
         try {
@@ -339,17 +372,25 @@ export class InlineCheckout {
 
               const { auth_token } = customerResponse;
 
-              const cards = await this.liteCheckout.getCustomerCards(auth_token);
-              
-              if("cards" in cards) {
+              const saveCard: HTMLElement | null = document.getElementById("save-checkout-card");
+
+              if(saveCard && "checked" in saveCard && saveCard.checked) {
 
-                const cardExist = cards.cards.records.find((record: any) => record.fields.skyflow_id === cardTokensSkyflowTonder.skyflow_id)
+                await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
+                
+                this.cardsInjected = false;
+
+                const cards = await this.liteCheckout.getCustomerCards(auth_token);
 
-                if(!cardExist) {
+                if("cards" in cards) {
 
-                  await this.liteCheckout.registerCustomerCard(auth_token, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
+                  const cardsMapped: Card[] = cards.cards.records.map(record => ({ ...record.fields }))
+        
+                  this.loadCardsList(cardsMapped)
 
                 }
+
+                showMessage("Tarjeta registrada con éxito", this.collectorIds.msgNotification);
                 
               }
               
@@ -381,6 +422,7 @@ export class InlineCheckout {
                   date: dateString,
                   order: jsonResponseOrder.id
                 };
+
                 const jsonResponsePayment = await this.liteCheckout.createPayment(
                   paymentItems
                 );

package/src/helpers/template.ts

@@ -8,6 +8,7 @@ export type CollectorIds = {
   cvv: string,
   tonderPayButton: string,
   msgError: string,
+  msgNotification: string,
   cardsListContainer: string
 }
 
@@ -15,25 +16,37 @@ export type Card = {
   cardholder_name: string,
   card_number: string,
   expiration_month: string,
-  expiration_year: string
+  expiration_year: string,
+  skyflow_id: string
 }
 
 export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
 <div class="container-tonder">
   <div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
-  <div id="${collectorIds.holderName}" class="empty-div"></div>
-  <div id="${collectorIds.cardNumber}" class="empty-div"></div>
-  <div class="collect-row">
-    <div id="${collectorIds.expirationMonth}" class="empty-div"></div>
-    <div id="${collectorIds.expirationYear}" class="expiration-year"></div>
-    <div id="${collectorIds.cvv}" class="empty-div"></div>
+  <div class="pay-new-card">
+    <input checked id="new" name="card_selected" type="radio"/>
+    <label class="card-item-label" for="new">
+      <img class="card-image" src="${getCardType("XXXX")}" />
+      <div class="card-number">Pagar con tarjeta</div>
+    </label>
+  </div>
+  <div class="container-form">
+    <div id="${collectorIds.holderName}" class="empty-div"></div>
+    <div id="${collectorIds.cardNumber}" class="empty-div"></div>
+    <div class="collect-row">
+      <div id="${collectorIds.expirationMonth}" class="empty-div"></div>
+      <div id="${collectorIds.expirationYear}" class="expiration-year"></div>
+      <div id="${collectorIds.cvv}" class="empty-div"></div>
+    </div>
+    <div class="checkbox"><input id="save-checkout-card" type="checkbox"><label for="save-checkout-card">Guardar tarjeta para futuros pagos</label></div>
+    <div id="${collectorIds.msgError}"></div>
+    <div id="${collectorIds.msgNotification}"></div>
   </div>
-  <div class="checkbox"><input id="save-checkout-card" type="checkbox"><label for="save-checkout-card">Guardar tarjeta para futuros pagos</label></div>
-  <div id="${collectorIds.msgError}"></div>
   <button id="${collectorIds.tonderPayButton}" class="pay-button">Pagar</button>
 </div>
 
 ${external ? `` : `<style>
+
 .container-tonder {
   background-color: #F9F9F9;
   margin: 0 auto !important;
@@ -42,7 +55,6 @@ ${external ? `` : `<style>
   transition: max-height 0.5s ease-out;
   max-width: 600px;
   border: solid 1px #e3e3e3;
-  max-height: 100vh;
 }
 
 .collect-row {
@@ -77,6 +89,16 @@ ${external ? `` : `<style>
   text-align: left !important;
 }
 
+.message-container{
+  color: green !important;
+  background-color: #90EE90 !important;
+  margin-bottom: 13px !important;
+  font-size: 80% !important;
+  padding: 8px 10px !important;
+  border-radius: 10px !important;
+  text-align: left !important;
+}
+
 .pay-button {
   font-size: 16px;
   font-weight: bold;
@@ -131,7 +153,9 @@ ${external ? `` : `<style>
 
 .cards-list-container {
   display: flex;
-  flex-direction: column
+  flex-direction: column;
+  padding: 0px 10px 0px 10px;
+  gap: 33% 20px;
 }
 
 .checkbox label {
@@ -154,6 +178,29 @@ ${external ? `` : `<style>
   text-align: left;
 }
 
+.pay-new-card {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
+.pay-new-card .card-number {
+  font-size: 14px;
+}
+
+.card-image {
+  width: 27px;
+  height: 20px;
+  text-align: left;
+}
+
 </style>
 `}`
 
@@ -162,26 +209,54 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
   const cardItemsHTML = cards.reduce((total: string, card: Card) => {
     return `${total}
     <div class="card-item">
-      <img class="card-image" src="${getCardType(card.card_number)}" />
-      <div class="card-number">${card.card_number}</div>
-      <div class="card-expiration">${card.expiration_month}/${card.expiration_year}</div>
+        <input id="${card.skyflow_id}" name="card_selected" type="radio"/>
+        <label class="card-item-label" for="${card.skyflow_id}">
+          <img class="card-image" src="${getCardType(card.card_number)}" />
+          <div class="card-number">${card.card_number}</div>
+          <div class="card-expiration">${card.expiration_month}/${card.expiration_year}</div>
+        </label>
     </div>`
   }, ``);
 
   const cardItemStyle = external ? '' : `
     <style>
 
-      .card-item {
+      .card-item-label {
         display: flex;
-        justify-content: space-between;
+        justify-content: start;
         align-items: center;
         color: #1D1D1D;
-        gap: 30px 20px;
+        gap: 33% 20px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+        width: 90%;
+      }
+
+      .card_selected {
+        width: 10%;
+      }
+
+      .card-item {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        gap: 33% 20px;
+      }
+
+      .card-item .card-number {
+        font-size: 14px;
+      }
+
+      .card-item .card-expiration {
+        font-size: 14px;
       }
 
       .card-image {
-        width: 20px;
+        width: 27px;
         height: 20px;
+        text-align: left;
       }
 
     </style>

package/src/helpers/utils.ts

@@ -42,19 +42,34 @@ export function toCurrency(value: string | number) {
 }
 
 export function showError(message: string, containerId: string, payButtonId: string) {
-  var msgErrorDiv: any = document.getElementById(`#${containerId}`);
-  msgErrorDiv.classList.add("error-container");
-  msgErrorDiv.innerHTML = message;
-  setTimeout(function () {
-    try {
-      const selector: any = document.querySelector(`#${payButtonId}`)
-      selector.disabled = false;
-    } catch (error) {}
-    msgErrorDiv.classList.remove("error-container");
-    msgErrorDiv.innerHTML = "";
-  }, 3000);
+  const msgErrorDiv: any = document.getElementById(`${containerId}`);
+  if(msgErrorDiv) {
+    msgErrorDiv.classList.add("error-container");
+    msgErrorDiv.innerHTML = message;
+    setTimeout(function () {
+      try {
+        const selector: any = document.querySelector(`#${payButtonId}`)
+        selector.disabled = false;
+      } catch (error) {}
+      msgErrorDiv.classList.remove("error-container");
+      msgErrorDiv.innerHTML = "";
+    }, 3000);
+  }
 }
 
+export function showMessage(message: string, containerId: string) {
+  const msgDiv: any = document.getElementById(`${containerId}`);
+  if(msgDiv) {
+    msgDiv.classList.add("message-container");
+    msgDiv.innerHTML = message;
+    setTimeout(function () {
+      msgDiv.classList.remove("message-container");
+      msgDiv.innerHTML = "";
+    }, 3000);
+  }
+}
+
+
 export const createObserver = ({ target }: { target: string }): Promise<any> => {
 
   return new Promise((resolve, reject) => {