tonder-web-sdk 1.9.1 → 1.9.2-beta.1

package/package.json

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

package/src/helpers/skyflow.js

@@ -74,8 +74,6 @@ export async function initSkyflow(
 
   handleSkyflowElementEvents(
     cardHolderNameElement,
-    collectorIds.holderName,
-    "errorCardHolderIdTonder",
     "titular de la tarjeta"
   );
 
@@ -96,12 +94,9 @@ export async function initSkyflow(
 
   handleSkyflowElementEvents(
     cardNumberElement,
-    collectorIds.cardNumber,
-    "errorCardNumberIdTonder",
     "número de tarjeta"
   );
 
-
   const cvvElement = await collectContainer.create({
     table: "cards",
     column: "cvv",
@@ -112,12 +107,6 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
-  handleSkyflowElementEvents(
-    cvvElement,
-    collectorIds.cvv,
-    "errorCvvIdTonder"
-  );
-
   const expiryMonthElement = await collectContainer.create({
     table: "cards",
     column: "expiration_month",
@@ -128,12 +117,6 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
-  handleSkyflowElementEvents(
-    expiryMonthElement,
-    collectorIds.expirationMonth,
-    "errorExpiryMonthIdTonder"
-  );
-
   const expiryYearElement = await collectContainer.create({
     table: "cards",
     column: "expiration_year",
@@ -144,12 +127,6 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
-  handleSkyflowElementEvents(
-    expiryYearElement,
-    collectorIds.expirationYear,
-    "errorExpiryYearIdTonder"
-  );
-
   await mountElements(
     cardNumberElement,
     cvvElement,
@@ -185,28 +162,23 @@ async function mountElements(
 }
 
 
-function handleSkyflowElementEvents(element, elementId, errorElementId, fieldMessage= "", requiredMessage = "El campo es requerido", invalidMessage= "El campo es inválido") {
+function handleSkyflowElementEvents(element, fieldMessage= "", requiredMessage = "El campo es requerido", invalidMessage= "El campo es inválido") {
   if ("on" in element) {
     element.on(Skyflow.EventName.CHANGE, (state) => {
-      let errorElement = document.getElementById(errorElementId);
-      if (errorElement && state.isValid && !state.isEmpty) {
-        errorElement.remove();
+      if (state.isValid && !state.isEmpty) {
+        element.resetError();
       }
     });
 
     element.on(Skyflow.EventName.BLUR, (state) => {
-      let container = document.getElementById(elementId);
-      let errorElement = document.getElementById(errorElementId);
-      if (errorElement) {
-        errorElement.remove();
-      }
       if (!state.isValid) {
-        let errorLabel = document.createElement("div");
-        errorLabel.classList.add("error-custom-inputs-tonder");
-        errorLabel.id = errorElementId;
-        errorLabel.textContent = state.isEmpty ? requiredMessage : fieldMessage != "" ?`El campo ${fieldMessage} es inválido`: invalidMessage;
-        container?.appendChild(errorLabel);
+        const msj_error = state.isEmpty ? requiredMessage : fieldMessage != "" ?`El campo ${fieldMessage} es inválido`: invalidMessage;
+        element.setError(msj_error);
       }
     });
+
+    element.on(Skyflow.EventName.FOCUS, (state) => {
+      element.resetError();
+    });
   }
 }

package/src/helpers/template.js

@@ -35,7 +35,7 @@ export const cardTemplate = `
 .container-tonder {
   background-color: #F9F9F9;
   margin: 0 auto !important;
-  padding: 30px 10px 30px 10px;
+  padding: 30px 25px;
   overflow: hidden;
   transition: max-height 0.5s ease-out;
   max-width: 600px;
@@ -134,7 +134,8 @@ export const cardTemplate = `
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%
+  height: 100%;
+  z-index: 1;
 }
 
 @media screen and (max-width: 600px) {
@@ -174,12 +175,13 @@ export const cardTemplate = `
   justify-content: start;
   align-items: center;
   color: #1D1D1D;
-  gap: 33% 20px;
+  gap: 33% 15px;
   margin-top: 10px;
   margin-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
-  width: 90%;
+  width: 100%;
+  position: relative;
 }
 
 .pay-new-card .card-number {
@@ -199,15 +201,14 @@ export const cardTemplate = `
   gap: 33% 20px;
   margin-top: 10px;
   margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
+  width: 100%;
 }
 
 .card_selected {
   position: relative;
   width: 16px;
   height: 16px;
+  min-width: 16px;
   appearance: none;
   cursor: pointer;
   border-radius: 100%;
@@ -240,6 +241,7 @@ export const cardTemplate = `
   position: relative;
   width: 16px;
   height: 16px;
+  min-width: 16px;
   appearance: none;
   cursor: pointer;
   border-radius: 100%;
@@ -284,6 +286,7 @@ export const cardTemplate = `
   opacity: 10;
 }
 
+
 .error-custom-inputs-tonder {
   background-color: white;
   position: absolute;
@@ -337,16 +340,15 @@ export const cardItemsTemplate = (cards) => {
         gap: 33% 20px;
         margin-top: 10px;
         margin-bottom: 10px;
-        padding-left: 10px;
-        padding-right: 10px;
-        width: 90%;
+        width: 100%;
       }
 
       .card-item {
+        position: relative;
         display: flex;
         justify-content: start;
         align-items: center;
-        gap: 33% 20px;
+        gap: 33% 15px;
       }
 
       .card-item .card-number {
@@ -373,10 +375,10 @@ export const cardItemsTemplate = (cards) => {
         background-color: transparent !important;
         color: #D91C1C !important;
       }
-
       .card_selected {
         position: relative;
         width: 16px;
+        min-width: 16px;
         height: 16px;
         appearance: none;
         cursor: pointer;
@@ -410,6 +412,7 @@ export const cardItemsTemplate = (cards) => {
         position: relative;
         width: 16px;
         height: 16px;
+        min-width: 16px;
         appearance: none;
         cursor: pointer;
         border-radius: 100%;