@salla.sa/twilight-components 2.14.365 → 2.14.366

package/dist/collection/components/salla-offer/salla-offer.js

@@ -25,36 +25,45 @@ export class SallaOffer {
          * <salla-products-list product-card-component="my-custom-card-style1" ...
          * <salla-products-list product-card-component="my-custom-card-style2" ...
          */
-        this.productCardComponent = 'custom-salla-product-card';
+        this.productCardComponent = 'salla-product-card';
         // Declare component state variables
         this.offersList = [];
-        this.isMultipleBank = false;
-        this.isBankOffer = false;
         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.multipleBankOfferTitleText = salla.lang.get('pages.offer.multiple_bank_offers_title');
-        this.multipleBankOfferTitleDescription = salla.lang.get('pages.offer.multiple_bank_offers_message');
         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.multipleBankOfferTitleText = salla.lang.get('pages.offer.multiple_bank_offers_title');
-            this.multipleBankOfferTitleDescription = salla.lang.get('pages.offer.multiple_bank_offers_message');
             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');
-            this.userCurrency = salla.config.get('currencies')[salla.config.get('user.currency_code')].symbol;
+            const currencies = salla.config.get('currencies') || {};
+            const currencyCode = salla.config.get('user.currency_code');
+            this.userCurrency = currencies[currencyCode] || { symbol: '', code: currencyCode || 'SAR', name: '' };
         });
