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

import { CartBaseController } from "./cart_base_controller";

/*
 * Manages the cart and its contents.
 *
 * We need to create an order in Spree API to get a token that allows to
 * make changes to it.
 *
 * The order contains attributes for the order and other data can be
 * included, like line items, variants, payments, promotions, shipments,
 * billing and shipping addresses, and the user.
 *
 * Variants are products added to the cart.  To remove an item or change
 * its quantity, a line item for the variant must be found.  We store
 * this information into localStorage so we don't have to make annoying
 * queries to JSON:API everytime.
 */

export default class extends CartBaseController {
  static targets = ["quantity", "subtotal", "addedQuantity"];

  connect() {
    if (!this.hasQuantityTarget) return;

    /*
     * When the quantity selector changes, we update the order to have
     * that amount of items.
     *
     * TODO: Go back to previous amount if there's not enough.
     */
    this.quantityTarget.addEventListener("change", async (event) => {
      const quantity = event.target.value;

      if (quantity < 1) return;

      const orderToken = await this.tokenGetOrCreate();
      const product = this.product;

      if (!product) return;

      event.target.disabled = true;

      const response = await this.spree.cart.setQuantity(
        { orderToken },
        {
          line_item_id: product.line_item.id,
          quantity,
          include: "line_items",
        }
      );

      event.target.disabled = false;
      event.target.focus();

      // If we're failing here it could be due to a missing order, so we
      // ask the user to decide what they want to do about it
      if (response.isFail()) {
        this.handleFailure(response);
        return;
      }

      this.cart = response;
      this.subtotalUpdate();
      this.counterUpdate();
      await this.itemStore();

      if (!this.hasSubtotalTarget) return;

      this.subtotalTarget.innerText =
        product.line_item.attributes.discounted_amount;
    });
  }

  subtotalUpdate() {
    window.dispatchEvent(new Event("cart:subtotal:update"));
  }

  /*
   * Creates an order and stores the data into localStorage.
   *
   * @return [String]
   */
  async cartCreate() {
    const response = await this.spree.cart.create();

    // If we fail here it's probably a server error, so we inform the
    // user.
    if (response.isFail()) {
      this.handleFailure(response);
      return;
    }

    this.cart = response;
    this.storage.setItem("token", response.success().data.attributes.token);

    return this.token;
  }

  /*
   * Gets the order token and creates a cart if it doesn't exist.
   *
   * @return [String]
   */
  async tokenGetOrCreate() {
    let token = this.storage.getItem("token");

    return token || (await this.cartCreate());
  }

  /*
   * The variant ID is used to identify products
   *
   * @return [String]
   */
  get variantId() {
    return this.data.get("variantId");
  }

  get product() {
    const product = JSON.parse(this.storage.getItem(this.storageId));

    if (!product) {
      console.error(
        "El producto es nulo!",
        this.storageId,
        this.storage.length,
        this.cart
      );
    }

    return product;
  }

  /*
   * Obtains the line_item_id by a variant_id by inspecting the cart and
   * its included items
   *
   * @return [Object]
   */
  findLineItem() {
    const line_item = this.cart.included.find(
      (x) =>
        x.type === "line_item" &&
        x.relationships.variant.data.id == this.variantId
    );

    return line_item || {};
  }

  get storageId() {
    return `cart:item:${this.variantId}`;
  }

  /*
   * Stores an item for later usage.
   *
   * @see {./order_controller.js}
   */
  itemStore() {
    this.storage.setItem(
      this.storageId,
      JSON.stringify({
        variant_id: this.variantId,
        line_item: this.findLineItem(),
        image: this.data.get("image"),
        title: this.data.get("title"),
        url: this.data.get("url"),
        stock: this.data.get("stock"),
        in_stock: this.data.get("inStock"),
        extra: this.data.get("extra") ? this.data.get("extra").split("|") : [],
      })
    );
  }

  /*
   * Adds item to cart.  This is meant to be used by an "Add to cart"
   * button.  If the item already exists in the cart it updates the
   * quantity by +1.
   *
   * The item needs a variant ID to be added.
   */
  async add(event, quantity = 1, floating_alert = true) {
    const addedQuantity = this.addedQuantity();
    if (addedQuantity > 1) quantity = addedQuantity;

    const orderToken = await this.tokenGetOrCreate();
    const response = await this.spree.cart.addItem(
      { orderToken },
      { variant_id: this.variantId, quantity, include: "line_items" }
    );

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

    this.cart = response;
    this.itemStore();
    this.counterUpdate();
    this.fireCajon();

    if (floating_alert) {
      const site = window.site;
      const content = site.cart.added;
      window.dispatchEvent(
        new CustomEvent("floating:alert", { detail: { content } })
      );
    }
  }

  /*
   * Remove the element from the cart.  It contacts the API and if the
   * item is removed, it removes itself from the page and the storage.
   */
  async remove() {
    const product = this.product;

    if (!product) return;
    if (!product.line_item) return;

    const orderToken = this.token;
    const response = await this.spree.cart.removeItem(
      { orderToken },
      product.line_item.id,
      { include: "line_items" }
    );

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

    this.cart = response;
    this.storage.removeItem(this.storageId);
    this.element.remove();
    this.subtotalUpdate();
    this.counterUpdate();
  }

  /*
   * Shows variants
   */
  async variants() {
    const template = "variants";
    const data = {
      product: {
        variant_id: this.data.get("variantId"),
        digital_variant_id: this.data.get("digitalVariantId"),
        image: this.data.get("image"),
        title: this.data.get("title"),
        price: this.data.get("price"),
        digital_price: this.data.get("digitalPrice"),
        in_stock: this.data.get("inStock"),
        extra: this.data.get("extra").split("|"),
      },
    };

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

  /*
   * Recovers the order if something failed
   */
  async recover() {
    console.error("Recuperando pedido", this.token);

    // Removes the failing token
    this.storage.removeItem("token");

    // Get a new token and cart
    await this.tokenGetOrCreate();

    // Stores the previous cart
    const cart = this.cart;

    if (!cart) return;

    // Add previous items and their quantities to the new cart by
    // mimicking user's actions
    //
    // XXX: We don't use forEach because it's not async
    for (const variant of cart.data.relationships.variants.data) {
      this.data.set("variantId", variant.id);

      const product = this.product;

      if (!product) continue;

      this.data.set("image", product.image);
      this.data.set("title", product.title);
      this.data.set("extra", product.extra.join("|"));

      await this.add(null, product.line_item.attributes.quantity, false);
    }
  }

  /*
   * Si le compradore aumenta la cantidad antes de agregar
   */
  addedQuantity() {
    if (!this.hasAddedQuantityTarget) return 0;

    const addedQuantity = parseInt(this.addedQuantityTarget.value);

    return isNaN(addedQuantity) ? 0 : addedQuantity;
  }
}