tonder-web-sdk 1.16.3 → 1.16.6-beta.DEV-1433.2

package/src/helpers/skyflow.js

@@ -1,370 +0,0 @@
-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,
-  vaultUrl,
-  baseUrl,
-  apiKey,
-  signal,
-  customStyles = {},
-  collectorIds,
-  displayMode,
-) {
-  const skyflow = await initializeSkyflow(vaultId, vaultUrl, baseUrl, apiKey, signal);
-
-  // Create collect Container.
-  const collectContainer = await skyflow.container(Skyflow.ContainerType.COLLECT);
-  // Custom styles for collect elements.
-  let collectStylesOptions = {
-    ...getDefaultStyles(displayMode === DISPLAY_MODE.dark),
-    ...(Object.keys(customStyles).length > 0 ? { ...customStyles } : {}),
-    ...getCardFormLabels(customStyles),
-  };
-  const stylesForCardNumber = { ...collectStylesOptions.inputStyles.base };
-  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,
-    params: {
-      max: 70,
-    },
-  };
-
-  const cardHolderNameElement = await collectContainer.create({
-    table: "cards",
-    column: "cardholder_name",
-    ...collectStylesOptions,
-    label: collectStylesOptions.labels?.nameLabel,
-    placeholder: collectStylesOptions.placeholders?.namePlaceholder,
-    type: Skyflow.ElementType.CARDHOLDER_NAME,
-    validations: [lengthMatchRule, regexMatchRule],
-  });
-
-  handleSkyflowElementEvents(
-    cardHolderNameElement,
-    "titular de la tarjeta",
-    collectStylesOptions.errorTextStyles,
-  );
-
-  // Create collect elements.
-  const cardNumberElement = await collectContainer.create({
-    table: "cards",
-    column: "card_number",
-    ...collectStylesOptions,
-    inputStyles: {
-      ...collectStylesOptions.inputStyles,
-      base: stylesForCardNumber,
-    },
-    label: collectStylesOptions.labels?.cardLabel,
-    placeholder: collectStylesOptions.placeholders?.cardPlaceholder,
-    type: Skyflow.ElementType.CARD_NUMBER,
-    validations: [regexMatchRule],
-  });
-
-  handleSkyflowElementEvents(
-    cardNumberElement,
-    "número de tarjeta",
-    collectStylesOptions.errorTextStyles,
-  );
-
-  const expiryMonthElement = await collectContainer.create({
-    table: "cards",
-    column: "expiration_month",
-    ...collectStylesOptions,
-    inputStyles: {
-      ...collectStylesOptions.inputStyles,
-      base: stylesForExpiryMonth,
-    },
-    label: "",
-    placeholder: collectStylesOptions.placeholders?.expiryMonthPlaceholder,
-    type: Skyflow.ElementType.EXPIRATION_MONTH,
-    validations: [regexMatchRule],
-  });
-
-  handleSkyflowElementEvents(
-    expiryMonthElement,
-    "",
-    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);
-
-  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,
-    },
-  };
-}
-
-export async function initUpdateSkyflow(
-  skyflowId,
-  vaultId,
-  vaultUrl,
-  baseUrl,
-  apiKey,
-  signal,
-  customStyles = {},
-  displayMode,
-) {
-  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 = "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.BLUR, state => {
-      if (!state.isValid) {
-        const msj_error = state.isEmpty
-          ? requiredMessage
-          : fieldMessage != ""
-            ? `El campo ${fieldMessage} es inválido`
-            : invalidMessage;
-        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 = "") {
-  if (Object.keys(errorStyles).length > 0) {
-    element.update({
-      errorTextStyles: {
-        ...errorStyles,
-        base: {
-          ...(errorStyles.base && { ...errorStyles.base }),
-          ...(color != "" && { color }),
-        },
-      },
-    });
-  }
-}
-
-export async function getSkyflowTokens({ baseUrl, apiKey, vault_id, vault_url, data }) {
-  const skyflow = Skyflow.init({
-    vaultID: vault_id,
-    vaultURL: vault_url,
-    getBearerToken: async () => await getVaultToken(baseUrl, apiKey),
-    options: {
-      logLevel: Skyflow.LogLevel.ERROR,
-      env: Skyflow.Env.DEV,
-    },
-  });
-
-  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);
-
-  if (mountFail) {
-    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"];
-      throw buildErrorResponseFromCatch(
-        Error("Por favor, verifica todos los campos de tu tarjeta"),
-      );
-    } catch (error) {
-      throw buildErrorResponseFromCatch(error);
-    }
-  }
-}
-async function getFieldsPromise(data, collectContainer) {
-  const fields = await getFields(data, collectContainer);
-  if (!fields) return [];
-  return fields.map(field => {
-    return new Promise(resolve => {
-      const div = document.createElement("div");
-      div.hidden = true;
-      div.id = `id-${field.key}`;
-      document.querySelector(`body`)?.appendChild(div);
-      setTimeout(() => {
-        field.element.mount(`#id-${field.key}`);
-        setInterval(() => {
-          if (field.element.isMounted()) {
-            const value = data[field.key];
-            field.element.update({ value: value });
-            return resolve(field.element.isMounted());
-          }
-        }, 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 };
-    }),
-  );
-}
-
-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,90 +0,0 @@
-export const defaultStyles = {
-  inputStyles: {
-    base: {
-      padding: "10px 7px",
-      borderRadius: "5px",
-      color: "#000000",
-      marginTop: "2px",
-      backgroundColor: "#F5F5F5",
-      fontFamily: '"Inter", sans-serif',
-      fontSize: "14px",
-      "&::placeholder": {
-        color: "#ccc",
-      },
-      fontWeight: 400,
-    },
-    cardIcon: {
-      position: "absolute",
-      left: "6px",
-      bottom: "calc(50% - 12px)",
-    },
-    complete: {
-      color: "#4caf50",
-    },
-    empty: {},
-    focus: {},
-    invalid: {
-      border: "1px solid #f44336",
-    },
-    global: {
-      "@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: "14px",
-      fontWeight: "600",
-      fontFamily: '"Inter", sans-serif',
-      color: "#333333",
-      textAlign: "start",
-    },
-  },
-  errorTextStyles: {
-    base: {
-      fontSize: "14px",
-      fontWeight: "500",
-      color: "#f44336",
-      fontFamily: '"Inter", sans-serif',
-    },
-  },
-  labels: {
-    nameLabel: "Nombre del titular de la tarjeta",
-    cardLabel: "Número de tarjeta",
-    cvvLabel: "CVC/CVV",
-    expiryDateLabel: "Fecha de expiración",
-  },
-  placeholders: {
-    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

@@ -1,59 +0,0 @@
-export const cardTemplateSkeleton = `
-<div class="container-tonder-skeleton">
-  <div class="skeleton-loader"></div>
-  <div class="skeleton-loader"></div>
-  <div class="collect-row-skeleton">
-    <div class="skeleton-loader skeleton-loader-item"></div>
-    <div class="skeleton-loader skeleton-loader-item"></div>
-    <div class="skeleton-loader skeleton-loader-item"></div>
-  </div>
-</div>
-
-<style>
-.container-tonder-skeleton {
-  background-color: #F9F9F9;
-  margin: 0 auto !important;
-  padding: 30px 10px 30px 10px;
-  overflow: hidden;
-  transition: max-height 0.5s ease-out;
-  max-width: 600px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 45px;
-}
-
-.collect-row-skeleton {
-  display: flex !important;
-  justify-content: space-between !important;
-  margin-left: 10px !important;
-  margin-right: 10px !important;
-  gap: 10px;
-}
-.skeleton-loader {
-  height: 45px !important;
-  border-radius: 8px;
-  margin-top: 2px;
-  margin-bottom: 4px;
-  margin-left: 10px !important;
-  margin-right: 10px !important;
-  background-color: #e0e0e0;
-  animation: pulse 1.5s infinite ease-in-out;
-}
-.skeleton-loader-item{
-  width: 35%;
-  margin: 0 !important;
-}
-@keyframes pulse {
-  0% {
-    background-color: #e0e0e0;
-  }
-  50% {
-    background-color: #f0f0f0;
-  }
-  100% {
-    background-color: #e0e0e0;
-  }
-}
-</style>
-`;