@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-offer.js

@@ -1,4 +1,481 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as e,h as o}from"@stencil/core/internal/client";import{d as a}from"./salla-accordion2.js";import{d as r}from"./salla-accordion-body2.js";import{d as i}from"./salla-accordion-head2.js";import{d as l}from"./salla-drawer2.js";import{d as c}from"./salla-loading2.js";import{d as n}from"./salla-products-list2.js";import{d}from"./salla-slider2.js";var f,u;!function(s){s.ProductDetail="product.single",s.Cart="cart"}(f||(f={})),function(s){s.Conditional="conditional",s.PercentageOrFixed="fixed",s.DiscountsTable="discounts_table",s.Bank="bank",s.BuyXGetY="buy_x_get_y",s.SpecialPrice="special_price",s.Percentage="percentage",s.FixedAmount="fixed_amount"}(u||(u={}));const h=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.productCardComponent="salla-product-card",this.offersList=[],this.canRender=!1,this.showOffer=salla.config.get("store.settings.product.show_special_offers"),this.showAllOffersModal=!1,this.showProductsModal=!1,this.selectedOfferProducts=[],this.collapsedOffers={},this.expandedCategories={},this.productsLoaded=!1,this.offer_with_price_text=salla.lang.get("pages.offer.with_price",{price:""}),this.with_discount_text=salla.lang.get("pages.products.with_a_discount"),this.product_discount_text=salla.lang.get("pages.products.discount"),this.special_offer_text=salla.lang.get("pages.products.special_offer"),this.buy_quantity_text=s=>salla.lang.get("pages.offer.buy_quantity",{quantity:s}),this.products_link_text=salla.lang.get("pages.offer.included_products","المنتجات المشمولة"),this.min_spend_text=(s,t)=>salla.lang.get("pages.offer.min_spend_amount",{amount:s,currency:t},`بحد أدنى ${s} ${t} من مبلغ الشراء`),this.min_items_text=s=>salla.lang.get("pages.offer.min_items",{items:s},`بحد أدنى ${s} منتجات`),this.product_text=salla.lang.get("common.elements.product","منتج"),salla.lang.onLoaded((()=>{this.offer_with_price_text=salla.lang.get("pages.offer.with_price"),this.with_discount_text=salla.lang.get("pages.products.with_a_discount"),this.product_discount_text=salla.lang.get("pages.products.discount"),this.special_offer_text=salla.lang.get("pages.products.special_offer"),this.buy_quantity_text(0),this.products_link_text=salla.lang.get("pages.offer.included_products","المنتجات المشمولة"),this.min_spend_text=(s,t)=>salla.lang.get("pages.offer.min_spend_amount",{amount:s,currency:t},`بحد أدنى ${s} ${t} من مبلغ الشراء`),this.min_items_text=s=>salla.lang.get("pages.offer.min_items",{items:s},`بحد أدنى ${s} منتجات`),this.product_text=salla.lang.get("common.elements.product","منتج")})),salla.onReady((()=>{this.currentPage=salla.config.get("page.slug");const s=salla.config.get("currencies")||{},t=salla.config.get("user.currency_code");this.userCurrency=s[t]||{symbol:"",code:t||"SAR",name:""}}))}async getEndpointByPageName(){return this.currentPage==f.Cart?"offers/cart/"+await Salla.cart.getCurrentCartId():this.currentPage==f.ProductDetail?"offers/product/"+salla.config.get("page.id"):"offers"}emitPromotionViewed(){if(!(this.offersList.length&&this.canRender&&this.showOffer))return;const s=this.offersList.slice(0,5).map(((s,t)=>({id:s.id,name:s.title,creative:s.description||"",position:t+1})));salla.event.emit("salla::offer.promotion.viewed",s)}emitPromotionClicked(s,t=1){if(!(this.offersList.length&&this.canRender&&this.showOffer))return;const e=s||this.offersList[0];salla.event.emit("salla::offer.promotion.clicked",[{id:e.id,name:e.title,creative:e.description||"",position:t}])}componentWillLoad(){return this.hasCustomComponent=!!customElements.get(this.productCardComponent),new Promise((s=>salla.onReady(s))).then((()=>{if(this.showOffer=!salla.url.is_page("product.single")||salla.config.get("store.settings.product.show_special_offers"),!this.showOffer)throw Error("Merchant disabled showing the offers on product page")})).then((async()=>salla.api.request(await this.getEndpointByPageName()))).then((async s=>{if(!(this.offersList=s.data).length)throw Error("salla-offers:: There is no offers!");if(this.offersList=this.offersList.filter((s=>[u.SpecialPrice,u.Bank,u.BuyXGetY,u.DiscountsTable,u.PercentageOrFixed,u.Percentage,u.FixedAmount].includes(s.type))),!this.offersList.length)throw Error("salla-offers:: No supported offer types found!");let t=null;this.offersList.some((s=>{const t=s.details;return"category"===t.apply_to&&t.targets||"categories"===t.apply_to&&t.targets||s.type===u.BuyXGetY&&("categories"===t.get?.source||"category"===t.get?.source)}))&&(t=(await salla.product.api.categories()).data);const e=new Set;for(const s of this.offersList){const t=s.details;"product"!==t.apply_to&&"products"!==t.apply_to||!t.targets||t.targets.forEach((s=>e.add(s))),s.type===u.BuyXGetY&&"products"===t.get?.source&&t.get?.source_value&&t.get.source_value.forEach((s=>e.add(s))),s.type!==u.BuyXGetY||"products"!==t.buy?.source&&"product"!==t.buy?.source||!t.buy?.source_value||t.buy.source_value.forEach((s=>e.add(s)))}let o={};if(e.size>0)try{const s=await salla.product.api.fetch({source:"selected",source_value:Array.from(e)});o=Object.fromEntries(s.data.map((s=>[s.id,s])))}catch(s){o={}}for(const s of this.offersList){const e=s.details;if(("category"===e.apply_to&&e.targets||"categories"===e.apply_to&&e.targets)&&t&&(e.categories=this.findCategories(t,e.targets)),"product"!==e.apply_to&&"products"!==e.apply_to||!e.targets||(e.products=e.targets.map((s=>o[s])).filter(Boolean)),s.type===u.BuyXGetY&&e.get){const s=e.get;"products"===s.source&&s.source_value?s.products=s.source_value.map((s=>o[s])).filter(Boolean):("categories"===s.source||"category"===s.source)&&t&&s.source_value&&(s.categories=this.findCategories(t,s.source_value),e.categories=s.categories)}if(s.type===u.BuyXGetY&&e.buy){const s=e.buy;"products"!==s.source&&"product"!==s.source||!s.source_value||(s.products=s.source_value.map((s=>o[s])).filter(Boolean))}}return this.offersList})).then((()=>{this.canRender=!0})).catch((s=>{salla.logger.warn(s)}))}componentDidLoad(){let s=this.host.querySelector(".s-slider-block__title-nav");s?.classList.add("s-offer-bank-payment-nav"),this.emitPromotionViewed()}findCategories(s,t){let e=[];for(const o of s)t.includes(o.id_||o.id)&&e.push(o),o.sub_categories?.length>0&&(e=e.concat(this.findCategories(o.sub_categories,t)));return e}render(){if(!this.offersList.length||!this.canRender||!this.showOffer)return null;const s=salla.lang.get("pages.offer.offers_title","عروض المنتج"),t=salla.lang.get("pages.offer.offers_subtitle","احصل على المنتج بسعر مخفض مع أفضل العروض");return[o("div",{class:"s-offer-wrapper"},o("salla-slider",{type:"carousel",id:"offers-slider","block-title":s,"block-subTitle":t,"show-controls":this.offersList.length>1},o("div",{slot:"items"},this.offersList.slice(0,5).map(((s,t)=>this.renderOfferCard(s,t+1))),this.offersList.length>5&&this.renderShowMoreCard()))),this.renderAllOffersModal(),this.renderProductsModal()]}renderShowMoreCard(){return o("div",{class:"s-offer-slide-one-fourth swiper-slide",onClick:s=>{s.preventDefault(),s.stopPropagation(),this.openAllOffersModal()}},o("div",{class:"s-offer-card s-offer-show-more-card"},o("i",{class:"sicon-add s-offer-show-more-icon"}),o("h3",{class:"s-offer-show-more-title"},salla.lang.get("pages.offer.show_more_offers","عرض المزيد من العروض"))))}openAllOffersModal(){this.showAllOffersModal=!0}closeAllOffersModal(){this.showAllOffersModal=!1}closeProductsModal(){this.showProductsModal=!1,this.selectedOfferProducts=[],this.productsLoaded=!1}handleAccordionToggle(s,t){this.collapsedOffers={...this.collapsedOffers,[s]:t}}getOfferProducts(s){const t=s.details;return t.products&&t.products.length>0?t.products:s.type===u.BuyXGetY&&t.get?.products?t.get.products:[]}renderProductsLinkForModalCard(s,t){const e=this.getOfferProducts(s);return e&&0!==e.length?o("div",{class:"s-offer-products-link",onClick:s=>{s.stopPropagation(),this.selectedOfferProducts=e,this.showProductsModal=!0}},o("span",{class:"s-offer-products-link-text"},this.products_link_text),t&&o("i",{class:"sicon-keyboard_arrow_down s-offer-products-link-icon"})):null}renderAllOffersModal(){return o("salla-drawer",{visible:this.showAllOffersModal,position:"right",width:"md","no-padding":!0,"drawer-title":salla.lang.get("pages.offer.all_offers_title","جميع العروض"),onDrawerVisibilityChanged:s=>!s.detail&&this.closeAllOffersModal()},o("div",{class:"s-offer-drawer-content"},this.offersList.map(((s,t)=>this.renderModalOfferCard(s,t+1)))))}renderProductsModal(){return o("salla-drawer",{visible:this.showProductsModal,width:"md",position:"right","no-padding":!0,"drawer-title":this.products_link_text,onDrawerVisibilityChanged:s=>!s.detail&&this.closeProductsModal()},o("div",{class:"s-offer-products-drawer-content"},this.selectedOfferProducts?.length>0?o("div",null,!this.productsLoaded&&o("div",{class:"flex items-center justify-center p-8"},o("salla-loading",{size:"24"})),o("salla-products-list",{source:"selected","source-value":JSON.stringify(this.selectedOfferProducts.map((s=>s.id))),"product-card-component":this.productCardComponent,"horizontal-cards":!0,"compact-cards":!0,includes:["images"],onProductsFetched:()=>this.productsLoaded=!0})):o("div",{class:"p-4 text-center text-gray-500"},salla.lang.get("blocks.products.no_products_found","لا توجد منتجات"))))}renderModalOfferCard(s,t=1){const e=this.getOfferProducts(s),a=e&&e.length>0,r=!1!==this.collapsedOffers[s.id];return o("div",{class:"s-offer-drawer-card"},o("div",{class:"s-offer-card-main",onClick:()=>this.emitPromotionClicked(s,t)},o("div",{class:"s-offer-card-icon"},this.getOfferIcon(s.type)),o("div",{class:"s-offer-card-content"},o("h3",{class:"s-offer-card-title",title:s.title},s.title),s.description&&o("p",{class:"s-offer-card-description"},s.description),s.type===u.DiscountsTable?o("div",{class:"s-offer-card-details"},this.renderDiscountTableOfferContent(s)):s.type===u.PercentageOrFixed||s.type===u.Percentage||s.type===u.FixedAmount?o("div",{class:"s-offer-card-details"},this.renderPercentageOrFixedOfferContent(s),this.renderOfferCategories(s)):o("div",{class:"s-offer-card-details"},this.renderOfferCategories(s)))),a&&o("salla-accordion",{collapsed:r,collapsible:!0,size:"sm",onClick:s=>s.stopPropagation(),onAccordionToggle:t=>this.handleAccordionToggle(s.id,t.detail.payload.collapsed)},o("salla-accordion-head",{collapsible:!0,collapsed:r},o("div",{slot:"title",class:"s-offer-products-thumbnails"},o("span",{class:"s-offer-products-title"},this.products_link_text,o("i",{class:`sicon-keyboard_arrow_${r?"down":"up"} s-offer-products-link-icon`})),o("div",{class:"s-offer-products-thumbnails-stack"},e.slice(0,3).map(((s,t)=>o("div",{class:"s-offer-product-thumbnail",style:{zIndex:""+(t+1)}},o("img",{src:s.thumbnail||s.image?.url||salla.url.cdn("images/s-empty.png"),alt:s.name})))),e.length>3&&o("div",{class:"s-offer-products-more-count",style:{zIndex:"7"}},"+",e.length-3)))),o("salla-accordion-body",null,o("div",{class:"s-offer-products-content"},o("salla-products-list",{source:"selected","source-value":JSON.stringify(e.map((s=>s.id))),"product-card-component":this.productCardComponent,"horizontal-cards":!0,"compact-cards":!0,includes:["images"]})))))}renderOfferCard(s,t=1){return o("div",{class:"s-offer-slide-one-fourth swiper-slide",onClick:()=>this.emitPromotionClicked(s,t)},o("div",{class:"s-offer-card"},o("div",{class:"s-offer-card-icon"},this.getOfferIcon(s.type)),o("div",{class:"s-offer-card-content"},o("h3",{class:"s-offer-card-title",title:s.title},s.title),s.description&&o("p",{class:"s-offer-card-description"},s.description),o("div",{class:"s-offer-card-details"},s.type===u.DiscountsTable?this.renderDiscountTableOfferContent(s):s.type===u.PercentageOrFixed||s.type===u.Percentage||s.type===u.FixedAmount?[this.renderPercentageOrFixedOfferContent(s),this.renderOfferCategories(s)]:this.renderOfferCategories(s),this.renderProductsLinkForModalCard(s,!1)))))}getOfferIcon(s){return o("i",{class:{[u.DiscountsTable]:"sicon-discount-calculator",[u.Bank]:"sicon-bank",[u.SpecialPrice]:"sicon-fire",[u.BuyXGetY]:"sicon-gift",[u.PercentageOrFixed]:"sicon-special-discount",[u.Percentage]:"sicon-special-discount",[u.FixedAmount]:"sicon-special-discount"}[s]||"sicon-discount"})}renderDiscountTableOfferContent(s){const t=s.details.discounts||[];return t.length?o("div",null,o("div",{class:"s-offer-card-description"},salla.lang.get("pages.offer.discount_table_subtitle","وفر اكتر بشراء منتجات أكثر")),o("table",{class:"s-offer-discount-table"},o("tbody",null,this.groupDiscountsByRows(t,3).map(((s,t)=>o("tr",{key:t},s.map(((s,t)=>o("td",{key:t},o("div",{class:"s-offer-discount-percentage"},s.percentage,"%"),o("div",{class:"s-offer-discount-condition"},this.formatDiscountCondition(s))))))))))):null}renderPercentageOrFixedOfferContent(s){const t=s.details;return t.discount_value||t.min_spend>0||t.min_items>0?o("div",{class:"s-offer-percentage-fixed-content"},t.min_spend>0&&o("div",{class:"s-offer-min-spend"},this.min_spend_text(t.min_spend,this.userCurrency?.symbol||"")),t.min_items>0&&o("div",{class:"s-offer-min-items"},this.min_items_text(t.min_items))):null}groupDiscountsByRows(s,t){const e=[];for(let o=0;o<s.length;o+=t)e.push(s.slice(o,o+t));return e}formatDiscountCondition(s){return s.discounted_amount?`${s.discounted_amount} ${this.userCurrency?.symbol||""}`:null!=s.quantity?this.buy_quantity_text(s.quantity):"1 "+this.product_text}renderOfferCategories(s){const t=s.details;let e=t.categories||[];if(s.type===u.BuyXGetY&&t.get?.categories&&(e=t.get.categories),!e.length)return null;const a=this.expandedCategories[s.id],r=e.length>3,i=a?e:e.slice(0,3);return o("div",{class:"s-offer-categories"},o("div",{class:"s-offer-categories-list"},i.map(((s,t)=>o("a",{key:t,class:"s-offer-category-item",href:s.url||salla.url.create("categories",s.id||s.id_)},s.name))),r&&o("span",{class:"s-offer-categories-toggle",onClick:t=>{t.preventDefault(),t.stopPropagation(),this.toggleCategoryExpansion(s.id)}},a?o("span",null,o("i",{class:"sicon-keyboard_arrow_up"})," ",salla.lang.get("common.elements.hide","إخفاء")):o("span",null,salla.lang.get("common.elements.show","عرض")," ","+"+(e.length-3)," ",o("i",{class:"sicon-keyboard_arrow_down"})))))}toggleCategoryExpansion(s){this.expandedCategories={...this.expandedCategories,[s]:!this.expandedCategories[s]}}get host(){return this}static get style(){return":host .s-drawer-close:where([dir=rtl],[dir=rtl] *){left:0}"}},[0,"salla-offer",{productCardComponent:[1,"product-card-component"],offersList:[32],userCurrency:[32],title:[32],currentPage:[32],hasCustomComponent:[32],canRender:[32],showOffer:[32],showAllOffersModal:[32],showProductsModal:[32],selectedOfferProducts:[32],collapsedOffers:[32],expandedCategories:[32],productsLoaded:[32],offer_with_price_text:[32],with_discount_text:[32],product_discount_text:[32],special_offer_text:[32],buy_quantity_text:[32],products_link_text:[32],min_spend_text:[32],min_items_text:[32],product_text:[32]}]);function p(){"undefined"!=typeof customElements&&["salla-offer","salla-accordion","salla-accordion-body","salla-accordion-head","salla-drawer","salla-loading","salla-products-list","salla-slider"].forEach((t=>{switch(t){case"salla-offer":customElements.get(s(t))||customElements.define(s(t),h);break;case"salla-accordion":customElements.get(s(t))||a();break;case"salla-accordion-body":customElements.get(s(t))||r();break;case"salla-accordion-head":customElements.get(s(t))||i();break;case"salla-drawer":customElements.get(s(t))||l();break;case"salla-loading":customElements.get(s(t))||c();break;case"salla-products-list":customElements.get(s(t))||n();break;case"salla-slider":customElements.get(s(t))||d()}}))}p();const m=h,g=p;export{m as SallaOffer,g as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './salla-accordion2.js';
+import { d as defineCustomElement$7 } from './salla-accordion-body2.js';
+import { d as defineCustomElement$6 } from './salla-accordion-head2.js';
+import { d as defineCustomElement$5 } from './salla-drawer2.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-products-list2.js';
+import { d as defineCustomElement$2 } from './salla-slider2.js';
+
+var PageType;
+(function (PageType) {
+    PageType["ProductDetail"] = "product.single";
+    PageType["Cart"] = "cart";
+})(PageType || (PageType = {}));
+var OfferType;
+(function (OfferType) {
+    OfferType["Conditional"] = "conditional";
+    OfferType["PercentageOrFixed"] = "fixed";
+    OfferType["DiscountsTable"] = "discounts_table";
+    OfferType["Bank"] = "bank";
+    OfferType["BuyXGetY"] = "buy_x_get_y";
+    OfferType["SpecialPrice"] = "special_price";
+    OfferType["Percentage"] = "percentage";
+    OfferType["FixedAmount"] = "fixed_amount";
+})(OfferType || (OfferType = {}));
+
+const sallaOfferCss = ":host .s-drawer-close:where([dir=rtl],[dir=rtl] *){left:0}";
+
+const SallaOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaOffer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Custom Card Component for the Salla Products List.
+         *
+         * This component allows you to customize the appearance of individual product cards within a Salla Products List.
+         *
+         * @example
+         * <salla-products-list product-card-component="my-custom-card-style1" ...
+         * <salla-products-list product-card-component="my-custom-card-style2" ...
+         */
+        this.productCardComponent = 'salla-product-card';
+        // Declare component state variables
+        this.offersList = [];
+        this.canRender = false;
+        this.showOffer = salla.config.get('store.settings.product.show_special_offers');
+        this.showAllOffersModal = false;
+        this.showProductsModal = false;
+        this.selectedOfferProducts = [];
+        this.collapsedOffers = {};
+        this.expandedCategories = {};
+        this.productsLoaded = false;
+        // Default translated texts
+        this.offer_with_price_text = salla.lang.get('pages.offer.with_price', { price: '' });
+        this.with_discount_text = salla.lang.get('pages.products.with_a_discount');
+        this.product_discount_text = salla.lang.get('pages.products.discount');
+        this.special_offer_text = salla.lang.get('pages.products.special_offer');
+        this.buy_quantity_text = (quantity) => salla.lang.get('pages.offer.buy_quantity', { quantity });
+        this.products_link_text = salla.lang.get('pages.offer.included_products', 'المنتجات المشمولة');
+        this.min_spend_text = (amount, currency) => salla.lang.get('pages.offer.min_spend_amount', { amount, currency }, `بحد أدنى ${amount} ${currency} من مبلغ الشراء`);
+        this.min_items_text = (items) => salla.lang.get('pages.offer.min_items', { items }, `بحد أدنى ${items} منتجات`);
+        this.product_text = salla.lang.get('common.elements.product', 'منتج');
+        // Language
+        salla.lang.onLoaded(() => {
+            this.offer_with_price_text = salla.lang.get('pages.offer.with_price');
+            this.with_discount_text = salla.lang.get('pages.products.with_a_discount');
+            this.product_discount_text = salla.lang.get('pages.products.discount');
+            this.special_offer_text = salla.lang.get('pages.products.special_offer');
+            this.buy_quantity_text(0);
+            this.products_link_text = salla.lang.get('pages.offer.included_products', 'المنتجات المشمولة');
+            this.min_spend_text = (amount, currency) => salla.lang.get('pages.offer.min_spend_amount', { amount, currency }, `بحد أدنى ${amount} ${currency} من مبلغ الشراء`);
+            this.min_items_text = (items) => salla.lang.get('pages.offer.min_items', { items }, `بحد أدنى ${items} منتجات`);
+            this.product_text = salla.lang.get('common.elements.product', 'منتج');
+        });
+        salla.onReady(() => {
+            this.currentPage = salla.config.get('page.slug');
+            const currencies = salla.config.get('currencies') || {};
+            const currencyCode = salla.config.get('user.currency_code');
+            this.userCurrency = currencies[currencyCode] || { symbol: '', code: currencyCode || 'SAR', name: '' };
+        });
+    }
+    async getEndpointByPageName() {
+        if (this.currentPage == PageType.Cart) {
+            const cartId = await Salla.cart.getCurrentCartId();
+            return `offers/cart/${cartId}`;
+        }
+        if (this.currentPage == PageType.ProductDetail) {
+            return `offers/product/${salla.config.get('page.id')}`;
+        }
+        return "offers";
+    }
+    /**
+  * Emits a promotion viewed event for analytics tracking
+  */
+    emitPromotionViewed() {
+        if (!(this.offersList.length && this.canRender && this.showOffer))
+            return;
+        // Emit analytics for all visible offers (first 5) with correct positions
+        const visibleOffers = this.offersList.slice(0, 5);
+        const promotionDataArray = visibleOffers.map((offer, index) => ({
+            id: offer.id,
+            name: offer.title,
+            creative: offer.description || '',
+            position: index + 1
+        }));
+        salla.event.emit('salla::offer.promotion.viewed', promotionDataArray);
+    }
+    /**
+     * Emits a promotion clicked event
+     */
+    emitPromotionClicked(offer, position = 1) {
+        if (!(this.offersList.length && this.canRender && this.showOffer))
+            return;
+        const targetOffer = offer || this.offersList[0];
+        // Transform offer data to match analytics expectations
+        const promotionData = {
+            id: targetOffer.id,
+            name: targetOffer.title,
+            creative: targetOffer.description || '',
+            position: position
+        };
+        salla.event.emit('salla::offer.promotion.clicked', [promotionData]);
+    }
+    componentWillLoad() {
+        this.hasCustomComponent = !!customElements.get(this.productCardComponent);
+        return (new Promise(resolve => salla.onReady(resolve)))
+            .then(() => {
+            this.showOffer = !salla.url.is_page('product.single') || salla.config.get('store.settings.product.show_special_offers');
+            if (this.showOffer) {
+                return;
+            }
+            throw new Error("Merchant disabled showing the offers on product page");
+        })
+            .then(async () => salla.api.request(await this.getEndpointByPageName()))
+            .then(async (res) => {
+            if (!(this.offersList = res.data).length) {
+                throw new Error('salla-offers:: There is no offers!');
+            }
+            // Filter to only supported offer types
+            this.offersList = this.offersList.filter(offer => [OfferType.SpecialPrice, OfferType.Bank, OfferType.BuyXGetY, OfferType.DiscountsTable, OfferType.PercentageOrFixed, OfferType.Percentage, OfferType.FixedAmount].includes(offer.type));
+            if (!this.offersList.length) {
+                throw new Error('salla-offers:: No supported offer types found!');
+            }
+            // Fetch all categories once if any offer needs them
+            let allCategories = null;
+            const needsCategories = this.offersList.some(offer => {
+                const details = offer.details;
+                return (details.apply_to === 'category' && details.targets) ||
+                    (details.apply_to === 'categories' && details.targets) ||
+                    (offer.type === OfferType.BuyXGetY && (details.get?.source === 'categories' || details.get?.source === 'category'));
+            });
+            if (needsCategories) {
+                const res = await salla.product.api.categories();
+                allCategories = res.data;
+            }
+            // Collect all unique product IDs to make single batched API call
+            const productIds = new Set();
+            for (const offer of this.offersList) {
+                const details = offer.details;
+                if ((details.apply_to === 'product' || details.apply_to === 'products') && details.targets) {
+                    details.targets.forEach(id => productIds.add(id));
+                }
+                if (offer.type === OfferType.BuyXGetY && details.get?.source === 'products' && details.get?.source_value) {
+                    details.get.source_value.forEach(id => productIds.add(id));
+                }
+                if (offer.type === OfferType.BuyXGetY && (details.buy?.source === 'products' || details.buy?.source === 'product') && details.buy?.source_value) {
+                    details.buy.source_value.forEach(id => productIds.add(id));
+                }
+            }
+            // Single batched API call with source="selected" prevents redundant requests
+            let allProducts = {};
+            if (productIds.size > 0) {
+                try {
+                    const response = await salla.product.api.fetch({
+                        source: "selected",
+                        source_value: Array.from(productIds)
+                    });
+                    allProducts = Object.fromEntries(response.data.map(p => [p.id, p]));
+                }
+                catch (error) {
+                    allProducts = {};
+                }
+            }
+            // Process each offer using cached data
+            for (const offer of this.offersList) {
+                const details = offer.details;
+                const shouldFetchCategories = (details.apply_to === 'category' && details.targets) ||
+                    (details.apply_to === 'categories' && details.targets);
+                if (shouldFetchCategories && allCategories) {
+                    details.categories = this.findCategories(allCategories, details.targets);
+                }
+                if ((details.apply_to === 'product' || details.apply_to === 'products') && details.targets) {
+                    details.products = details.targets.map(id => allProducts[id]).filter(Boolean);
+                }
+                if (offer.type === OfferType.BuyXGetY && details.get) {
+                    const getY = details.get;
+                    if (getY.source === 'products' && getY.source_value) {
+                        getY.products = getY.source_value.map(id => allProducts[id]).filter(Boolean);
+                    }
+                    else if ((getY.source === 'categories' || getY.source === 'category') && allCategories && getY.source_value) {
+                        getY.categories = this.findCategories(allCategories, getY.source_value);
+                        details.categories = getY.categories;
+                    }
+                }
+                if (offer.type === OfferType.BuyXGetY && details.buy) {
+                    const buyX = details.buy;
+                    if ((buyX.source === 'products' || buyX.source === 'product') && buyX.source_value) {
+                        buyX.products = buyX.source_value.map(id => allProducts[id]).filter(Boolean);
+                    }
+                }
+            }
+            return this.offersList;
+        })
+            .then(() => {
+            this.canRender = true;
+        })
+            .catch((error) => {
+            salla.logger.warn(error);
+        });
+    }
+    componentDidLoad() {
+        let nav = this.host.querySelector('.s-slider-block__title-nav');
+        nav?.classList.add("s-offer-bank-payment-nav");
+        this.emitPromotionViewed();
+    }
+    findCategories(categories, ids) {
+        let found = [];
+        for (const category of categories) {
+            if (ids.includes(category.id_ || category.id)) { //here we are using || because we are planning to drop `id_`
+                found.push(category);
+            }
+            if (category.sub_categories?.length > 0) {
+                found = found.concat(this.findCategories(category.sub_categories, ids));
+            }
+        }
+        return found;
+    }
+    render() {
+        // Check if the offers list is empty or if the component is not ready to render
+        if (!this.offersList.length || !this.canRender || !this.showOffer)
+            return null;
+        const blockTitle = salla.lang.get('pages.offer.offers_title', 'عروض المنتج');
+        const blockSubTitle = salla.lang.get('pages.offer.offers_subtitle', 'احصل على المنتج بسعر مخفض مع أفضل العروض');
+        const titles = {
+            'block-title': blockTitle,
+            'block-subTitle': blockSubTitle,
+            'show-controls': this.offersList.length > 1
+        };
+        return [
+            h("div", { class: "s-offer-wrapper" }, h("salla-slider", { type: "carousel", id: "offers-slider", ...titles }, h("div", { slot: "items" }, this.offersList.slice(0, 5).map((offer, index) => this.renderOfferCard(offer, index + 1)), this.offersList.length > 5 && this.renderShowMoreCard()))),
+            // Always render drawers but control visibility through visible prop
+            this.renderAllOffersModal(),
+            this.renderProductsModal()
+        ];
+    }
+    renderShowMoreCard() {
+        return (h("div", { class: "s-offer-slide-one-fourth swiper-slide", onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.openAllOffersModal();
+            } }, h("div", { class: "s-offer-card s-offer-show-more-card" }, h("i", { class: "sicon-add s-offer-show-more-icon" }), h("h3", { class: "s-offer-show-more-title" }, salla.lang.get('pages.offer.show_more_offers', 'عرض المزيد من العروض')))));
+    }
+    openAllOffersModal() {
+        this.showAllOffersModal = true;
+    }
+    closeAllOffersModal() {
+        this.showAllOffersModal = false;
+    }
+    closeProductsModal() {
+        this.showProductsModal = false;
+        this.selectedOfferProducts = [];
+        this.productsLoaded = false;
+    }
+    handleAccordionToggle(offerId, collapsed) {
+        this.collapsedOffers = {
+            ...this.collapsedOffers,
+            [offerId]: collapsed
+        };
+    }
+    getOfferProducts(offer) {
+        const details = offer.details;
+        // Handle products from any offer type
+        if (details.products && details.products.length > 0) {
+            return details.products;
+        }
+        // Handle BuyXGetY special case
+        if (offer.type === OfferType.BuyXGetY && details.get?.products) {
+            return details.get.products;
+        }
+        // For categories, we'll return empty array as we handle categories separately
+        return [];
+    }
+    renderProductsLinkForModalCard(offer, isInDrawer) {
+        const products = this.getOfferProducts(offer);
+        if (!products || products.length === 0) {
+            return null;
+        }
+        const handleProductsClick = (e) => {
+            e.stopPropagation();
+            this.selectedOfferProducts = products;
+            this.showProductsModal = true;
+        };
+        return (h("div", { class: "s-offer-products-link", onClick: handleProductsClick }, h("span", { class: "s-offer-products-link-text" }, this.products_link_text), isInDrawer && h("i", { class: "sicon-keyboard_arrow_down s-offer-products-link-icon" })));
+    }
+    renderAllOffersModal() {
+        return (h("salla-drawer", { visible: this.showAllOffersModal, position: "right", width: "md", "no-padding": true, "drawer-title": salla.lang.get('pages.offer.all_offers_title', 'جميع العروض'), onDrawerVisibilityChanged: (e) => !e.detail && this.closeAllOffersModal() }, h("div", { class: "s-offer-drawer-content" }, this.offersList.map((offer, index) => this.renderModalOfferCard(offer, index + 1)))));
+    }
+    renderProductsModal() {
+        return (h("salla-drawer", { visible: this.showProductsModal, width: "md", position: "right", "no-padding": true, "drawer-title": this.products_link_text, onDrawerVisibilityChanged: (e) => !e.detail && this.closeProductsModal() }, h("div", { class: "s-offer-products-drawer-content" }, this.selectedOfferProducts?.length > 0 ? (h("div", null, !this.productsLoaded && (h("div", { class: "flex items-center justify-center p-8" }, h("salla-loading", { size: "24" }))), h("salla-products-list", { source: "selected", "source-value": JSON.stringify(this.selectedOfferProducts.map(p => p.id)), "product-card-component": this.productCardComponent, "horizontal-cards": true, "compact-cards": true, includes: ["images"], onProductsFetched: () => this.productsLoaded = true }))) : (h("div", { class: "p-4 text-center text-gray-500" }, salla.lang.get('blocks.products.no_products_found', 'لا توجد منتجات'))))));
+    }
+    renderModalOfferCard(offer, position = 1) {
+        const products = this.getOfferProducts(offer);
+        const hasProducts = products && products.length > 0;
+        const isCollapsed = this.collapsedOffers[offer.id] !== false; // Default to collapsed
+        return (h("div", { class: "s-offer-drawer-card" }, h("div", { class: "s-offer-card-main", onClick: () => this.emitPromotionClicked(offer, position) }, h("div", { class: "s-offer-card-icon" }, this.getOfferIcon(offer.type)), h("div", { class: "s-offer-card-content" }, h("h3", { class: "s-offer-card-title", title: offer.title }, offer.title), offer.description && h("p", { class: "s-offer-card-description" }, offer.description), offer.type === OfferType.DiscountsTable ? (h("div", { class: "s-offer-card-details" }, this.renderDiscountTableOfferContent(offer))) : (offer.type === OfferType.PercentageOrFixed || offer.type === OfferType.Percentage || offer.type === OfferType.FixedAmount) ? (h("div", { class: "s-offer-card-details" }, this.renderPercentageOrFixedOfferContent(offer), this.renderOfferCategories(offer))) : (h("div", { class: "s-offer-card-details" }, this.renderOfferCategories(offer))))), hasProducts && (h("salla-accordion", { collapsed: isCollapsed, collapsible: true, size: "sm", onClick: (e) => e.stopPropagation(), onAccordionToggle: (e) => this.handleAccordionToggle(offer.id, e.detail.payload.collapsed) }, h("salla-accordion-head", { collapsible: true, collapsed: isCollapsed }, h("div", { slot: "title", class: "s-offer-products-thumbnails" }, h("span", { class: "s-offer-products-title" }, this.products_link_text, h("i", { class: `sicon-keyboard_arrow_${isCollapsed ? 'down' : 'up'} s-offer-products-link-icon` })), h("div", { class: "s-offer-products-thumbnails-stack" }, products.slice(0, 3).map((product, index) => (h("div", { class: "s-offer-product-thumbnail", style: { zIndex: `${index + 1}` } }, h("img", { src: product.thumbnail || product.image?.url || salla.url.cdn('images/s-empty.png'), alt: product.name })))), products.length > 3 && (h("div", { class: "s-offer-products-more-count", style: { zIndex: '7' } }, "+", products.length - 3))))), h("salla-accordion-body", null, h("div", { class: "s-offer-products-content" }, h("salla-products-list", { source: "selected", "source-value": JSON.stringify(products.map(p => p.id)), "product-card-component": this.productCardComponent, "horizontal-cards": true, "compact-cards": true, includes: ["images"] })))))));
+    }
+    renderOfferCard(offer, position = 1) {
+        return (h("div", { class: "s-offer-slide-one-fourth swiper-slide", onClick: () => this.emitPromotionClicked(offer, position) }, h("div", { class: "s-offer-card" }, h("div", { class: "s-offer-card-icon" }, this.getOfferIcon(offer.type)), h("div", { class: "s-offer-card-content" }, h("h3", { class: "s-offer-card-title", title: offer.title }, offer.title), offer.description && h("p", { class: "s-offer-card-description" }, offer.description), h("div", { class: "s-offer-card-details" }, offer.type === OfferType.DiscountsTable
+            ? this.renderDiscountTableOfferContent(offer)
+            : (offer.type === OfferType.PercentageOrFixed || offer.type === OfferType.Percentage || offer.type === OfferType.FixedAmount)
+                ? [
+                    this.renderPercentageOrFixedOfferContent(offer),
+                    this.renderOfferCategories(offer)
+                ]
+                : this.renderOfferCategories(offer), this.renderProductsLinkForModalCard(offer, false))))));
+    }
+    getOfferIcon(offerType) {
+        const iconMap = {
+            [OfferType.DiscountsTable]: 'sicon-discount-calculator',
+            [OfferType.Bank]: 'sicon-bank',
+            [OfferType.SpecialPrice]: 'sicon-fire',
+            [OfferType.BuyXGetY]: 'sicon-gift',
+            [OfferType.PercentageOrFixed]: 'sicon-special-discount',
+            [OfferType.Percentage]: 'sicon-special-discount',
+            [OfferType.FixedAmount]: 'sicon-special-discount'
+        };
+        return h("i", { class: iconMap[offerType] || 'sicon-discount' });
+    }
+    renderDiscountTableOfferContent(offer) {
+        const details = offer.details;
+        const discounts = details.discounts || [];
+        if (!discounts.length)
+            return null;
+        return (h("div", null, h("div", { class: "s-offer-card-description" }, salla.lang.get('pages.offer.discount_table_subtitle', 'وفر اكتر بشراء منتجات أكثر')), h("table", { class: "s-offer-discount-table" }, h("tbody", null, this.groupDiscountsByRows(discounts, 3).map((row, rowIndex) => (h("tr", { key: rowIndex }, row.map((discount, colIndex) => (h("td", { key: colIndex }, h("div", { class: "s-offer-discount-percentage" }, discount.percentage, "%"), h("div", { class: "s-offer-discount-condition" }, this.formatDiscountCondition(discount))))))))))));
+    }
+    renderPercentageOrFixedOfferContent(offer) {
+        const details = offer.details;
+        if (!details.discount_value && !(details.min_spend > 0) && !(details.min_items > 0))
+            return null;
+        return (h("div", { class: "s-offer-percentage-fixed-content" }, details.min_spend > 0 && (h("div", { class: "s-offer-min-spend" }, this.min_spend_text(details.min_spend, this.userCurrency?.symbol || ''))), details.min_items > 0 && (h("div", { class: "s-offer-min-items" }, this.min_items_text(details.min_items)))));
+    }
+    groupDiscountsByRows(discounts, itemsPerRow) {
+        const rows = [];
+        for (let i = 0; i < discounts.length; i += itemsPerRow) {
+            rows.push(discounts.slice(i, i + itemsPerRow));
+        }
+        return rows;
+    }
+    formatDiscountCondition(discount) {
+        // Format the condition text based on discount amount or quantity
+        if (discount.discounted_amount) {
+            return `${discount.discounted_amount} ${this.userCurrency?.symbol || ''}`;
+        }
+        if (discount.quantity != null) {
+            return this.buy_quantity_text(discount.quantity);
+        }
+        return `1 ${this.product_text}`;
+    }
+    renderOfferCategories(offer) {
+        const details = offer.details;
+        // Get categories from different locations based on offer type
+        let categories = details.categories || [];
+        // For BuyXGetY offers, also check get.categories
+        if (offer.type === OfferType.BuyXGetY && details.get?.categories) {
+            categories = details.get.categories;
+        }
+        if (!categories.length)
+            return null;
+        const maxVisible = 3; // Show only first 3 categories initially
+        const isExpanded = this.expandedCategories[offer.id];
+        const shouldShowMore = categories.length > maxVisible;
+        const visibleCategories = isExpanded ? categories : categories.slice(0, maxVisible);
+        return (h("div", { class: "s-offer-categories" }, h("div", { class: "s-offer-categories-list" }, visibleCategories.map((category, index) => (h("a", { key: index, class: "s-offer-category-item", href: category.url || salla.url.create('categories', category.id || category.id_) }, category.name))), shouldShowMore && (h("span", { class: "s-offer-categories-toggle", onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.toggleCategoryExpansion(offer.id);
+            } }, isExpanded ? (h("span", null, h("i", { class: "sicon-keyboard_arrow_up" }), ' ', salla.lang.get('common.elements.hide', 'إخفاء'))) : (h("span", null, salla.lang.get('common.elements.show', 'عرض'), " ", `+${categories.length - maxVisible}`, ' ', h("i", { class: "sicon-keyboard_arrow_down" }))))))));
+    }
+    /**
+     * Toggle category expansion for a specific offer
+     */
+    toggleCategoryExpansion(offerId) {
+        this.expandedCategories = {
+            ...this.expandedCategories,
+            [offerId]: !this.expandedCategories[offerId]
+        };
+    }
+    get host() { return this; }
+    static get style() { return sallaOfferCss; }
+}, [0, "salla-offer", {
+        "productCardComponent": [1, "product-card-component"],
+        "offersList": [32],
+        "userCurrency": [32],
+        "title": [32],
+        "currentPage": [32],
+        "hasCustomComponent": [32],
+        "canRender": [32],
+        "showOffer": [32],
+        "showAllOffersModal": [32],
+        "showProductsModal": [32],
+        "selectedOfferProducts": [32],
+        "collapsedOffers": [32],
+        "expandedCategories": [32],
+        "productsLoaded": [32],
+        "offer_with_price_text": [32],
+        "with_discount_text": [32],
+        "product_discount_text": [32],
+        "special_offer_text": [32],
+        "buy_quantity_text": [32],
+        "products_link_text": [32],
+        "min_spend_text": [32],
+        "min_items_text": [32],
+        "product_text": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-offer", "salla-accordion", "salla-accordion-body", "salla-accordion-head", "salla-drawer", "salla-loading", "salla-products-list", "salla-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-offer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaOffer$1);
+            }
+            break;
+        case "salla-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-accordion-body":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-accordion-head":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-drawer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-products-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaOffer = SallaOffer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaOffer, defineCustomElement };

package/dist/components/salla-order-details-multiple-bundle-product.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as l,d as o}from"./salla-order-details-multiple-bundle-product2.js";const r=l,s=o;export{r as SallaOrderDetailsMultipleBundleProduct,s as defineCustomElement}
+import { S as SallaproductDetailsMultipleBundleProduct, d as defineCustomElement$1 } from './salla-order-details-multiple-bundle-product2.js';
+
+const SallaOrderDetailsMultipleBundleProduct = SallaproductDetailsMultipleBundleProduct;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaOrderDetailsMultipleBundleProduct, defineCustomElement };