theme-elegance/_dev/js/cart.js

import $ from "jquery";
import prestashop from "prestashop";
import debounce from "./components/debounce";

prestashop.cart = prestashop.cart || {};

prestashop.cart.active_inputs = null;

const spinnerSelector = 'input[name="product-quantity-spin"]';
let hasError = false;
let isUpdateOperation = false;
let errorMsg = "";

const CheckUpdateQuantityOperations = {
  switchErrorStat: () => {
    /**
     * if errorMsg is not empty or if notifications are shown, we have error to display
     * if hasError is true, quantity was not updated : we don't disable checkout button
     */
    const $checkoutBtn = $(prestashop.themeSelectors.checkout.btn);

    if (
      $(prestashop.themeSelectors.notifications.dangerAlert).length ||
      (errorMsg !== "" && !hasError)
    ) {
      $checkoutBtn.addClass("disabled");
    }

    if (errorMsg !== "") {
      const strError = `
        <article class="alert alert-danger" role="alert" data-alert="danger">
          <ul>
            <li>${errorMsg}</li>
          </ul>
        </article>
      `;
      $(prestashop.themeSelectors.notifications.container).html(strError);
      errorMsg = "";
      isUpdateOperation = false;
      if (hasError) {
        // if hasError is true, quantity was not updated : allow checkout
        $checkoutBtn.removeClass("disabled");
      }
    } else if (!hasError && isUpdateOperation) {
      hasError = false;
      isUpdateOperation = false;
      $(prestashop.themeSelectors.notifications.container).html("");
      $checkoutBtn.removeClass("disabled");
    }
  },
  checkUpdateOperation: (resp) => {
    /**
     * resp.hasError can be not defined but resp.errors not empty: quantity is updated but order cannot be placed
     * when resp.hasError=true, quantity is not updated
     */
    const { hasError: hasErrorOccurred, errors: errorData } = resp;
    hasError = hasErrorOccurred ?? false;
    const errors = errorData ?? "";

    // 1.7.2.x returns errors as string, 1.7.3.x returns array
    if (errors instanceof Array) {
      errorMsg = errors.join(" ");
    } else {
      errorMsg = errors;
    }

    isUpdateOperation = true;
  },
};

/**
 * Attach Bootstrap TouchSpin event handlers
 */
function createSpin() {
  $.each($(spinnerSelector), (index, spinner) => {
    $(spinner).TouchSpin({
      min: parseInt($(spinner).attr("min"), 10),
      max: 1000000,
    });
  });

  $(prestashop.themeSelectors.touchspin).off("touchstart.touchspin");

  CheckUpdateQuantityOperations.switchErrorStat();
}