-        this.categorySlot = this.host.querySelector('[slot="category"]')?.innerHTML || '<a href={url} class="s-offer-slide-cat-entry"><i class={icon}></i><h4>{name}</h4></a>';
     }
     async getEndpointByPageName() {
         if (this.currentPage == PageType.Cart) {
@@ -72,36 +81,34 @@ export class SallaOffer {
     emitPromotionViewed() {
         if (!(this.offersList.length && this.canRender && this.showOffer))
             return;
-        // Transform offer data to match analytics expectations
-        const promotionData = {
-            id: this.offersList[0].id,
-            name: this.offersList[0].title,
-            creative: this.offersList[0].description || '',
-            position: 1
-        };
-        salla.event.emit('promotion::viewed', [promotionData]);
+        // 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(position = 1) {
+    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: this.offersList[0].id,
-            name: this.offersList[0].title,
-            creative: this.offersList[0].description || '',
+            id: targetOffer.id,
+            name: targetOffer.title,
+            creative: targetOffer.description || '',
             position: position
         };
-        salla.event.emit('promotion::clicked', [promotionData]);
+        salla.event.emit('salla::offer.promotion.clicked', [promotionData]);
     }
     componentWillLoad() {
         this.hasCustomComponent = !!customElements.get(this.productCardComponent);
-        // let offers = this.getOffersFromStorage();
-        // if (offers) {
-        //   return offers.then(offersFromStorage => this.offersList = offersFromStorage);
-        // }
         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');
@@ -111,61 +118,86 @@ export class SallaOffer {
             throw new Error("Merchant disabled showing the offers on product page");
         })
             .then(async () => salla.api.request(await this.getEndpointByPageName()))
-            .then((res) => {
+            .then(async (res) => {
             if (!(this.offersList = res.data).length) {
                 throw new Error('salla-offers:: There is no offers!');
             }
-            //we support these offers only
-            const offer = this.offersList.find(offer => [OfferType.SpecialPrice, OfferType.Bank, OfferType.BuyXGetY, OfferType.DiscountsTable].includes(offer.type));
-            if (!offer) {
-                throw new Error('salla-offers:: Offer type not supported yet!');
-            }
-            //because there is no need for special handling for discounts table, just skip the other cases
-            if (offer.type === OfferType.DiscountsTable) {
-                return this.offersList = [offer];
+            // 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!');
             }
-            //if it's banks offer, we need to include the other banks overs
-            if ((this.isBankOffer = offer.type === OfferType.Bank)) {
-                this.offersList = this.offersList.filter(offer => offer.type === OfferType.Bank);
-                this.isMultipleBank = this.offersList.length > 1;
-                return this.offersList;
+            // 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;
             }
-            //if it's special price offer
-            if (offer.type === OfferType.SpecialPrice) {
+            // 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;
-                return details.apply_to === 'product'
-                    // Avoid additional requests; use `salla-products-slider` and pass the custom card
-                    ? salla.product.api.fetch({ source: "selected", source_value: details.targets })
-                        .then((response) => {
-                        offer.details.products = response.data; // Set the fetched products
-                        return this.offersList = [offer];
-                    })
-                    : salla.product.api.categories() // Fetch all categories in one query
-                        .then((res) => {
-                        const categoriesToRender = this.findCategories(res.data, details.targets); // Extract only the selected categories
-                        offer.details.categories = categoriesToRender;
-                        return this.offersList = [offer];
+                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 = {};
+                }
             }
-            //BuyXGetY offers
-            const getY = offer.details.get;
-            return getY.source === 'products'
-                //todo:: avoid this request, and the handling for the products, just use `salla-products-slider` and don't forget to pass the customcard
-                ? salla.product.api.fetch({ source: "selected", source_value: getY.source_value })
-                    .then((response) => {
-                    getY.products = response.data;
-                    offer.details.get = getY;
-                    return this.offersList = [offer];
-                }) //set the products
-                : salla.product.api.categories() //get all categories in one query, then extract only the selected one, instead of sending multi requests
-                    .then((res) => {
-                    getY.categories = this.findCategories(res.data, getY.source_value);
-                    offer.details.get = getY;
-                    return this.offersList = [offer];
-                });
+            // 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((offers) => {
-            salla.storage.set(this.getStorageKey(), { offers, stored_at: new Date().getTime() });
+            .then(() => {
             this.canRender = true;
         })
             .catch((error) => {
@@ -189,128 +221,165 @@ export class SallaOffer {
         }
         return found;
     }
-    //todo::add to the key params, to make sure it will support multi offers in the same page if it's wanted
-    getStorageKey() {
-        try {
-            const pageSlug = salla.config.get('page.slug').replace('.', '_');
-            const locale = salla.lang.getLocale();
-            const currencyCode = salla.config.currency().code;
-            if (!pageSlug || !locale || !currencyCode) {
-                throw new Error('Unable to get the storage key.');
-            }
-            return `s-offers-${pageSlug}-${salla.config.get('page.id')}-${locale}-${currencyCode}`;
-        }
-        catch (error) {
-            return '';
-        }
-    }
-    //@ts-ignore
-    getOffersFromStorage() {
-        let storageOffers = salla.storage.get(this.getStorageKey());
-        //if the offers not existed, or it has been stored before 10 minutes from now, ignore it;
-        if (!storageOffers || storageOffers.stored_at < (new Date().getTime() - 10 * 60 * 1000)) {
-            salla.storage.remove(this.getStorageKey());
-            return null;
-        }
-        this.canRender = true;
-        //return it as resolve to support .then
-        return Promise.resolve(storageOffers.offers);
-    }
     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 offer = this.offersList[0];
-        const blockTitle = this.isBankOffer ? (this.isMultipleBank ? this.multipleBankOfferTitleText : null) : offer.title;
-        const blockSubTitle = this.isBankOffer ? (this.isMultipleBank ? this.multipleBankOfferTitleDescription : null) : offer.description;
+        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.isMultipleBank
+            'show-controls': this.offersList.length > 1
         };
-        return (h("div", { class: "s-offer-wrapper", onClick: () => this.emitPromotionClicked() }, h("p", { class: "s-offer-corner-badge" }, this.special_offer_text), h("salla-slider", { type: "carousel", id: "offer-slider", ...titles }, h("div", { slot: 'items' }, this.renderSectionForOfferType(offer.type)))));
+        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;
     }
-    renderSectionForOfferType(offerType) {
-        if (this.isBankOffer) {
-            return this.renderBankSection();
+    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;
         }
-        if (offerType == OfferType.SpecialPrice) {
-            return this.renderSpecialPriceSection();
+        // Handle BuyXGetY special case
+        if (offer.type === OfferType.BuyXGetY && details.get?.products) {
+            return details.get.products;
         }
-        if (offerType == OfferType.BuyXGetY) {
-            return this.renderBuyXGetYSection();
+        // 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;
         }
-        return this.renderDiscountTableSection();
+        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" })));
     }
-    /**
-     * Generates content for the categories section.
-     *
-     * @param offeredCategories - An array of Category objects.
-     * @returns An array of HTML elements representing categories.
-     */
-    getCategoriesSection(category) {
-        return h("div", { class: "s-offer-slide-one-sixth swiper-slide", innerHTML: this.categorySlot
-                .replace(/\{url\}/g, category.url)
-                .replace(/\{icon\}/g, category.icon || "sicon-store")
-                .replace(/\{name\}/g, category.name) });
+    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)))));
     }
-    renderBuyXGetYSection() {
-        const details = this.offersList[0].details;
-        return [
-            details.get.products?.map((product) => (h("div", { class: "s-offer-slide-one-fourth" }, this.hasCustomComponent
-                ? h(this.productCardComponent, { product: product })
-                : h("salla-product-card", { "shadow-on-hover": true, product: product })))),
-            details.get.categories?.map((category) => this.getCategoriesSection(category))
-        ];
+    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', 'لا توجد منتجات'))))));
     }
-    /**
-     * Generates content for the bank section.
-     *
-     * @param offeredBank - An array of Bank objects.
-     * @param name - The title of the current offer.
-     * @param description - The description of the current offer.
-     * @returns An array of HTML elements representing banks.
-     *
-     * TODO: loop over the list and filter bank types and pass it to this function
-     */
-    renderBankSection() {
-        return this.offersList.map((bankOffer) => {
-            return h("div", { class: { "s-offer-slide-one-sixth": this.isMultipleBank, "s-offer-bank-wrapper-sinlge-item": !this.isMultipleBank } }, h("div", { class: { "s-offer-bank-wrapper": true, "s-offer-slide-one-sixth": !this.isMultipleBank, "s-offer-bank-wrapper-multi-spacer": this.isMultipleBank } }, h("div", { class: "s-offer-bank-logo" }, h("img", { src: bankOffer.details.logo || salla.url.cdn('images/s-empty.png'), "data-src": bankOffer.details.logo, alt: bankOffer.title + " offer" })), h("ul", { class: "s-offer-bank-payment-wrapper" }, bankOffer.details.payments.map((payment) => {
-                return h("li", { class: "s-offer-bank-payment-single" }, h("img", { src: salla.url.cdn('images/payment/' + payment + '.png') || salla.url.cdn('images/s-empty.png'), "data-src": salla.url.cdn('images/payment/' + payment + '.png'), alt: "payment" }));
-            })), this.isMultipleBank ?
-                h("p", { class: "s-offer-bank-payment-discount-percent" }, `${this.product_discount_text} ${bankOffer.details.discount_value}${bankOffer.details.discount_type === "percentage" && '%'}`)
-                : ""), !this.isMultipleBank ?
-                h("div", { class: "s-offer-bank-message s-offer-slide-one-fourth" }, h("h2", null, this.offersList[0].title), h("p", { innerHTML: this.generateBankDescription(this.offersList[0].description, bankOffer.details.discount_value) }))
-                : "");
-        });
+    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))))))))))));
     }
