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

package/package.json

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

package/src/helpers/skyflow.js

@@ -74,7 +74,8 @@ export async function initSkyflow(
 
   handleSkyflowElementEvents(
     cardHolderNameElement,
-    "titular de la tarjeta"
+    "titular de la tarjeta",
+    collectStylesOptions.errorTextStyles
   );
 
   // Create collect elements.
@@ -94,7 +95,8 @@ export async function initSkyflow(
 
   handleSkyflowElementEvents(
     cardNumberElement,
-    "número de tarjeta"
+    "número de tarjeta",
+    collectStylesOptions.errorTextStyles
   );
 
   const cvvElement = await collectContainer.create({
@@ -107,6 +109,12 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
+  handleSkyflowElementEvents(
+    cvvElement,
+    "",
+    collectStylesOptions.errorTextStyles
+  );
+
   const expiryMonthElement = await collectContainer.create({
     table: "cards",
     column: "expiration_month",
@@ -117,6 +125,12 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
+  handleSkyflowElementEvents(
+    expiryMonthElement,
+    "",
+    collectStylesOptions.errorTextStyles
+  );
+
   const expiryYearElement = await collectContainer.create({
     table: "cards",
     column: "expiration_year",
@@ -127,6 +141,12 @@ export async function initSkyflow(
     validations: [regexMatchRule],
   });
 
+  handleSkyflowElementEvents(
+    expiryYearElement,
+    "",
+    collectStylesOptions.errorTextStyles
+  );
+
   await mountElements(
     cardNumberElement,
     cvvElement,
@@ -162,23 +182,43 @@ async function mountElements(
 }
 
 
-function handleSkyflowElementEvents(element, fieldMessage= "", requiredMessage = "El campo es requerido", invalidMessage= "El campo es inválido") {
+function handleSkyflowElementEvents(element, fieldMessage= "", error_styles = {}, resetOnFocus = true, requiredMessage = "El campo es requerido", invalidMessage= "El campo es inválido") {
   if ("on" in element) {
     element.on(Skyflow.EventName.CHANGE, (state) => {
-      if (state.isValid && !state.isEmpty) {
-        element.resetError();
-      }
+      // console.log("state chan:", state)
+      updateErrorLabel(element, error_styles, "transparent")
+      // if(state.isValid && !state.isEmpty){
+      //   element.resetError();
+      // }
     });
 
     element.on(Skyflow.EventName.BLUR, (state) => {
+      console.log("state blur:", state)
       if (!state.isValid) {
         const msj_error = state.isEmpty ? requiredMessage : fieldMessage != "" ?`El campo ${fieldMessage} es inválido`: invalidMessage;
+        // updateErrorLabel(element, error_styles)
         element.setError(msj_error);
       }
+      updateErrorLabel(element, error_styles)
     });
 
     element.on(Skyflow.EventName.FOCUS, (state) => {
+      updateErrorLabel(element, error_styles, "transparent")
       element.resetError();
     });
   }
+}
+
+function updateErrorLabel(element, errorStyles, color = "red" ){
+  if(Object.keys(errorStyles).length > 0){
+    element.update({
+      errorTextStyles: {
+        ...errorStyles,
+        base: {
+          ...errorStyles.base,
+          color
+        }
+      }
+    })
+  }
 }