const preventCustomModalOpen = (event) => {
  if (window.shouldPreventModal) {
    event.preventDefault();

    return false;
  }

  return true;
};
$(function () {
  const productLineInCartSelector =
    prestashop.themeSelectors.cart.productLineQty;
  const promises = [];

  prestashop.on("updatedCart", () => {
    window.shouldPreventModal = false;

    $(prestashop.themeSelectors.product.customizationModal).on(
      "show.bs.modal",
      (modalEvent) => {
        preventCustomModalOpen(modalEvent);
      },
    );

    createSpin();
  });

  createSpin();

  const $body = $("body");

  function isTouchSpin(namespace) {
    return namespace === "on.startupspin" || namespace === "on.startdownspin";
  }

  function shouldIncreaseProductQuantity(namespace) {
    return namespace === "on.startupspin";
  }

  function findCartLineProductQuantityInput($target) {
    const $input = $target
      .parents(prestashop.themeSelectors.cart.touchspin)
      .find(productLineInCartSelector);

    if ($input.is(":focus")) {
      return null;
    }

    return $input;
  }

  function camelize(subject) {
    const actionTypeParts = subject.split("-");
    let i;
    let part;
    let camelizedSubject = "";

    for (i = 0; i < actionTypeParts.length; i += 1) {
      part = actionTypeParts[i];

      if (i !== 0) {
        part = part.substring(0, 1).toUpperCase() + part.substring(1);
      }

      camelizedSubject += part;
    }

    return camelizedSubject;
  }

  function parseCartAction($target, namespace) {
    if (!isTouchSpin(namespace)) {
      return {
        url: $target.attr("href"),
        type: camelize($target.data("link-action")),
      };
    }

    const $input = findCartLineProductQuantityInput($target);

    if (!$input) {
      return false;
    }

    let cartAction = {};

    if (shouldIncreaseProductQuantity(namespace)) {
      cartAction = {
        url: $input.data("up-url"),
        type: "increaseProductQuantity",
      };
    } else {
      cartAction = {
        url: $input.data("down-url"),
        type: "decreaseProductQuantity",
      };
    }

    return cartAction;
  }

  const abortPreviousRequests = () => {
    let promise;
    while (promises.length > 0) {
      promise = promises.pop();
      promise.abort();
    }
  };

  const getTouchSpinInput = ($button) =>
    $($button.parents(prestashop.themeSelectors.cart.touchspin).find("input"));

  $(prestashop.themeSelectors.product.customizationModal).on(
    "show.bs.modal",
    (modalEvent) => {
      preventCustomModalOpen(modalEvent);
    },
  );

  const handleCartAction = (event) => {
    abortPreviousRequests();
    window.shouldPreventModal = true;
    event.preventDefault();

    const $target = $(event.currentTarget);
    const { dataset } = event.currentTarget;
    const cartAction = parseCartAction($target, event.namespace);
    const requestData = {
      ajax: "1",
      action: "update",
    };

    if (!cartAction) {
      return;
    }

    $.ajax({
      url: cartAction.url,
      method: "POST",
      data: requestData,
      dataType: "json",
      beforeSend(jqXHR) {
        promises.push(jqXHR);
      },
    })
      .then((resp) => {
        const $quantityInput = getTouchSpinInput($target);
        CheckUpdateQuantityOperations.checkUpdateOperation(resp);
        $quantityInput.val(resp.quantity);

        // Refresh cart preview
        prestashop.emit("updateCart", {
          reason: dataset,
          resp,
        });
      })
      .fail((resp) => {
        prestashop.emit("handleError", {
          eventType: "updateProductInCart",
          resp,
          cartAction: cartAction.type,
        });
      });
  };

  $body.on("click", prestashop.themeSelectors.cart.actions, handleCartAction);

  function sendUpdateQuantityInCartRequest(
    updateQuantityInCartUrl,
    requestData,
    $target,
  ) {
    abortPreviousRequests();
    window.shouldPreventModal = true;

    return $.ajax({
      url: updateQuantityInCartUrl,
      method: "POST",
      data: requestData,
      dataType: "json",
      beforeSend(jqXHR) {
        promises.push(jqXHR);
      },
    })
      .then((resp) => {
        CheckUpdateQuantityOperations.checkUpdateOperation(resp);

        $target.val(resp.quantity);
        const dataset = $target && $target.dataset ? $target.dataset : resp;

        // Refresh cart preview
        prestashop.emit("updateCart", {
          reason: dataset,
          resp,
        });
      })
      .fail((resp) => {
        prestashop.emit("handleError", {
          eventType: "updateProductQuantityInCart",
          resp,
        });
      });
  }

  function getQuantityChangeType($quantity) {
    return $quantity > 0 ? "up" : "down";
  }

  function getRequestData(quantity) {
    return {
      ajax: "1",
      qty: Math.abs(quantity),
      action: "update",
      op: getQuantityChangeType(quantity),
    };
  }

  function updateProductQuantityInCart(event) {
    const $target = $(event.currentTarget);
    const updateQuantityInCartUrl = $target.data("update-url");
    const baseValue = $target.attr("value");

    // There should be a valid product quantity in cart
    const targetValue = $target.val();
    /* eslint-disable */
    if (
      targetValue != parseInt(targetValue, 10) ||
      targetValue < 0 ||
      isNaN(targetValue)
    ) {
      window.shouldPreventModal = false;
      $target.val(baseValue);
      return;
    }
    /* eslint-enable */
    // There should be a new product quantity in cart
    const qty = targetValue - baseValue;

    if (qty === 0) {
      return;
    }

    if (targetValue === "0") {
      $target
        .closest(".product-line-actions")
        .find('[data-link-action="delete-from-cart"]')
        .click();
    } else {
      $target.attr("value", targetValue);
      sendUpdateQuantityInCartRequest(
        updateQuantityInCartUrl,
        getRequestData(qty),
        $target,
      );
    }
  }

  $body.on(
    "touchspin.on.stopspin",
    spinnerSelector,
    debounce(updateProductQuantityInCart),
  );

  $body.on("focusout keyup", productLineInCartSelector, (event) => {
    if (event.type === "keyup") {
      if (event.keyCode === 13) {
        isUpdateOperation = true;
        updateProductQuantityInCart(event);
      }

      return false;
    }

    if (!isUpdateOperation) {
      updateProductQuantityInCart(event);
    }

    return false;
  });

  const $timeoutEffect = 400;

  $body.on(
    "hidden.bs.collapse",
    prestashop.themeSelectors.cart.promoCode,
    () => {
      $(prestashop.themeSelectors.cart.displayPromo).show($timeoutEffect);
    },
  );

  $body.on("click", prestashop.themeSelectors.cart.promoCodeButton, (event) => {
    event.preventDefault();

    $(prestashop.themeSelectors.cart.promoCode).collapse("toggle");
  });

  $body.on("click", prestashop.themeSelectors.cart.displayPromo, (event) => {
    $(event.currentTarget).hide($timeoutEffect);
  });

  $body.on("click", prestashop.themeSelectors.cart.discountCode, (event) => {
    event.stopPropagation();

    const $code = $(event.currentTarget);
    const $discountInput = $(prestashop.themeSelectors.cart.discountName);

    $discountInput.val($code.text());
    // Show promo code field
    $(prestashop.themeSelectors.cart.promoCode).collapse("show");
    $(prestashop.themeSelectors.cart.displayPromo).hide($timeoutEffect);

    return false;
  });
});

