@salla.sa/twilight-components
Version:
Salla Web Component
95 lines (90 loc) • 5.03 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
'use strict';
var index = require('./index-uoA36zqH.js');
var helpers = require('./helpers-BJ2rnhxz.js');
require('./interfaces-Bh7W0bEU.js');
const sallaOrderEditItemCss = ":host{display:block}";
const SallaOrderEditItem = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.orderItemUpdated = index.createEvent(this, "orderItemUpdated");
this.orderItemRemoved = index.createEvent(this, "orderItemRemoved");
this.quantityInput = null;
this.productOptions = null;
this.handleQuantityChange = (event) => {
const detail = event.detail;
const newQuantity = detail?.quantity ?? parseInt(event.target.value, 10);
if (isNaN(newQuantity) || newQuantity < 1)
return;
if (newQuantity === this.quantity)
return;
this.quantity = newQuantity;
this.emitUpdate(newQuantity);
};
this.handleOptionsChange = () => {
this.emitUpdate(this.quantity);
};
}
componentWillLoad() {
this.quantity = this.item?.quantity || 1;
}
handleItemChange(newItem) {
const newQuantity = newItem?.quantity || 1;
if (newQuantity === this.quantity)
return;
this.quantity = newQuantity;
this.quantityInput?.setValue?.(newQuantity, false);
}
get hasOptions() {
return (this.item.product?.options?.length || 0) > 0;
}
async getSelectedOptions() {
return (await this.productOptions?.getSelectedOptionsData?.()) || {};
}
async getOptionsData() {
return (await this.productOptions?.getOptionsData?.()) || this.item.product?.options || [];
}
async emitUpdate(quantity) {
const itemId = this.item?.id;
if (itemId == null)
return;
const detail = { itemId, quantity };
if (this.hasOptions) {
detail.options = await this.getSelectedOptions();
detail.optionDefinitions = await this.getOptionsData();
}
this.orderItemUpdated.emit(detail);
}
removeItem() {
const itemId = this.item?.id;
if (itemId == null)
return;
this.orderItemRemoved.emit({ itemId });
}
render() {
if (!this.item)
return null;
const product = this.item.product;
const productName = this.item.name || product?.name || '';
const imageUrl = product?.image?.url || '';
const imageAlt = product?.image?.alt || productName;
const productUrl = product?.url || '#';
const price = product?.price;
const maxQuantity = helpers.getOrderEditProductMaxQuantity(product);
const weightLabel = product?.weight_label;
const options = this.item.product?.options;
const optionsInstanceKey = `order-edit-item-${this.item.id}-${product?.id}`;
const quantityAttrs = { value: this.quantity };
if (maxQuantity) {
quantityAttrs.max = maxQuantity;
}
return (index.h(index.Host, null, index.h("div", null, index.h("div", { class: "s-order-edit-item-header" }, index.h("div", { class: "s-order-edit-item-media" }, imageUrl && (index.h("a", { href: productUrl }, index.h("img", { src: imageUrl, alt: imageAlt, class: "s-order-edit-item-image" }))), index.h("div", { class: "s-order-edit-item-details" }, index.h("h2", { class: "s-order-edit-item-name" }, index.h("a", { href: productUrl, class: "s-order-edit-item-link" }, productName)), price != null && (index.h("span", { class: "s-order-edit-item-price", innerHTML: salla.money(price) })), weightLabel && (index.h("p", { class: "s-order-edit-item-weight" }, salla.lang.getWithDefault('pages.products.weight', 'الوزن'), " ", weightLabel)))), index.h("salla-button", { type: "button", shape: "icon", size: "small", color: "danger", "aria-label": salla.lang.getWithDefault('common.elements.delete', 'حذف'), onClick: () => this.removeItem() }, index.h("i", { class: "sicon-cancel" }))), index.h("div", { class: "s-order-edit-item-quantity" }, index.h("h3", { class: "s-order-edit-item-quantity-label" }, salla.lang.getWithDefault('common.elements.quantity', 'الكمية')), index.h("div", { class: "s-order-edit-item-quantity-input" }, index.h("salla-quantity-input", { ref: el => (this.quantityInput = el), ...quantityAttrs, onChange: this.handleQuantityChange }))), this.hasOptions && (index.h("form", { class: "s-order-edit-item-options", onSubmit: e => e.preventDefault() }, index.h("salla-product-options", { ref: el => (this.productOptions = el), onChange: this.handleOptionsChange, "product-id": product.id, "unique-key": optionsInstanceKey, options: JSON.stringify(options), key: `${optionsInstanceKey}-options` }))))));
}
static get watchers() { return {
"item": ["handleItemChange"]
}; }
};
SallaOrderEditItem.style = sallaOrderEditItemCss;
exports.salla_order_edit_item = SallaOrderEditItem;