-    generateBankDescription(desc, value) {
-        return desc.replace(new RegExp(`${value} %`), `<span class="s-offer-bank-message-amount">${value} %</span>`);
+    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" }))))))));
     }
     /**
-     * Generates content for the discount table section.
-     *
-     * @param discountTable - An array of Discount objects.
-     * @returns An array of HTML elements representing discounts_table.
+     * Toggle category expansion for a specific offer
      */
-    renderDiscountTableSection() {
-        const offer = this.offersList[0];
-        let show_discounted_price = offer.details.show_price_after_discount;
-        return this.offersList[0].details.discounts?.map((discount) => h("div", { class: "s-offer-slide-one-fourth" }, h("div", { class: "s-offer-slide-offer-entry" }, h("div", { class: "s-offer-slide-offer-entry-price-quantity-container" }, h("p", { class: "s-offer-slide-offer-entry-quantity" }, this.buy_quantity_text(discount.quantity)), show_discounted_price ?
-            h("div", { class: "s-offer-slide-offer-entry-price" }, h("span", null, this.offer_with_price_text), h("span", { class: "s-offer-slide-offer-entry-price-amount" }, discount.discounted_amount), " ", h("span", null, this.userCurrency)) : ""), h("p", { class: "s-offer-slide-offer-entry-price-amount-percent" }, this.with_discount_text, "(", h("span", null, discount.percentage, !!discount.percentage && '%'), ")"))));
-    }
-    renderSpecialPriceSection() {
-        const details = this.offersList[0].details;
-        return [
-            // Render products if `apply_to` is "product"
-            details.apply_to === "product" &&
-                details.products?.map((product) => (h("div", { class: "s-offer-slide-one-fourth" }, this.hasCustomComponent
-                    ? h(this.productCardComponent, { product: product })
-                    : h("salla-product-card", { "shadow-on-hover": true, product: product })))),
-            // Render categories if `apply_to` is "category"
-            details.apply_to === "category" &&
-                details.categories?.map((category) => this.getCategoriesSection(category)),
-        ];
+    toggleCategoryExpansion(offerId) {
+        this.expandedCategories = {
+            ...this.expandedCategories,
+            [offerId]: !this.expandedCategories[offerId]
+        };
     }
     static get is() { return "salla-offer"; }
     static get originalStyleUrls() {
@@ -346,7 +415,7 @@ export class SallaOffer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'custom-salla-product-card'"
+                "defaultValue": "'salla-product-card'"
             }
         };
     }
@@ -354,20 +423,26 @@ export class SallaOffer {
         return {
             "offersList": {},
             "userCurrency": {},
-            "isMultipleBank": {},
             "title": {},
             "currentPage": {},
             "hasCustomComponent": {},
-            "isBankOffer": {},
             "canRender": {},
             "showOffer": {},
+            "showAllOffersModal": {},
+            "showProductsModal": {},
+            "selectedOfferProducts": {},
+            "collapsedOffers": {},
+            "expandedCategories": {},
+            "productsLoaded": {},
             "offer_with_price_text": {},
             "with_discount_text": {},
             "product_discount_text": {},
             "special_offer_text": {},
-            "multipleBankOfferTitleText": {},
-            "multipleBankOfferTitleDescription": {},
-            "buy_quantity_text": {}
+            "buy_quantity_text": {},
+            "products_link_text": {},
+            "min_spend_text": {},
+            "min_items_text": {},
+            "product_text": {}
         };
     }
     static get elementRef() { return "host"; }