sutty-base-jekyll-theme/_packs/controllers/cart_base_controller.js

import { Controller } from "stimulus";
import { Liquid } from "liquidjs";

/*
 * Base controller, shared methods go here and other classes extend from
 * this.
 */
export class CartBaseController extends Controller {
  get spree() {
    return window.spree;
  }

  /*
   * Gets all products from storage
   *
   * @return [Array]
   */
  get products() {
    if (!this.cart) return [];

    return this.cart.data.relationships.variants.data
      .map((x) => JSON.parse(this.storage.getItem(`cart:item:${x.id}`)))
      .filter((x) => x !== null);
  }

  /*
   * The storage
   */
  get storage() {
    return window.localStorage;
  }

  /*
   * Temporary storage
   */
  get storageTemp() {
    return window.sessionStorage;
  }

  get cart() {
    return JSON.parse(this.storage.getItem("cart"));
  }

  set cart(response) {
    this.storage.setItem("cart", JSON.stringify(response.success()));
  }

  get email() {
    return this.storageTemp.getItem("email");
  }

  set email(email) {
    this.storageTemp.setItem("email", email);
  }

  /*
   * The orderToken
   *
   * @return [String]
   */
  get token() {
    return this.storage.getItem("token");
  }

  /*
   * The bearerToken
   *
   * @return [String]
   */
  get bearerToken() {
    return this.storageTemp.getItem("bearerToken");
  }

  set bearerToken(token) {
    this.storageTemp.setItem("bearerToken", token);
  }

  /*
   * Liquid renderer
   *
   * @return Liquid
   */
  get engine() {
    if (!window.liquid) window.liquid = new Liquid();

    return window.liquid;
  }

  /*
   * Updates the item counter
   */
  counterUpdate() {
    const item_count = this.cart.data.attributes.item_count;

    window.dispatchEvent(
      new CustomEvent("cart:counter", { detail: { item_count } })
    );
    this.storage.setItem("cart:counter", item_count);
  }

  /*
   * Removes the brackets from the name or returns the name
   *
   * @return [String]
   */
  idFromInputName(input) {
    const matches = input.name.match(/\[([^\]]+)\]$/);

    return matches === null ? input.name : matches[1];
  }

  async handleFailure(response) {
    const data = { type: "primary" };
    let template = "alert";
    let notify = true;

    const site = window.site;
    const fail = response.fail();

    switch (fail.name) {
      case "MisconfigurationError":
        data.content = fail.message;
        break;
      case "NoResponseError":
        data.content = site.i18n.alerts.no_response_error;
        break;
      case "SpreeError":
        data.content = site.i18n.alerts.spree_error;
        break;
      case "BasicSpreeError":
        // XXX: The order is missing, we need to start a new one
        if (fail.serverResponse.status === 404) {
          template = "recover_order";
          data.content = site.i18n.alerts.recover_order;
        } else {
          data.content = response.fail().summary;
        }

        break;
      case "ExpandedSpreeError":
        const content = [];
        // XXX: La API devuelve los mensajes de error tal cual en la
        // llave `error` pero el cliente solo nos da acceso a `errors`.
        for (const field of Object.keys(fail.errors)) {
          if (!site.i18n.errors?.fields[field]) {
            console.error("El campo no tiene traducción", field);
          }

          content.push(
            `${site.i18n.errors?.fields[field]}: ${fail.errors[field].join(
              ", "
            )}`
          );
        }

        data.content = content.join(". ");
        notify = false;

        break;
      default:
        data.content = fail.message;
    }

    if (notify) console.error(fail.name, data.content);
    window.dispatchEvent(
      new CustomEvent("notification", { detail: { template, data } })
    );
  }

  set formDisabled(state) {
    if (!this.hasFormTarget) return;

    this.formTarget.elements.forEach((x) => (x.disabled = !!state));
  }

  assignShippingAddress() {
    if (!this.bearerToken) return;

    const bearerToken = this.bearerToken;
    const orderToken = this.token;

    this.spree.sutty.assignOrderShippingAddress(
      { bearerToken },
      { orderToken }
    );
  }

  notify(data = {}) {
    window.dispatchEvent(
      new CustomEvent("notification", { detail: { template: "alert", data } })
    );
  }

  /*
   * Visita una página con soporte para Turbolinks
   *
   * @param [String] URL
   */
  visit(url) {
    try {
      Turbolinks.visit(url);
    } catch {
      window.location = url;
    }
  }

  async firstAddress(bearerToken) {
    if (!this._firstAddress) {
      const addresses = await this.spree.account.addressesList({ bearerToken });

      if (addresses.isFail()) {
        this.handleFailure(addresses);
        return;
      }

      // XXX: Asumimos que si se registró tiene una dirección que vamos
      // a actualizar.
      this._firstAddress = addresses.success().data[0];
    }

    return this._firstAddress;
  }

  async updateAddress(bearerToken, id, address) {
    const updateAddress = await this.spree.account.updateAddress(
      { bearerToken },
      id,
      { address }
    );

    if (updateAddress.isFail()) {
      this.handleFailure(updateAddress);
      return;
    }

    return updateAddress.success();
  }

  async shippingMethods(orderToken) {
    const shippingMethods = await this.spree.checkout.shippingMethods(
      { orderToken },
      { include: "shipping_rates" }
    );

    if (shippingMethods.isFail()) {
      this.handleFailure(shippingMethods);
      return;
    }

    return shippingMethods.success();
  }

  fireCajon(state = "open", cajon = "cajon") {
    window.dispatchEvent(
      new CustomEvent("cajon", { detail: { cajon, state } })
    );
  }

  formDataToObject(formData) {
    const object = {};

    for (const field of formData) {
      if (field[0].startsWith("_ignore_")) continue;

      object[field[0]] = field[1];
    }

    return object;
  }
}