import { r as registerInstance, h, H as Host, g as getElement } from './index-d84fffc3.js'; function replaceUrlParameter(url, paramName, paramValue) { if (paramValue == null) { paramValue = ""; } var pattern = new RegExp("\\b(" + paramName + "=).*?(&|#|$)"); if (url.search(pattern) >= 0) { return url.replace(pattern, "$1" + paramValue + "$2"); } url = url.replace(/[?#]$/, ""); return (url + (url.indexOf("?") > 0 ? "&" : "?") + paramName + "=" + paramValue); } const shopProductLineItemCss = ".ux-iws-shop-lineitem .ux-iws-shop-lineitem__price__crossprice,.ux-iws-shop-lineitem .ux-iws-shop-lineitem__price__crossprice-condition{text-align:right}"; let ShopProductLineItem = class { constructor(hostRef) { registerInstance(this, hostRef); this.baseClass = "ux-iws-shop-product-line-item"; /** when this is set, the component will request data on its own */ this.priceEndpoint = null; this.updateCount = 0; this.updateQuantityInEndpointUrl = () => { let quantityField = this.domNode.querySelector(".ux-iws-shop-lineitem__price .quantity-input__field"); if (quantityField === null) { return this.priceEndpoint; } let quantity = quantityField["value"]; return replaceUrlParameter(this.priceEndpoint, "Quantity", quantity); }; this.updateQuantityInAllHrefUrls = () => { let quantityField = this.domNode.querySelector(".ux-iws-shop-lineitem__price .quantity-input__field"); if (quantityField === null) { return; } let quantity = quantityField["value"]; let elementsToUpdate = this.domNode.querySelectorAll(".ux-iws-shop-lineitem__has-quantity-url"); elementsToUpdate.forEach(function (elementToUpdate) { let currentHrefUrl = elementToUpdate.getAttribute("href"); if (currentHrefUrl === null) { return; } let updatedHrefUrl = replaceUrlParameter(currentHrefUrl, "Quantity", quantity); elementToUpdate.setAttribute("href", updatedHrefUrl); }); }; this.updateAvailabilityData = (priceData) => { let availabilityNode = this.domNode.querySelector(".text-availability"); if (availabilityNode === null) { return; } if (priceData.availability == "GREEN") { availabilityNode.classList.add("text-availability--available"); availabilityNode.innerHTML = availabilityNode.dataset.textGreen; } else if (priceData.availability == "YELLOW" && "availabilityDate" in priceData) { availabilityNode.classList.add("text-availability--limited"); availabilityNode.innerHTML = availabilityNode.dataset.textYellow + " " + priceData.availabilityDate; } else { availabilityNode.classList.add("text-availability--sold"); availabilityNode.innerHTML = ""; } }; this.updateLineItemPrices = (priceData) => { let listPriceNode = this.domNode.querySelector(".ux-iws-shop-lineitem__list-price"); let myPriceNode = this.domNode.querySelector(".ux-iws-shop-lineitem__my-price"); let totalPriceNode = this.domNode.querySelector(".ux-iws-shop-lineitem__price__sum"); let crossPriceNode = this.domNode.querySelector(".ux-iws-shop-lineitem__price__crossprice"); let crossPriceConditionNode = this.domNode.querySelector(".ux-iws-shop-lineitem__price__crossprice-condition"); if (listPriceNode != null) { listPriceNode.innerHTML = priceData.listPrice; } if (myPriceNode != null) { myPriceNode.innerHTML = priceData.myPrice; } if (totalPriceNode != null) { totalPriceNode.innerHTML = priceData.totalPrice; } if (priceData.promotion == "true") { if (crossPriceNode != null) { crossPriceNode.innerHTML = priceData.strikedPrice; } if (crossPriceConditionNode != null) { crossPriceConditionNode.innerHTML = priceData.crossOutCondition; crossPriceConditionNode.classList.add("ux-color-error"); } if (totalPriceNode != null) { totalPriceNode.classList.add("ux-color-error"); } } }; this.updateSubItemPrices = (priceData) => { let subItemPriceNodes = this.domNode.querySelectorAll(".ux-iws-shop-lineitem__subitems .price"); priceData.subItemPrices.forEach(function (subItemPrice, index) { if (index < subItemPriceNodes.length) { subItemPriceNodes[index].innerHTML = subItemPrice; } }); }; this.addLoadingIndicator = () => { let loadingIndicatorHtml = '
'; let listPriceNode = this.domNode.querySelector(".ux-iws-shop-lineitem__list-price"); let myPriceNode = this.domNode.querySelector(".ux-iws-shop-lineitem__my-price"); let totalPriceNode = this.domNode.querySelector(".ux-iws-shop-lineitem__price__sum"); let crossPriceNode = this.domNode.querySelector(".ux-iws-shop-lineitem__price__crossprice"); let crossPriceConditionNode = this.domNode.querySelector(".ux-iws-shop-lineitem__price__crossprice-condition"); let availabilityNode = this.domNode.querySelector(".text-availability"); if (listPriceNode != null) { listPriceNode.innerHTML = loadingIndicatorHtml; } if (myPriceNode != null) { myPriceNode.innerHTML = loadingIndicatorHtml; } if (totalPriceNode != null) { totalPriceNode.innerHTML = loadingIndicatorHtml; totalPriceNode.classList.remove("ux-color-error"); } this.domNode .querySelectorAll(".ux-iws-shop-lineitem__subitems .price") .forEach(function (subItemPriceNode) { subItemPriceNode.innerHTML = loadingIndicatorHtml; }); if (availabilityNode != null) { availabilityNode.innerHTML = loadingIndicatorHtml; availabilityNode.classList.remove("text-availability--available"); availabilityNode.classList.remove("text-availability--limited"); availabilityNode.classList.remove("text-availability--sold"); } if (crossPriceNode != null) { crossPriceNode.innerHTML = ""; } if (crossPriceConditionNode != null) { crossPriceConditionNode.innerHTML = ""; crossPriceConditionNode.classList.remove("ux-color-error"); } }; this.initQuantityInput = () => { let me = this; let quantityInput = this.domNode.querySelector(".quantity-input"); if (quantityInput != null) { quantityInput .querySelector(".quantity-input__btn--minus") .addEventListener("click", function () { let inputField = this.parentNode.querySelector(".quantity-input__field"); let inputValue = parseInt(inputField.value); if (inputValue > 1) { inputField.value = --inputValue; inputField.dispatchEvent(new Event("change")); } }); quantityInput .querySelector(".quantity-input__btn--plus") .addEventListener("click", function () { let inputField = this.parentNode.querySelector(".quantity-input__field"); let inputValue = parseInt(inputField.value); inputField.value = ++inputValue; inputField.dispatchEvent(new Event("change")); }); this.domNode .querySelector(".ux-iws-shop-lineitem__price .quantity-input__field") .addEventListener("change", function () { let url = this.dataset.quantityUpdateUrl + "&Quantity=" + this.value; me.updateQuantityInAllHrefUrls(); me.addLoadingIndicator(); fetch(url, { method: "GET", }).then(function (response) { if (response != null) { me.updateCount = me.updateCount + 1; } }); }); } }; } componentDidLoad() { this.addLoadingIndicator(); this.getAsyncContent(); this.initQuantityInput(); } componentDidUpdate() { this.getAsyncContent(); } async getAsyncContent() { let priceEndpointByQuantity = this.updateQuantityInEndpointUrl(); let priceData = await fetch(priceEndpointByQuantity, { method: "GET", }); let priceDataJson = await priceData.json(); this.updateLineItemPrices(priceDataJson); this.updateAvailabilityData(priceDataJson); this.updateSubItemPrices(priceDataJson); } /** * Render ListItem */ render() { return (h(Host, { class: `${this.baseClass}` }, h("slot", { name: "WishlistItem" }))); } get domNode() { return getElement(this); } }; ShopProductLineItem.style = shopProductLineItemCss; export { ShopProductLineItem as ux_iws_shop_product_line_item };