tonder-web-sdk 1.16.1 → 1.16.6-beta.DEV-1433.1

package/src/classes/LiteInlineCheckout.js

@@ -1,220 +0,0 @@
-import { BaseInlineCheckout } from "./BaseInlineCheckout";
-import {
-  fetchCustomerAPMs,
-  fetchCustomerCards,
-  saveCustomerCard,
-  removeCustomerCard,
-  registerOrFetchCustomer,
-} from "../data";
-import { getSkyflowTokens } from "../helpers/skyflow";
-import { getPaymentMethodDetails } from "../shared/catalog/paymentMethodsCatalog";
-import { formatPublicErrorResponse, getCardType } from "../helpers/utils";
-import { MESSAGES } from "../shared/constants/messages";
-
-export class LiteInlineCheckout extends BaseInlineCheckout {
-  #customerData;
-  constructor({ mode = "stage", apiKey, returnUrl, callBack = () => {} }) {
-    super({ mode, apiKey, returnUrl, callBack });
-  }
-
-  /**
-   * Initializes and prepares the checkout for use.
-   * This method set up the initial environment.
-   * @returns {Promise<void>} A promise that resolves when the checkout has been initialized.
-   * @throws {Error} If there's any problem during the checkout initialization.
-   * @public
-   */
-  async injectCheckout() {
-    await this._initializeCheckout();
-  }
-
-  /**
-   * Retrieves the list of cards associated with a customer.
-   * @returns {Promise<import("../../types").ICustomerCardsResponse>} A promise that resolves with the customer's card data.
-   *
-   * @throws {import("../../types").IPublicError} Throws an error object if the operation fails.
-   *
-   * @public
-   */
-  async getCustomerCards() {
-    try {
-      const { auth_token } = await this.#getCustomer();
-      const response = await fetchCustomerCards(
-        this.baseUrl,
-        auth_token,
-        this.secureToken,
-        this.merchantData.business.pk,
-      );
-      return {
-        ...response,
-        cards: response.cards.map((ic) => ({
-          ...ic,
-          icon: getCardType(ic.fields.card_scheme),
-        })),
-      };
-    } catch (error) {
-      throw formatPublicErrorResponse(
-        {
-          message: MESSAGES.getCardsError,
-        },
-        error,
-      );
-    }
-  }
-
-  /**
-   * Saves a card to a customer's account. This method can be used to add a new card
-   * or update an existing one.
-   * @param {import("../../types").ISaveCardRequest} card - The card information to be saved.
-   * @returns {Promise<import("../../types").ISaveCardResponse>} A promise that resolves with the saved card data.
-   *
-   * @throws {import("../../types").IPublicError} Throws an error object if the operation fails.
-   *
-   * @public
-   */
-  async saveCustomerCard(card) {
-    try {
-      const { auth_token } = await this.#getCustomer();
-      const { vault_id, vault_url, business } = this.merchantData;
-
-      const skyflowTokens = await getSkyflowTokens({
-        vault_id: vault_id,
-        vault_url: vault_url,
-        data: card,
-        baseUrl: this.baseUrl,
-        apiKey: this.apiKeyTonder,
-      });
-
-      return await saveCustomerCard(
-        this.baseUrl,
-        auth_token,
-        this.secureToken,
-        business?.pk,
-        skyflowTokens,
-      );
-    } catch (error) {
-      throw formatPublicErrorResponse(
-        {
-          message: MESSAGES.saveCardError,
-        },
-        error,
-      );
-    }
-  }
-
-  /**
-   * Removes a card from a customer's account.
-   * @param {string} skyflowId - The unique identifier of the card to be deleted.
-   * @returns {Promise<string>} A promise that resolves when the card is successfully deleted.
-   *
-   * @throws {import("../../types").IPublicError} Throws an error object if the operation fails.
-   *
-   * @public
-   */
-  async removeCustomerCard(skyflowId) {
-    try {
-      const { auth_token } = await this.#getCustomer();
-      const { business } = this.merchantData;
-
-      return await removeCustomerCard(
-        this.baseUrl,
-        auth_token,
-        this.secureToken,
-        skyflowId,
-        business?.pk,
-      );
-    } catch (error) {
-      throw formatPublicErrorResponse(
-        {
-          message: MESSAGES.removeCardError,
-        },
-        error,
-      );
-    }
-  }
-
-  /**
-   * Retrieves the list of available Alternative Payment Methods (APMs).
-   * @returns {Promise<import("../../types").IPaymentMethod[]>} A promise that resolves with the list of APMs.
-   *
-   * @throws {import("../../types").IPublicError} Throws an error object if the operation fails.
-   *
-   * @public
-   */
-  async getCustomerPaymentMethods() {
-    try {
-      const response = await fetchCustomerAPMs(this.baseUrl, this.apiKeyTonder);
-
-      const apms_results =
-        response && "results" in response && response["results"].length > 0
-          ? response["results"]
-          : [];
-
-      return apms_results
-        .filter((apmItem) => apmItem.category.toLowerCase() !== "cards")
-        .map((apmItem) => {
-          const apm = {
-            id: apmItem.pk,
-            payment_method: apmItem.payment_method,
-            priority: apmItem.priority,
-            category: apmItem.category,
-            ...getPaymentMethodDetails(apmItem.payment_method),
-          };
-          return apm;
-        })
-        .sort((a, b) => a.priority - b.priority);
-    } catch (error) {
-      throw formatPublicErrorResponse(
-        {
-          message: MESSAGES.getPaymentMethodsError,
-        },
-        error,
-      );
-    }
-  }
-
-  _setCartTotal(total) {
-    this.cartTotal = total;
-  }
-
-  async _checkout({ card, payment_method }) {
-    const customer = await this._getCustomer(
-      this.customer,
-      this.abortController.signal,
-    );
-    const { vault_id, vault_url } = this.merchantData;
-    let skyflowTokens;
-    if (!payment_method || payment_method !== "" || payment_method === null) {
-      if (typeof card === "string") {
-        skyflowTokens = {
-          skyflow_id: card,
-        };
-      } else {
-        skyflowTokens = await getSkyflowTokens({
-          vault_id: vault_id,
-          vault_url: vault_url,
-          data: {...card, card_number: card.card_number.replace(/\s+/g, '')},
-          baseUrl: this.baseUrl,
-          apiKey: this.apiKeyTonder,
-        });
-      }
-    }
-
-    return await this._handleCheckout({
-      card: skyflowTokens,
-      payment_method,
-      customer,
-    });
-  }
-
-  async #getCustomer() {
-    if (!!this.#customerData) return this.#customerData;
-
-    this.#customerData = await registerOrFetchCustomer(
-      this.baseUrl,
-      this.apiKeyTonder,
-      this.customer,
-    );
-    return this.#customerData;
-  }
-}