$(document).ready(() => {
  prestashop.on("updateCart", (e) => {
    prestashop.cart = e.resp.cart;
    const n = $(".js-cart").data("refresh-url");
    if (!n) return;
    let o = {};
    e &&
      e.reason &&
      (o = {
        id_product_attribute: e.reason.idProductAttribute,
        id_product: e.reason.idProduct,
      }),
      $.post(n, o)
        .then((e) => {
          $(prestashop.selectors.cart.detailedTotals).replaceWith(
            e.cart_detailed_totals,
          ),
            $(prestashop.selectors.cart.summaryItemsSubtotal).replaceWith(
              e.cart_summary_items_subtotal,
            ),
            $(prestashop.selectors.cart.summarySubTotalsContainer).replaceWith(
              e.cart_summary_subtotals_container,
            ),
            $(prestashop.selectors.cart.summaryProducts).replaceWith(
              e.cart_summary_products,
            ),
            $(prestashop.selectors.cart.summaryTotals).replaceWith(
              e.cart_summary_totals,
            ),
            $(prestashop.selectors.cart.detailedActions).replaceWith(
              e.cart_detailed_actions,
            ),
            $(prestashop.selectors.cart.voucher).replaceWith(e.cart_voucher),
            $(prestashop.selectors.cart.overview).replaceWith(e.cart_detailed),
            $(prestashop.selectors.cart.summaryTop).replaceWith(
              e.cart_summary_top,
            ),
            $(prestashop.selectors.cart.productCustomizationId).val(0),
            $(prestashop.selectors.cart.lineProductQuantity).each((e, n) => {
              const r = $(n);
              r.attr("value", r.val());
            }),
            $(prestashop.selectors.checkout.cartPaymentStepRefresh).length &&
              i(),
            prestashop.emit("updatedCart", {
              eventType: "updateCart",
              resp: e,
            });
        })
        .fail((e) => {
          prestashop.emit("handleError", { eventType: "updateCart", resp: e });
        });
  });
  const e = $("body");
  e.on("click", '[data-button-action="add-to-cart"]', (e) => {
    e.preventDefaul$;
    const n = $(e.currentTarget.form),
      o = `${n.serialize()}&add=1&action=update`,
      i = n.attr("action"),
      a = $(e.currentTarget);
    a.prop("disabled", !0);
    let s = (e) => {
      e
        .parents(prestashop.selectors.product.addToCart)
        .firs$.find(prestashop.selectors.product.minimalQuantity)
        .addClass("error"),
        e.paren$.find("label").addClass("error");
    };
    const c = n.find("input[min]");
    ((e) => {
      let n = !0;
      return (
        e.each((e, r) => {
          const o = $(r),
            i = parseInt(o.attr("min"), 10);
          i && o.val() < i && (s(o), (n = !1));
        }),
        n
      );
    })(c)
      ? $.post(i, o, null, "json")
          .then((e) => {
            e.hasError
              ? prestashop.emit("handleError", {
                  eventType: "addProductToCart",
                  resp: e,
                })
              : prestashop.emit("updateCart", {
                  reason: {
                    idProduct: e.id_product,
                    idProductAttribute: e.id_product_attribute,
                    idCustomization: e.id_customization,
                    linkAction: "add-to-cart",
                    cart: e.cart,
                  },
                  resp: e,
                });
          })
          .fail((e) => {
            prestashop.emit("handleError", {
              eventType: "addProductToCart",
              resp: e,
            });
          })
          .always(() => {
            setTimeout(() => {
              a.prop("disabled", !1);
            }, 1e3);
          })
      : s(c);
  }),
    e.off("submit", '[data-link-action="add-voucher"]'),
    e.on("submit", '[data-link-action="add-voucher"]', (e) => {
      const promoSubmitBtn = $("#promo-code-form button");
      e.preventDefault();
      const n = $(e.currentTarget),
        o = n.attr("action");
      0 === n.find("[name=action]").length &&
        n.append($("<input>", { type: "hidden", name: "ajax", value: 1 })),
        0 === n.find("[name=action]").length &&
          n.append(
            $("<input>", { type: "hidden", name: "action", value: "update" }),
          ),
        promoSubmitBtn.text("CHECKING");
      promoSubmitBtn.prop("disable", true);
      $.post(o, n.serialize(), null, "json")
        .then((n) => {
          n.hasError
            ? $(".js-error").show().find(".js-error-text").text(n.errors[0])
            : prestashop.emit("updateCart", {
                reason: e.target.dataset,
                resp: n,
              });
          promoSubmitBtn.text("ADD");
          promoSubmitBtn.prop("disable", false);
        })
        .fail((e) => {
          prestashop.emit("handleError", {
            eventType: "updateCart",
            resp: e,
          });
          promoSubmitBtn.text("ADD");
          promoSubmitBtn.prop("disable", false);
        });
    });
});