@salla.sa/twilight-components
Version:
Salla Web Component
219 lines (215 loc) • 13.9 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, a as getElement } from './index-BHYtfMwX.js';
import { S as SpecialDiscountIcon } from './special-discount-Ctkfc4K-.js';
import { S as SITag } from './tag-cgSL_BIo.js';
import { S as SICart2 } from './cart2-D1s2kXqL.js';
const sallaOfferModalCss = ".s-offer-modal-type-products .s-modal-body{min-height:690px;position:relative}";
const SallaOfferModal = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.offer = null;
this.hasError = false;
this.translationLoaded = false;
this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
salla.event.on('offer-modal::open', product_id => this.open(product_id));
salla.lang.onLoaded(() => {
this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
this.translationLoaded = true;
});
this.categorySlot = this.host.querySelector('[slot="category"]')?.innerHTML || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><span class="s-offer-modal-badge-text">{name}</span>`;
// this.productSlot = this.host.querySelector('[slot="product"]')?.innerHTML || this.defaultProductSlot();
salla.event.on('offer-modal::open', product_id => this.open(product_id));
salla.product.event.onOfferExisted(offer => {
if (salla.storage.get('remember-offer-' + offer.id)) {
salla.log('User selected to don\'t show this offer again.');
return;
}
this.open(offer.product_id);
});
}
/**
* Emits a promotion viewed event for analytics tracking
* @param offer - The offer being viewed in the modal
*/
emitPromotionViewed(offer) {
if (!offer)
return;
salla.event.emit('promotion::viewed', [{
id: offer.id?.toString(),
creative: offer.message,
name: offer.name,
position: `${this.offer_type}_offer_modal`
}]);
}
/**
* Emits a promotion clicked event for analytics tracking
* @param offer - The offer being clicked in the modal
*/
emitPromotionClicked(offer) {
if (!offer)
return;
salla.event.emit('promotion::clicked', [{
id: offer.id?.toString(),
creative: offer.message,
name: offer.name,
position: `${this.offer_type}_offer_modal`
}]);
}
/**
* Show the available offers for the product
* @param product_id
*/
async open(product_id) {
this.productID = product_id;
//TODO:: make sure there is only one offer
this.hasError = false;
this.modal.loading(); // Reset loading state for subsequent opens
return await salla.api.withoutNotifier(() => salla.product.offers(product_id))
.then(response => {
// Check if there are offers before opening the modal
if (!response.data || !response.data.length) {
return; // Don't open modal if no offers
}
this.modal.open();
this.showOffer(response.data[0]);
})
.catch(e => {
this.hasError = true;
this.errorMessage = e.response?.data?.error?.message || e.response?.data;
this.modal.open(); // Open modal to show error
})
.finally(() => {
// Only stop loading if modal was opened (either for offers or errors)
if (this.modal.visible) {
setTimeout(() => this.modal.stopLoading(), 1000);
}
});
}
/**
* Show offer details
* @param {Offer} offer
*/
async showOffer(offer) {
this.offer = offer;
this.offer_name = offer.name;
this.offer_message = offer.message;
if (this.offer.get.discounts_table) {
this.offer_type = 'discounts-table';
}
else if (this.offer.get.products?.length) {
this.offer_type = 'products';
}
else if (this.offer.get.categories?.length) {
this.offer_type = 'categories';
}
else if (this.offer.get.brands?.length) {
this.offer_type = 'brands';
}
else if (this.offer.get.tags?.length) {
this.offer_type = 'tags';
}
this.modal.setTitle(this.offer_name);
this.emitPromotionViewed(this.offer);
}
rememberMe(event) {
salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
}
addToCart(qty) {
//todo:: add enhancement, to cover the previous quantity, because if the discount to add two, user already added one before.
this.emitPromotionClicked(this.offer);
salla.api.withoutNotifier(() => salla.cart.quickAdd(this.productID, qty, this.offer_type)).then(() => this.modal.close());
}
getOfferContent() {
if (this.offer.get.discounts_table) {
return h("div", { class: "s-offer-modal-discount-table" }, h("table", null, h("tbody", null, this.offer.get.discounts_table?.map(discount => h("tr", null, h("td", null, discount.text), h("td", { class: "s-offer-modal-discount-table-cell" }, h("salla-button", { fill: "outline", shape: "btn", color: "primary", size: "medium", width: "normal", onClick: () => this.addToCart(discount.quantity) }, this.addToCartLabel)))))));
}
else if (this.offer.get.products?.length) {
const productsCount = this.offer.get.products?.length || 0;
const sliderConfig = {
slidesPerView: 'auto',
spaceBetween: 16,
breakpoints: {
768: {
slidesPerView: Math.min(2, productsCount),
spaceBetween: 16
},
1024: {
slidesPerView: Math.min(3, productsCount),
spaceBetween: 16
}
}
};
return (h("salla-products-slider", { key: (this.offer.get.products?.map(product => product.id) || []).join(","), source: "selected", "source-value": `[${(this.offer.get.products?.map(product => product.id) || []).join(",")}]`, "slider-config": JSON.stringify(sliderConfig) }));
// return <salla-slider
// type="carousel"
// class={{"s-offer-modal-slider-centered": this.offer.get.products?.length <= 2, "s-offer-modal-slider": true}}
// id="offer-modal-slider"
// controls-outer
// show-controls={this.offer.get.products?.length <= 2 ? 'false' : 'true'}>
// <div slot='items'>
// {
// this.offer.get.products?.map(product =>
// <div class={{
// "s-offer-modal-product": true,
// "s-offer-modal-slider-item": true,
// "s-offer-modal-not-available": !product.is_available
// }} id={'product_' + product.id} innerHTML={this.productSlot
// .replace(/\{name\}/g, product.name)
// .replace(/\{url\}/g, product.url)
// .replace(/\{image\}/g, product.thumbnail)
// .replace(/\{price\}/g, product.has_special_price
// ? '<span class="s-offer-modal-product-sale-price">' + salla.money(product.price) + '</span><span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
// : salla.money(product.price))}>
// <div class="s-offer-modal-btn-wrap">
// <salla-button width="wide" fill='outline' data-id={product.id} disabled={!product.is_available}
// loader-position="center" onClick={this.addItem}>
// {product.is_available ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.out_of_stock')}
// </salla-button>
// </div>
// </div>)
// }
// </div>
// </salla-slider>
}
else if (this.offer.get.categories?.length) {
return h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": this.offer.get.categories?.length <= 2, "s-offer-modal-slider": true }, id: "offer-modal-slider", "controls-outer": true, "show-controls": this.offer.get.categories?.length <= 2 ? 'false' : 'true' }, h("div", { slot: 'items' }, this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item s-offer-modal-cat-item", innerHTML: this.categorySlot
.replace(/\{tagIcon\}/g, SITag)
.replace(/\{name\}/g, category.name)
.replace(/\{url\}/g, category.urls.customer) }))));
}
else if (this.offer.get.brands?.length) {
return h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": this.offer.get.brands?.length <= 2, "s-offer-modal-slider": true }, id: "offer-modal-slider", "controls-outer": true, "show-controls": this.offer.get.brands?.length <= 2 ? 'false' : 'true' }, h("div", { slot: 'items' }, this.offer.get.brands.map((brand) => h("a", { href: brand.url || salla.url.create('brands', brand.id), class: "s-offer-modal-badge s-offer-modal-slider-item s-offer-modal-brand-item" }, h("div", { class: "s-offer-modal-brand-logo" }, h("img", { src: brand.logo, alt: brand.name })), h("span", { class: "s-offer-modal-badge-text" }, brand.name)))));
}
else if (this.offer.get.tags?.length) {
return h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": this.offer.get.tags?.length <= 2, "s-offer-modal-slider": true }, id: "offer-modal-slider", "controls-outer": true, "show-controls": this.offer.get.tags?.length <= 2 ? 'false' : 'true' }, h("div", { slot: 'items' }, this.offer.get.tags.map((tag) => h("a", { href: tag.url || salla.url.create('tags', tag.id), class: "s-offer-modal-badge s-offer-modal-slider-item s-offer-modal-tag-item" }, h("span", { class: "s-offer-modal-badge-icon", innerHTML: SITag }), h("span", { class: "s-offer-modal-badge-text" }, tag.name)))));
}
}
//todo:: pass event then use sallaButton from it
// private addItem() {
// // this here, is sallaButton
// this['load']();
// return salla.cart.api
// .quickAdd(this['dataset'].id)
// .finally(() => this['stop']());
// }
// private defaultProductSlot() {
// return '<a href={url} class="s-offer-modal-product-image-wrap"><img class="s-offer-modal-product-image" src="{image}" /></a>' +
// '<div class="s-offer-modal-product-info">' +
// ' <a href={url} class="s-offer-modal-product-name">{name}</a>' +
// ' <div class="s-offer-modal-product-price">{price}</div>' +
// '</div>';
// }
render() {
return h("salla-modal", { key: 'ff61bf49e9c643c1c6beab5cc6b96034fe08e003', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: '18c331729d5a7c7e5cec39de739c19ae18d4a633', slot: 'loading' }, h("div", { key: '4b0fbc90ddc59e069ca069b71e7bf9d0aeeca6de', class: "s-offer-modal-skeleton" }, h("div", { key: '19d49c45a312088566d492dd39095b0189abcf44', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '8f3b0325261d8f740f861a17cfd17c717e1861a0', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: 'c0a72538ccedbf53d5a373a6292108a64abbeb69', height: '15px', width: '50%' }), h("salla-skeleton", { key: '10dd084db31afa2f1d1615ec266c444f85b43c16', height: '10px', width: '30%' })), h("div", { key: '4b995981588f58bae1ec76e22714416f9c1fec02', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: SICart2 }))))), h("div", { key: '4977b506e320763423c11c5f6bf570079baefb29', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '32f0f18e7675ed987aebe92c5150540e6acdcbbc', height: '15px', width: '50%' }), h("salla-skeleton", { key: '39f80f6d038c72b281973f2993ff12a1dd6db7cc', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
h("p", { class: "s-offer-modal-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.formatted_date)
: '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", salla.lang.get('common.elements.remember_my_choice'))),
] :
h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : ''));
}
get host() { return getElement(this); }
};
SallaOfferModal.style = sallaOfferModalCss;
export { SallaOfferModal as salla_offer_modal };