tonder-web-sdk 1.15.2 → 1.16.3

package/src/helpers/skyflow.js

@@ -1,6 +1,7 @@
-import { defaultStyles } from "./styles";
-import {getVaultToken} from "../data/skyflowApi";
-import {buildErrorResponseFromCatch} from "./utils";
+import { getDefaultStyles } from "./styles";
+import { getVaultToken } from "../data/skyflowApi";
+import { buildErrorResponseFromCatch, getCardFormLabels } from "./utils";
+import { DISPLAY_MODE } from "../shared/constants/displayMode";
 
 export async function initSkyflow(
   vaultId,
@@ -10,30 +11,32 @@ export async function initSkyflow(
   signal,
   customStyles = {},
   collectorIds,
+  displayMode,
 ) {
-  const skyflow = await Skyflow.init({
-    vaultID: vaultId,
-    vaultURL: vaultUrl,
-    getBearerToken: async () => {
-      // Pass the signal to the fetch call
-      return await getVaultToken(baseUrl, apiKey, signal)
-    },
-    options: {
-      logLevel: Skyflow.LogLevel.ERROR,
-      env: Skyflow.Env.DEV,
-    },
-  });
+  const skyflow = await initializeSkyflow(vaultId, vaultUrl, baseUrl, apiKey, signal);
 
   // Create collect Container.
-  const collectContainer = await skyflow.container(
-    Skyflow.ContainerType.COLLECT
-  );
-
+  const collectContainer = await skyflow.container(Skyflow.ContainerType.COLLECT);
   // Custom styles for collect elements.
-  var collectStylesOptions = Object.keys(customStyles).length === 0 ? defaultStyles : customStyles
-
+  let collectStylesOptions = {
+    ...getDefaultStyles(displayMode === DISPLAY_MODE.dark),
+    ...(Object.keys(customStyles).length > 0 ? { ...customStyles } : {}),
+    ...getCardFormLabels(customStyles),
+  };
   const stylesForCardNumber = { ...collectStylesOptions.inputStyles.base };
-  stylesForCardNumber.textIndent = '44px';
+  stylesForCardNumber.textIndent = "44px";
+
+  const stylesForExpiryMonth = {
+    ...collectStylesOptions.inputStyles.base,
+    borderBottomRightRadius: 0,
+    borderTopRightRadius: 0,
+  };
+  const stylesForExpiryYear = {
+    ...collectStylesOptions.inputStyles.base,
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0,
+    borderLeft: "1px solid #CED0D1",
+  };
 
   const lengthMatchRule = {
     type: Skyflow.ValidationRuleType.LENGTH_MATCH_RULE,
@@ -41,15 +44,6 @@ export async function initSkyflow(
       max: 70,
     },
   };
-  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 = await collectContainer.create({
     table: "cards",
@@ -64,7 +58,7 @@ export async function initSkyflow(
   handleSkyflowElementEvents(
     cardHolderNameElement,
     "titular de la tarjeta",
-    collectStylesOptions.errorTextStyles
+    collectStylesOptions.errorTextStyles,
   );
 
   // Create collect elements.
@@ -74,7 +68,7 @@ export async function initSkyflow(
     ...collectStylesOptions,
     inputStyles: {
       ...collectStylesOptions.inputStyles,
-      base: stylesForCardNumber
+      base: stylesForCardNumber,
     },
     label: collectStylesOptions.labels?.cardLabel,
     placeholder: collectStylesOptions.placeholders?.cardPlaceholder,
@@ -85,30 +79,18 @@ export async function initSkyflow(
   handleSkyflowElementEvents(
     cardNumberElement,
     "número de tarjeta",
-    collectStylesOptions.errorTextStyles
-  );
-
-  const cvvElement = await collectContainer.create({
-    table: "cards",
-    column: "cvv",
-    ...collectStylesOptions,
-    label: collectStylesOptions.labels?.cvvLabel,
-    placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
-    type: Skyflow.ElementType.CVV,
-    validations: [regexMatchRule],
-  });
-
-  handleSkyflowElementEvents(
-    cvvElement,
-    "",
-    collectStylesOptions.errorTextStyles
+    collectStylesOptions.errorTextStyles,
   );
 
   const expiryMonthElement = await collectContainer.create({
     table: "cards",
     column: "expiration_month",
     ...collectStylesOptions,
-    label: collectStylesOptions.labels?.expiryDateLabel,
+    inputStyles: {
+      ...collectStylesOptions.inputStyles,
+      base: stylesForExpiryMonth,
+    },
+    label: "",
     placeholder: collectStylesOptions.placeholders?.expiryMonthPlaceholder,
     type: Skyflow.ElementType.EXPIRATION_MONTH,
     validations: [regexMatchRule],
@@ -117,96 +99,200 @@ export async function initSkyflow(
   handleSkyflowElementEvents(
     expiryMonthElement,
     "",
-    collectStylesOptions.errorTextStyles
+    collectStylesOptions.errorTextStyles,
+    true,
+    "Campo requerido",
   );
 
   const expiryYearElement = await collectContainer.create({
     table: "cards",
     column: "expiration_year",
     ...collectStylesOptions,
+    inputStyles: {
+      ...collectStylesOptions.inputStyles,
+      base: stylesForExpiryYear,
+    },
     label: "",
     placeholder: collectStylesOptions.placeholders?.expiryYearPlaceholder,
     type: Skyflow.ElementType.EXPIRATION_YEAR,
     validations: [regexMatchRule],
   });
 
-  handleSkyflowElementEvents(
-    expiryYearElement,
-    "",
-    collectStylesOptions.errorTextStyles
-  );
+  handleSkyflowElementEvents(expiryYearElement, "", collectStylesOptions.errorTextStyles);
 
-  await mountElements(
-    cardNumberElement,
-    cvvElement,
-    expiryMonthElement,
-    expiryYearElement,
-    cardHolderNameElement,
-  )
+  const cvvElement = await collectContainer.create({
+    table: "cards",
+    column: "cvv",
+    ...collectStylesOptions,
+    label: "",
+    placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
+    type: Skyflow.ElementType.CVV,
+    validations: [regexMatchRule],
+  });
+
+  handleSkyflowElementEvents(cvvElement, "", collectStylesOptions.errorTextStyles);
+  const elementsConfig = {
+    cardNumber: {
+      element: cardNumberElement,
+      container: "#collectCardNumber",
+    },
+    cvv: {
+      element: cvvElement,
+      container: "#collectCvv",
+    },
+    expiryMonth: {
+      element: expiryMonthElement,
+      container: "#collectExpirationMonth",
+    },
+    expiryYear: {
+      element: expiryYearElement,
+      container: "#collectExpirationYear",
+    },
+    cardHolderName: {
+      element: cardHolderNameElement,
+      container: "#collectCardholderName",
+    },
+  };
 
+  await mountElements(elementsConfig);
   return {
     container: collectContainer,
-    elements: { 
-      cardHolderNameElement, 
-      cardNumberElement, 
-      cvvElement, 
-      expiryMonthElement, 
-      expiryYearElement 
-    } 
-  }
+    elements: {
+      cardHolderNameElement,
+      cardNumberElement,
+      cvvElement,
+      expiryMonthElement,
+      expiryYearElement,
+    },
+  };
 }
 
-async function mountElements(
-  cardNumberElement,
-  cvvElement,
-  expiryMonthElement,
-  expiryYearElement,
-  cardHolderNameElement,
+export async function initUpdateSkyflow(
+  skyflowId,
+  vaultId,
+  vaultUrl,
+  baseUrl,
+  apiKey,
+  signal,
+  customStyles = {},
+  displayMode,
 ) {
-  cardNumberElement.mount("#collectCardNumber");
-  cvvElement.mount("#collectCvv");
-  expiryMonthElement.mount("#collectExpirationMonth");
-  expiryYearElement.mount("#collectExpirationYear");
-  cardHolderNameElement.mount("#collectCardholderName");
+  const skyflow = await initializeSkyflow(vaultId, vaultUrl, baseUrl, apiKey, signal);
+
+  let collectStylesOptions = {
+    ...getDefaultStyles(displayMode === DISPLAY_MODE.dark),
+    ...(Object.keys(customStyles).length > 0 ? { ...customStyles } : {}),
+    ...getCardFormLabels(customStyles),
+  };
+  // Create collect Container.
+  const collectContainer = await skyflow.container(Skyflow.ContainerType.COLLECT);
+
+  const cvvElement = await collectContainer.create({
+    table: "cards",
+    column: "cvv",
+    ...collectStylesOptions,
+    label: "",
+    placeholder: collectStylesOptions.placeholders?.cvvPlaceholder,
+    type: Skyflow.ElementType.CVV,
+    validations: [regexMatchRule],
+    skyflowID: skyflowId,
+  });
+
+  handleSkyflowElementEvents(cvvElement, "", collectStylesOptions.errorTextStyles);
+
+  const elementsConfig = {
+    cvv: {
+      element: cvvElement,
+      container: `#collectCvv${skyflowId}`,
+    },
+  };
+  await mountElements(elementsConfig);
+
+  return {
+    container: collectContainer,
+    elements: {
+      cvvElement,
+    },
+  };
 }
 
+async function initializeSkyflow(vaultId, vaultUrl, baseUrl, apiKey, signal) {
+  return await Skyflow.init({
+    vaultID: vaultId,
+    vaultURL: vaultUrl,
+    getBearerToken: async () => {
+      // Pass the signal to the fetch call
+      return await getVaultToken(baseUrl, apiKey, signal);
+    },
+    options: {
+      logLevel: Skyflow.LogLevel.ERROR,
+      env: Skyflow.Env.DEV,
+    },
+  });
+}
+
+async function mountElements(elementsConfig) {
+  if (typeof elementsConfig !== "object" || elementsConfig === null) {
+    throw new Error("Invalid configuration object");
+  }
+
+  for (const [elementKey, { element, container }] of Object.entries(elementsConfig)) {
+    if (element && container) {
+      element.mount(container);
+    } else {
+      console.warn(`Skipping mount for '${elementKey}' due to missing element or container.`);
+    }
+  }
+}
 
-function handleSkyflowElementEvents(element, fieldMessage= "", error_styles = {}, resetOnFocus = true, requiredMessage = "El campo es requerido", invalidMessage= "El campo es inválido") {
+function handleSkyflowElementEvents(
+  element,
+  fieldMessage = "",
+  error_styles = {},
+  resetOnFocus = true,
+  requiredMessage = "Campo requerido",
+  invalidMessage = "Campo inválido",
+  focusNextElement = null,
+) {
   if ("on" in element) {
-    element.on(Skyflow.EventName.CHANGE, (state) => {
-      updateErrorLabel(element, error_styles, "transparent")
+    element.on(Skyflow.EventName.CHANGE, state => {
+      updateErrorLabel(element, error_styles, "transparent");
     });
 
-    element.on(Skyflow.EventName.BLUR, (state) => {
+    element.on(Skyflow.EventName.BLUR, state => {
       if (!state.isValid) {
-        const msj_error = state.isEmpty ? requiredMessage : fieldMessage != "" ?`El campo ${fieldMessage} es inválido`: invalidMessage;
+        const msj_error = state.isEmpty
+          ? requiredMessage
+          : fieldMessage != ""
+            ? `El campo ${fieldMessage} es inválido`
+            : invalidMessage;
         element.setError(msj_error);
       }
-      updateErrorLabel(element, error_styles)
+      updateErrorLabel(element, error_styles);
     });
 
-    element.on(Skyflow.EventName.FOCUS, (state) => {
-      updateErrorLabel(element, error_styles, "transparent")
+    element.on(Skyflow.EventName.FOCUS, state => {
+      updateErrorLabel(element, error_styles, "transparent");
       element.resetError();
     });
   }
 }
 
-function updateErrorLabel(element, errorStyles, color = "" ){
-  if(Object.keys(errorStyles).length > 0){
+function updateErrorLabel(element, errorStyles, color = "") {
+  if (Object.keys(errorStyles).length > 0) {
     element.update({
       errorTextStyles: {
         ...errorStyles,
         base: {
-          ...(errorStyles.base && {...errorStyles.base}),
-          ...(color != "" && {color})
-        }
-      }
-    })
+          ...(errorStyles.base && { ...errorStyles.base }),
+          ...(color != "" && { color }),
+        },
+      },
+    });
   }
 }
 
-export async  function getSkyflowTokens({baseUrl, apiKey, vault_id, vault_url, data }) {
+export async function getSkyflowTokens({ baseUrl, apiKey, vault_id, vault_url, data }) {
   const skyflow = Skyflow.init({
     vaultID: vault_id,
     vaultURL: vault_url,
@@ -217,24 +303,21 @@ export async  function getSkyflowTokens({baseUrl, apiKey, vault_id, vault_url, d
     },
   });
 
-  const collectContainer = skyflow.container(Skyflow.ContainerType.COLLECT);
+  const collectContainer = skyflow.container(Skyflow.ContainerType.COMPOSABLE);
 
   const fieldPromises = await getFieldsPromise(data, collectContainer);
 
   const result = await Promise.all(fieldPromises);
-  const mountFail = result.some((item) => !item);
+  const mountFail = result.some(item => !item);
 
   if (mountFail) {
-    throw buildErrorResponseFromCatch(
-        Error("Ocurrió un error al montar los campos de la tarjeta"),
-    );
+    throw buildErrorResponseFromCatch(Error("Ocurrió un error al montar los campos de la tarjeta"));
   } else {
     try {
       const collectResponseSkyflowTonder = await collectContainer.collect();
-      if (collectResponseSkyflowTonder)
-        return collectResponseSkyflowTonder["records"][0]["fields"];
+      if (collectResponseSkyflowTonder) return collectResponseSkyflowTonder["records"][0]["fields"];
       throw buildErrorResponseFromCatch(
-          Error("Por favor, verifica todos los campos de tu tarjeta"),
+        Error("Por favor, verifica todos los campos de tu tarjeta"),
       );
     } catch (error) {
       throw buildErrorResponseFromCatch(error);
@@ -244,8 +327,8 @@ export async  function getSkyflowTokens({baseUrl, apiKey, vault_id, vault_url, d
 async function getFieldsPromise(data, collectContainer) {
   const fields = await getFields(data, collectContainer);
   if (!fields) return [];
-  return fields.map((field) => {
-    return new Promise((resolve) => {
+  return fields.map(field => {
+    return new Promise(resolve => {
       const div = document.createElement("div");
       div.hidden = true;
       div.id = `id-${field.key}`;
@@ -261,19 +344,27 @@ async function getFieldsPromise(data, collectContainer) {
         }, 120);
       }, 120);
     });
-  })
+  });
 }
 
 async function getFields(data, collectContainer) {
   return await Promise.all(
-      Object.keys(data).map(async (key) => {
-        const cardHolderNameElement = await collectContainer.create({
-          table: "cards",
-          column: key,
-          type: Skyflow.ElementType.INPUT_FIELD,
-        });
-        return { element: cardHolderNameElement, key: key };
-      })
-  )
+    Object.keys(data).map(async key => {
+      const cardHolderNameElement = await collectContainer.create({
+        table: "cards",
+        column: key,
+        type: Skyflow.ElementType.INPUT_FIELD,
+      });
+      return { element: cardHolderNameElement, key: key };
+    }),
+  );
 }
 
+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'.
+  },
+};

package/src/helpers/styles.js

@@ -1,22 +1,22 @@
 export const defaultStyles = {
   inputStyles: {
     base: {
-      border: "1px solid #e0e0e0",
       padding: "10px 7px",
       borderRadius: "5px",
-      color: "#1d1d1d",
+      color: "#000000",
       marginTop: "2px",
-      backgroundColor: "white",
+      backgroundColor: "#F5F5F5",
       fontFamily: '"Inter", sans-serif',
-      fontSize: '16px',
-      '&::placeholder': {
+      fontSize: "14px",
+      "&::placeholder": {
         color: "#ccc",
       },
+      fontWeight: 400,
     },
     cardIcon: {
-      position: 'absolute',
-      left: '6px',
-      bottom: 'calc(50% - 12px)',
+      position: "absolute",
+      left: "6px",
+      bottom: "calc(50% - 12px)",
     },
     complete: {
       color: "#4caf50",
@@ -27,35 +27,64 @@ export const defaultStyles = {
       border: "1px solid #f44336",
     },
     global: {
-      '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
-    }
+      "@import":
+        'url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap")',
+    },
   },
   labelStyles: {
     base: {
-      fontSize: '12px',
-      fontWeight: '500',
-      fontFamily: '"Inter", sans-serif'
+      fontSize: "14px",
+      fontWeight: "600",
+      fontFamily: '"Inter", sans-serif',
+      color: "#333333",
+      textAlign: "start",
     },
   },
   errorTextStyles: {
     base: {
-      fontSize: '12px',
-      fontWeight: '500',
+      fontSize: "14px",
+      fontWeight: "500",
       color: "#f44336",
-      fontFamily: '"Inter", sans-serif'
+      fontFamily: '"Inter", sans-serif',
     },
   },
   labels: {
-    nameLabel: 'Titular de la tarjeta',
-    cardLabel: 'Número de tarjeta',
-    cvvLabel: 'CVC/CVV',
-    expiryDateLabel: 'Fecha de expiración',
+    nameLabel: "Nombre del titular de la tarjeta",
+    cardLabel: "Número de tarjeta",
+    cvvLabel: "CVC/CVV",
+    expiryDateLabel: "Fecha de expiración",
   },
   placeholders: {
-    namePlaceholder: 'Nombre como aparece en la tarjeta',
-    cardPlaceholder: '1234 1234 1234 1234',
-    cvvPlaceholder: '3-4 dígitos',
-    expiryMonthPlaceholder: 'MM',
-    expiryYearPlaceholder: 'AA'
-  }
-}
+    namePlaceholder: "Nombre del titular de la tarjeta",
+    cardPlaceholder: "1234 1234 1234 1234",
+    cvvPlaceholder: "CVV",
+    expiryMonthPlaceholder: "MM",
+    expiryYearPlaceholder: "AA",
+  },
+};
+
+export const getDefaultStyles = isDark => {
+  const darkBaseInputStyles = {
+    backgroundColor: "#5C5C5C",
+    color: "#FFFFFF",
+    "&::placeholder": {
+      color: "#AAAAAA",
+    },
+  };
+
+  const darkBaseLabelStyles = {
+    color: "#FFFFFF",
+  };
+
+  return {
+    ...defaultStyles,
+    inputStyles: {
+      ...defaultStyles.inputStyles,
+      base: { ...defaultStyles.inputStyles.base, ...(isDark ? { ...darkBaseInputStyles } : {}) },
+    },
+    labelStyles: {
+      ...defaultStyles.labelStyles,
+      base: { ...defaultStyles.labelStyles.base, ...(isDark ? { ...darkBaseLabelStyles } : {}) },
+    },
+  };
+};

package/src/helpers/template-skeleton.js

@@ -56,4 +56,4 @@ export const cardTemplateSkeleton = `
   }
 }
 </style>
-`
+`;