@tonder.io/ionic-full-sdk 0.0.20-beta → 0.0.22-beta

package/package.json

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

package/src/helpers/skyflow.ts

@@ -77,16 +77,6 @@ export async function initSkyflow(
     }
   }
 
-  const regexJustText = /^[A-Za-z\s]*$/;
-
-  const regexJustTextRule = {
-    type: Skyflow.ValidationRuleType.REGEX_MATCH_RULE,
-    params: {
-      regex: regexJustText,
-      error: "Debe contener solo letras"
-    }
-  }
-
   const cardHolderNameElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "cardholder_name",
@@ -94,9 +84,47 @@ export async function initSkyflow(
     label: "Titular de la tarjeta",
     placeholder: "Nombre como aparece en la tarjeta",
     type: Skyflow.ElementType.CARDHOLDER_NAME,
-    validations: [regexMatchRule, lengthMatchRule, regexJustTextRule],
+    validations: [lengthMatchRule, regexMatchRule],
   });
 
+  if("on" in cardHolderNameElement) {
+
+    cardHolderNameElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      let element = document.getElementById(
+          "errorCardHolderIdTonder",
+      );
+
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+    });
+
+    cardHolderNameElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.holderName
+      );
+
+      let element = document.getElementById(
+        "errorCardHolderIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        let errorLabel = document.createElement("div");
+        errorLabel.classList.add("error-custom-inputs-tonder");
+        errorLabel.id = "errorCardHolderIdTonder";
+        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo titular de la tarjeta es inválido";
+        tonderContainer?.appendChild(errorLabel);
+      }
+
+    });
+
+  }
+
   // Create collect elements.
   const cardNumberElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
@@ -112,6 +140,45 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
+  if("on" in cardNumberElement) {
+
+    cardNumberElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      let element = document.getElementById(
+          "errorCardNumberIdTonder",
+      );
+
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+
+    });
+
+    cardNumberElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.cardNumber
+      );
+
+      let element = document.getElementById(
+        "errorCardNumberIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        let errorLabel = document.createElement("div");
+        errorLabel.classList.add("error-custom-inputs-tonder");
+        errorLabel.id = "errorCardNumberIdTonder";
+        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo número de tarjeta es inválido";
+        tonderContainer?.appendChild(errorLabel);
+      }
+
+    });
+
+  }
+
   const cvvElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "cvv",
@@ -122,6 +189,44 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
+  if("on" in cvvElement) {
+
+    cvvElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      let element = document.getElementById(
+          "errorCvvIdTonder",
+      );
+
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+    });
+
+    cvvElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.cvv
+      );
+
+      let element = document.getElementById(
+        "errorCvvIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        let errorLabel = document.createElement("div");
+        errorLabel.classList.add("error-custom-inputs-tonder");
+        errorLabel.id = "errorCvvIdTonder";
+        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo es inválido";
+        tonderContainer?.appendChild(errorLabel);
+      }
+
+    });
+
+  }
+
   const expiryMonthElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "expiration_month",
@@ -132,6 +237,44 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
+  if("on" in expiryMonthElement) {
+
+    expiryMonthElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      let element = document.getElementById(
+          "errorExpiryMonthIdTonder",
+      );
+
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+    });
+
+    expiryMonthElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.expirationMonth
+      );
+
+      let element = document.getElementById(
+        "errorExpiryMonthIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        let errorLabel = document.createElement("div");
+        errorLabel.classList.add("error-custom-inputs-tonder");
+        errorLabel.id = "errorExpiryMonthIdTonder";
+        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo es inválido";
+        tonderContainer?.appendChild(errorLabel);
+      }
+
+    });
+
+  }
+
   const expiryYearElement: CollectElement | RevealElement | ComposableElement = await collectContainer.create({
     table: "cards",
     column: "expiration_year",
@@ -142,6 +285,44 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
+  if("on" in expiryYearElement) {
+
+    expiryYearElement.on(Skyflow.EventName.CHANGE, (state: any) => {
+
+      let element = document.getElementById(
+          "errorExpiryYearIdTonder",
+      );
+
+      if (element && state.isValid && !state.isEmpty) {
+        element.remove();
+      }
+    });
+
+    expiryYearElement.on(Skyflow.EventName.BLUR, (state: any) => {
+      let tonderContainer = document.getElementById(
+        collectorIds.expirationYear
+      );
+
+      let element = document.getElementById(
+        "errorExpiryYearIdTonder",
+      );
+
+      if (element) {
+        element.remove();
+      }
+
+      if (!state.isValid) {
+        let errorLabel = document.createElement("div");
+        errorLabel.classList.add("error-custom-inputs-tonder");
+        errorLabel.id = "errorExpiryYearIdTonder";
+        errorLabel.textContent = state.isEmpty ? "El campo es requerido" : "El campo es inválido";
+        tonderContainer?.appendChild(errorLabel);
+      }
+
+    });
+
+  }
+
   await mountElements(
     { id: collectorIds.cardNumber, element: cardNumberElement },
     { id: collectorIds.cvv, element: cvvElement },

package/src/helpers/template.ts

@@ -55,6 +55,28 @@ ${external ? `` : `<style>
 
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
 
+.error-custom-inputs-tonder {
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  bottom: -1px;
+  width: 100%;
+  font-size: 12px;
+  color: red;
+  font-family: "Inter", sans-serif !important;
+}
+
+.expiration-year .error-custom-inputs-tonder {
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  bottom: 3px;
+  width: 100%;
+  font-size: 12px;
+  color: red;
+  font-family: "Inter", sans-serif !important;
+}
+
 .container-tonder {
   background-color: #F9F9F9;
   margin: 0 auto !important;
@@ -76,10 +98,12 @@ ${external ? `` : `<style>
 }
 
 .expiration-year {
-  padding-top: 25px !important;
+  position: relative !important;
+  padding-top: 24px !important;
 }
 
 .empty-div {
+  position: relative;
   height: 80px !important;
   margin-top: 2px;
   margin-bottom: 4px;