@tonder.io/ionic-full-sdk 0.0.13-beta → 0.0.15-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/ionic-full-sdk",
-  "version": "0.0.13-beta",
+  "version": "0.0.15-beta",
   "description": "Tonder ionic full SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.js",
@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tonder.io/ionic-lite-sdk": "^0.0.21-beta",
+    "@tonder.io/ionic-lite-sdk": "^0.0.22-beta",
     "crypto-js": "^4.1.1",
     "skyflow-js": "^1.34.1"
   },

package/src/classes/inlineCheckout.ts

@@ -204,6 +204,10 @@ export class InlineCheckout {
     const id = button.attributes.getNamedItem("id")
     const skyflow_id = id?.value?.split("_")?.[2]
     if(skyflow_id) {
+      const cardClicked: HTMLElement | null = document.querySelector(`#card_container-${skyflow_id}`);
+      if(cardClicked) {
+        cardClicked.style.display = "none"
+      }
       await this.liteCheckout.deleteCustomerCard(customerToken, skyflow_id)
       this.cardsInjected = false
       const cards = await this.liteCheckout.getCustomerCards(customerToken)
@@ -220,7 +224,9 @@ export class InlineCheckout {
       containerForm.style.display = radio.id === "new" ? "block" : "none";
     }
     if(radio.id === "new") {
-      await this.#mountForm();
+      if(this.radioChecked !== radio.id) {
+        await this.#mountForm();
+      }
     } else {
       this.#unmountForm();
     }
@@ -462,7 +468,7 @@ export class InlineCheckout {
 
             if("auth_token" in customerResponse) {
 
-              const { auth_token } = customerResponse;
+              const { auth_token, id: cutomerId } = customerResponse;
 
               const saveCard: HTMLElement | null = document.getElementById("save-checkout-card");
 
@@ -512,7 +518,8 @@ export class InlineCheckout {
                   business_pk: business.pk,
                   amount: total,
                   date: dateString,
-                  order: jsonResponseOrder.id
+                  order_id: jsonResponseOrder.id,
+                  client_id: cutomerId
                 };
 
                 const jsonResponsePayment = await this.liteCheckout.createPayment(

package/src/helpers/skyflow.ts

@@ -63,9 +63,20 @@ export async function initSkyflow(
     type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
     params: {
       max: 70,
+      error: "El campo nombre del titular debe tener menos de 70 caracteres"
     },
   };
 
+  const regexEmpty = RegExp("^(?!\s*$).+");
+
+  const regexMatchRule = {
+    type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
+    params: {
+      regex: regexEmpty,
+      error: "El campo es requerido" // Optional, default error is 'VALIDATION FAILED'.
+    }
+  }
+
   const cardHolderNameElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "cardholder_name",
@@ -73,13 +84,9 @@ export async function initSkyflow(
     label: "Titular de la tarjeta",
     placeholder: "Nombre como aparece en la tarjeta",
     type: Skyflow.ElementType.CARDHOLDER_NAME,
-    validations: [lengthMatchRule],
+    validations: [regexMatchRule, lengthMatchRule],
   });
 
-  if("setError" in cardHolderNameElement) {
-    cardHolderNameElement.setError('Inválido')
-  }
-
   // Create collect elements.
   const cardNumberElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
@@ -92,12 +99,9 @@ export async function initSkyflow(
     label: "Número de tarjeta",
     placeholder: "1234 1234 1234 1234",
     type: Skyflow.ElementType.CARD_NUMBER,
+    validations: [regexMatchRule],
   });
 
-  if("setError" in cardNumberElement) {
-    cardNumberElement.setError('Inválido')
-  }
-
   const cvvElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "cvv",
@@ -105,11 +109,8 @@ export async function initSkyflow(
     label: "CVC/CVV",
     placeholder: "3-4 dígitos",
     type: Skyflow.ElementType.CVV,
+    validations: [regexMatchRule],
   });
-  
-  if("setError" in cvvElement) {
-    cvvElement.setError('Inválido')
-  }
 
   const expiryMonthElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
@@ -118,12 +119,9 @@ export async function initSkyflow(
     label: "Fecha de expiración",
     placeholder: "MM",
     type: Skyflow.ElementType.EXPIRATION_MONTH,
+    validations: [regexMatchRule],
   });
 
-  if("setError" in expiryMonthElement) {
-    expiryMonthElement.setError('Inválido')
-  }
-
   const expiryYearElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "expiration_year",
@@ -131,12 +129,9 @@ export async function initSkyflow(
     label: "",
     placeholder: "AA",
     type: Skyflow.ElementType.EXPIRATION_YEAR,
+    validations: [regexMatchRule],
   });
 