package/src/classes/checkout.js

@@ -1,125 +0,0 @@
-import { AES } from "crypto-js";
-
-export class Checkout {
-  constructor({
-    apiKey,
-    type = "payment",
-    backgroundColor="#141414",
-    color="#EBEBEB",
-    cb=()=>{},
-    url="http://checkout.tonder.io/#/"
-  }) {
-    this.url = url
-    this.apiKey = apiKey
-    this.type = type
-    this.backgroundColor = backgroundColor
-    this.color = color
-    this.params = ""
-    this.order = {}
-    this.buttonText = "Proceder al pago"
-    this.cb = cb
-
-    window.addEventListener("message", this.receiveMessage.bind(this), false);
-  }
-  generateButton = (buttonText) => {
-    this.buttonText = buttonText ? buttonText : this.buttonText
-    this.tonderButton = document.createElement('button');
-    this.tonderButton.innerHTML = this.buttonText;
-    this.stylishButton(this.tonderButton)
-    this.tonderButton.onclick = this.openCheckout
-  }
-  getButton = ({buttonText}) => {
-    this.generateButton(buttonText)
-    return this.tonderButton
-  }
-  mountButton = ({buttonText}) => {
-    this.generateButton(buttonText)
-    const entryPoint = document.getElementById("tonder-checkout")
-    try {
-      entryPoint.innerHTML = ""
-      entryPoint.append(this.tonderButton)
-    } catch(error) {
-      console.error(error)
-    }
-  }
-  stylishButton = (element) => {
-    element.style.backgroundColor = this.backgroundColor
-    element.style.color = this.color
-    element.style.display = 'flex'
-    element.style.justifyContent = 'center'
-    element.style.border = 'none'
-    element.style.padding = '1rem'
-    element.style.borderRadius = '10px'
-    element.style.fontSize = '1rem'
-    element.style.width = '100%'
-    element.style.boxShadow = '0 3px 6px 0 rgba(0,0,0,0.16)'
-  }
-  setOrder = ({products, email, shippingCost }) => {
-    let _order = {}
-    if (products) _order.products = products 
-    if (email) _order.email = email 
-    if (shippingCost) _order.shippingCost = shippingCost
-    this.order = {...this.order, ..._order}
-    return this.order
-  }
-  openTabListener = (tab, button) => {
-    const tabInterval = setInterval(() => {
-      if (tab.closed) {
-        clearInterval(tabInterval);
-        button.disabled = false
-        button.innerHTML = this.buttonText
-      }
-    }, 500)
-  }
-  openCheckout = () => {
-    const queryString = this.getUrlParams()
-    const encrypted = AES.encrypt(queryString, 'url-params-encrypt').toString()
-    const encodedURL = encodeURIComponent(encrypted);
-    this.params = "?" + encodedURL;
-    const newWindow = window.open(this.url + this.params, '_blank', `width=1200,height=$800,left=0,top=0`);
-    this.tonderButton.disabled = true
-    this.tonderButton.innerHTML = `
-      <div class="loader"></div>
-      <style>
-      .loader {
-        border: 4px solid ${this.color};
-        border-radius: 50%;
-        border-top: 4px solid ${this.backgroundColor};
-        width: 0.625rem;
-        height: 0.625rem;
-        -webkit-animation: spin 2s linear infinite; /* Safari */
-          animation: spin 2s linear infinite;
-      }
-
-    /* Safari */
-      @-webkit-keyframes spin {
-        0% { -webkit-transform: rotate(0deg); }
-        100% { -webkit-transform: rotate(360deg); }
-      }
-
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-      </style>
-      `
-    this.openTabListener(newWindow, this.tonderButton)
-  }
-  getUrlParams = () => {
-    const params = { apiKey: this.apiKey, ...this.order, type: this.type}
-    if (params.products) {
-      params.products = JSON.stringify(params.products)
-    }
-    const queryString = new URLSearchParams(params).toString();
-    return queryString
-  }
-  receiveMessage(event) {
-    // Parse data if it is possible, in case of error it will return the raw data.
-    try {
-      const data = JSON.parse(event.data)
-      this.cb(data)
-    } catch(error) {
-      this.cb(event.data)
-    }
-  }
-}

package/src/classes/globalLoader.js

@@ -1,29 +0,0 @@
-import { cardTemplateSkeleton } from '../helpers/template-skeleton.js'
-
-class GlobalLoader {
-  constructor() {
-    this.requestCount = 0;
-  }
-
-  show() {
-    this.requestCount++;
-    const checkoutContainer = document.querySelector("#global-loader");
-    if (checkoutContainer) {
-      checkoutContainer.innerHTML = cardTemplateSkeleton;
-      checkoutContainer.style.display = 'block';
-    }
-  }
-
-  remove() {
-    this.requestCount--;
-    if (this.requestCount <= 0) {
-      this.requestCount = 0;
-      const loader = document.querySelector('#global-loader');
-      if (loader) {
-        loader.style.display = 'none';
-      }
-    }
-  }
-}
-
-export const globalLoader = new GlobalLoader();