-  if("setError" in expiryYearElement) {
-    expiryYearElement.setError('Inválido')
-  }
-
   await mountElements(
     { id: collectorIds.cardNumber, element: cardNumberElement },
     { id: collectorIds.cvv, element: cvvElement },

package/src/helpers/template.ts

@@ -25,7 +25,7 @@ export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
 <div class="container-tonder">
   <div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
   <div class="pay-new-card">
-    <input checked id="new" name="card_selected" type="radio"/>
+    <input checked id="new" class="card_selected" name="card_selected" type="radio"/>
     <label class="card-item-label-new" for="new">
       <img class="card-image" src="${getCardType("XXXX")}" />
       <div class="card-number">Pagar con tarjeta</div>
@@ -98,7 +98,7 @@ ${external ? `` : `<style>
 }
 
 .message-container{
-  color: green !important;
+  color: #3bc635 !important;
   background-color: #DAFCE4 !important;
   margin-bottom: 13px !important;
   font-size: 80% !important;
@@ -224,6 +224,86 @@ ${external ? `` : `<style>
   width: 90%;
 }
 
+.card_selected {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 100%;
+  border: 1px #3bc635 solid;
+  color: #3bc635;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:before {
+  width: 8px;
+  height: 8px;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  background-color: #3bc635;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:checked {
+  border: 1px #3bc635 solid;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 100%;
+  color: #3bc635;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:checked:before {
+  content: "";
+  border: 1px #3bc635 solid;
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  background-color: #3bc635;
+  opacity: 50;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card_selected:hover:before {
+  width: 8px;
+  height: 8px;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  background-color: #3bc635;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  opacity: 10;
+}
+
 </style>
 `}`
 
@@ -231,16 +311,16 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
   
   const cardItemsHTML = cards.reduce((total: string, card: Card) => {
     return `${total}
-    <div class="card-item">
-        <input id="${card.skyflow_id}" name="card_selected" type="radio"/>
+    <div class="card-item" id="card_container-${card.skyflow_id}">
+        <input id="${card.skyflow_id}" class="card_selected" name="card_selected" type="radio"/>
         <label class="card-item-label" for="${card.skyflow_id}">
           <img class="card-image" src="${getCardType(card.card_scheme)}" />
           <div class="card-number">${card.card_number}</div>
           <div class="card-expiration">Exp. ${card.expiration_month}/${card.expiration_year}</div>
           <div class="card-delete-icon">
             <button id="delete_button_${card.skyflow_id}" class="card-delete-button">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.663 1.5h-1.326c-1.069 0-1.49.09-1.921.27-.432.181-.792.453-1.084.82-.292.365-.493.746-.784 1.774L7.368 5H5a1 1 0 0 0 0 2h.563l.703 11.25c.082 1.32.123 1.98.407 2.481a2.5 2.5 0 0 0 1.083 1.017C8.273 22 8.935 22 10.258 22h3.484c1.323 0 1.985 0 2.502-.252a2.5 2.5 0 0 0 1.083-1.017c.284-.5.325-1.16.407-2.482L18.437 7H19a1 1 0 1 0 0-2h-2.367l-.18-.636c-.292-1.028-.493-1.409-.785-1.775a2.694 2.694 0 0 0-1.084-.819c-.431-.18-.852-.27-1.92-.27zm1.89 3.5-.025-.09c-.203-.717-.29-.905-.424-1.074a.696.696 0 0 0-.292-.221c-.2-.084-.404-.115-1.149-.115h-1.326c-.745 0-.95.031-1.149.115a.696.696 0 0 0-.292.221c-.135.169-.221.357-.424 1.074L9.446 5h5.108zM9.61 8.506a.75.75 0 0 0-.724.776l.297 8.495a.75.75 0 0 0 1.499-.053l-.297-8.494a.75.75 0 0 0-.775-.724zm4.008.724a.75.75 0 0 1 1.499.052l-.297 8.495a.75.75 0 0 1-1.499-.053l.297-8.494z" fill="currentColor"/>
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+                <path fill="currentColor" d="M292.309-140.001q-30.308 0-51.308-21t-21-51.308V-720h-40v-59.999H360v-35.384h240v35.384h179.999V-720h-40v507.691q0 30.308-21 51.308t-51.308 21H292.309ZM376.155-280h59.999v-360h-59.999v360Zm147.691 0h59.999v-360h-59.999v360Z"/>
               </svg>
             </button>
           </div>
@@ -266,10 +346,6 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
         width: 90%;
       }
 
-      .card_selected {
-        width: 10%;
-      }
-
       .card-item {
         display: flex;
         justify-content: start;
@@ -294,10 +370,95 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
       }
 
       .card-delete-button {
+        background-color: transparent !important;
+        color: #000000 !important;
+      }
+
+      .card-delete-button:hover {
         background-color: transparent !important;
         color: #D91C1C !important;
       }
 
+      .card_selected {
+        position: relative;
+        width: 16px;
+        height: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        border: 1px #3bc635 solid;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 0;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked {
+        border: 1px #3bc635 solid;
+        position: relative;
+        width: 16px;
+        height: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked:before {
+        content: "";
+        border: 1px #3bc635 solid;
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 50;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:hover:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        opacity: 10;
+      }
+
     </style>
   `
   const cardItem = `

package/src/helpers/utils.ts

@@ -131,6 +131,6 @@ export const mapCards = (card: CardResponse) => {
   const newCard = { ...card.fields };
   const carArr = newCard.card_number.split("-");
   const last = carArr[carArr.length - 1];
-  newCard.card_number = `****-${last}`;
+  newCard.card_number = `••••${last}`;
   return newCard;
 }