@salla.sa/twilight-components 2.14.421 → 2.14.422

package/dist/cjs/salla-offer.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 var PageType;
 (function (PageType) {
@@ -192,6 +192,9 @@ const SallaOffer = class {
                 if (details.apply_to === 'brand' && details.targets) {
                     details.brands = details.targets;
                 }
+                if (details.apply_to === 'tag' && details.targets) {
+                    details.tags = details.targets;
+                }
                 if (offer.type === OfferType.BuyXGetY && details.get) {
                     const getY = details.get;
                     if (getY.source === 'products' && getY.source_value) {
@@ -312,7 +315,7 @@ const SallaOffer = class {
         const products = this.getOfferProducts(offer);
         const hasProducts = products && products.length > 0;
         const isCollapsed = this.collapsedOffers[offer.id] !== false; // Default to collapsed
-        return (index.h("div", { class: "s-offer-drawer-card" }, index.h("div", { class: "s-offer-card-main", onClick: () => this.emitPromotionClicked(offer, position) }, index.h("div", { class: "s-offer-card-icon" }, this.getOfferIcon(offer.type)), index.h("div", { class: "s-offer-card-content" }, index.h("h3", { class: "s-offer-card-title", title: offer.title }, offer.title), offer.description && index.h("p", { class: "s-offer-card-description" }, offer.description), offer.type === OfferType.DiscountsTable ? (index.h("div", { class: "s-offer-card-details" }, this.renderDiscountTableOfferContent(offer))) : (offer.type === OfferType.PercentageOrFixed || offer.type === OfferType.Percentage || offer.type === OfferType.FixedAmount) ? (index.h("div", { class: "s-offer-card-details" }, this.renderPercentageOrFixedOfferContent(offer), this.renderOfferCategories(offer), this.renderOfferBrands(offer))) : (index.h("div", { class: "s-offer-card-details" }, this.renderOfferCategories(offer), this.renderOfferBrands(offer))))), hasProducts && (index.h("salla-accordion", { collapsed: isCollapsed, collapsible: true, size: "sm", onClick: (e) => e.stopPropagation(), onAccordionToggle: (e) => this.handleAccordionToggle(offer.id, e.detail.payload.collapsed) }, index.h("salla-accordion-head", { collapsible: true, collapsed: isCollapsed }, index.h("div", { slot: "title", class: "s-offer-products-thumbnails" }, index.h("span", { class: "s-offer-products-title" }, this.products_link_text, index.h("i", { class: `sicon-keyboard_arrow_${isCollapsed ? 'down' : 'up'} s-offer-products-link-icon` })), index.h("div", { class: "s-offer-products-thumbnails-stack" }, products.slice(0, 3).map((product, index$1) => (index.h("div", { class: "s-offer-product-thumbnail", style: { zIndex: `${index$1 + 1}` } }, index.h("img", { src: product.thumbnail || product.image?.url || salla.url.cdn('images/s-empty.png'), alt: product.name })))), products.length > 3 && (index.h("div", { class: "s-offer-products-more-count", style: { zIndex: '7' } }, "+", products.length - 3))))), index.h("salla-accordion-body", null, index.h("div", { class: "s-offer-products-content" }, index.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"] })))))));
+        return (index.h("div", { class: "s-offer-drawer-card" }, index.h("div", { class: "s-offer-card-main", onClick: () => this.emitPromotionClicked(offer, position) }, index.h("div", { class: "s-offer-card-icon" }, this.getOfferIcon(offer.type)), index.h("div", { class: "s-offer-card-content" }, index.h("h3", { class: "s-offer-card-title", title: offer.title }, offer.title), offer.description && index.h("p", { class: "s-offer-card-description" }, offer.description), offer.type === OfferType.DiscountsTable ? (index.h("div", { class: "s-offer-card-details" }, this.renderDiscountTableOfferContent(offer))) : (offer.type === OfferType.PercentageOrFixed || offer.type === OfferType.Percentage || offer.type === OfferType.FixedAmount) ? (index.h("div", { class: "s-offer-card-details" }, this.renderPercentageOrFixedOfferContent(offer), this.renderOfferCategories(offer), this.renderOfferBrands(offer), this.renderOfferTags(offer))) : (index.h("div", { class: "s-offer-card-details" }, this.renderOfferCategories(offer), this.renderOfferBrands(offer), this.renderOfferTags(offer))))), hasProducts && (index.h("salla-accordion", { collapsed: isCollapsed, collapsible: true, size: "sm", onClick: (e) => e.stopPropagation(), onAccordionToggle: (e) => this.handleAccordionToggle(offer.id, e.detail.payload.collapsed) }, index.h("salla-accordion-head", { collapsible: true, collapsed: isCollapsed }, index.h("div", { slot: "title", class: "s-offer-products-thumbnails" }, index.h("span", { class: "s-offer-products-title" }, this.products_link_text, index.h("i", { class: `sicon-keyboard_arrow_${isCollapsed ? 'down' : 'up'} s-offer-products-link-icon` })), index.h("div", { class: "s-offer-products-thumbnails-stack" }, products.slice(0, 3).map((product, index$1) => (index.h("div", { class: "s-offer-product-thumbnail", style: { zIndex: `${index$1 + 1}` } }, index.h("img", { src: product.thumbnail || product.image?.url || salla.url.cdn('images/s-empty.png'), alt: product.name })))), products.length > 3 && (index.h("div", { class: "s-offer-products-more-count", style: { zIndex: '7' } }, "+", products.length - 3))))), index.h("salla-accordion-body", null, index.h("div", { class: "s-offer-products-content" }, index.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 (index.h("div", { class: "s-offer-slide-one-fourth swiper-slide", onClick: () => this.emitPromotionClicked(offer, position) }, index.h("div", { class: "s-offer-card" }, index.h("div", { class: "s-offer-card-icon" }, this.getOfferIcon(offer.type)), index.h("div", { class: "s-offer-card-content" }, index.h("h3", { class: "s-offer-card-title", title: offer.title }, offer.title), offer.description && index.h("p", { class: "s-offer-card-description" }, offer.description), index.h("div", { class: "s-offer-card-details" }, offer.type === OfferType.DiscountsTable
@@ -321,11 +324,13 @@ const SallaOffer = class {
                 ? [
                     this.renderPercentageOrFixedOfferContent(offer),
                     this.renderOfferCategories(offer),
-                    this.renderOfferBrands(offer)
+                    this.renderOfferBrands(offer),
+                    this.renderOfferTags(offer)
                 ]
                 : [
                     this.renderOfferCategories(offer),
-                    this.renderOfferBrands(offer)
+                    this.renderOfferBrands(offer),
+                    this.renderOfferTags(offer)
                 ], this.renderProductsLinkForModalCard(offer, false))))));
     }
     getOfferIcon(offerType) {
@@ -405,6 +410,21 @@ const SallaOffer = class {
                 this.toggleCategoryExpansion(offer.id);
             } }, isExpanded ? (index.h("span", null, index.h("i", { class: "sicon-keyboard_arrow_up" }), ' ', salla.lang.get('common.elements.hide', 'إخفاء'))) : (index.h("span", null, salla.lang.get('common.elements.show', 'عرض'), " ", `+${brands.length - maxVisible}`, ' ', index.h("i", { class: "sicon-keyboard_arrow_down" }))))))));
     }
+    renderOfferTags(offer) {
+        const details = offer.details;
+        const tags = details.tags || [];
+        if (!tags.length)
+            return null;
+        const maxVisible = 3;
+        const isExpanded = this.expandedCategories[offer.id];
+        const shouldShowMore = tags.length > maxVisible;
+        const visibleTags = isExpanded ? tags : tags.slice(0, maxVisible);
+        return (index.h("div", { class: "s-offer-categories" }, index.h("div", { class: "s-offer-categories-list" }, visibleTags.map((tag, index$1) => (index.h("a", { key: index$1, class: "s-offer-category-item", href: tag.url || salla.url.create('tags', tag.id) }, tag.name))), shouldShowMore && (index.h("span", { class: "s-offer-categories-toggle", onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.toggleCategoryExpansion(offer.id);
+            } }, isExpanded ? (index.h("span", null, index.h("i", { class: "sicon-keyboard_arrow_up" }), ' ', salla.lang.get('common.elements.hide', 'إخفاء'))) : (index.h("span", null, salla.lang.get('common.elements.show', 'عرض'), " ", `+${tags.length - maxVisible}`, ' ', index.h("i", { class: "sicon-keyboard_arrow_down" }))))))));
+    }
     /**
      * Toggle category expansion for a specific offer
      */

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaOrderDetailsMultipleBundleProductCss = "";
 

package/dist/cjs/salla-order-details-options.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 var copyIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-order-details.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaOrderDetailsCss = "";
 

package/dist/cjs/salla-order-edit-item.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var helpers = require('./helpers-BJ2rnhxz.js');
 require('./interfaces-Bh7W0bEU.js');
 

package/dist/cjs/salla-order-edit-product-card.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaOrderEditProductCardCss = ":host{display:block;min-width:0}";
 

package/dist/cjs/salla-order-edit.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var helpers = require('./helpers-BJ2rnhxz.js');
 require('./interfaces-Bh7W0bEU.js');
 

package/dist/cjs/salla-order-summary.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var check = require('./check-BnVBPQNp.js');
 
 var iconFileArchive = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-order-totals-card.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaOrderTotalsCardCss = ":host{display:block}";
 

package/dist/cjs/salla-orders.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var Helper = require('./Helper-CU4Xuiki.js');
 require('./anime.es-BqW8JHZi.js');
 

package/dist/cjs/salla-payments.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaPaymentsCss = ":host{display:block}";
 

package/dist/cjs/salla-placeholder.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 var Inbox = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-price-range.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var arrowLeft = require('./arrow-left-xSEmRpp6.js');
 
 var arrowRight = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-product-card_2.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var star2 = require('./star2-R146a27p.js');
 var Helper = require('./Helper-CU4Xuiki.js');
 require('./anime.es-BqW8JHZi.js');

package/dist/cjs/salla-product-size-guide.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 var PencilRuler = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-products-list.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 var shoppingBag = require('./shopping-bag-C1gvTVHr.js');
 var Helper = require('./Helper-CU4Xuiki.js');

package/dist/cjs/salla-progress-bar.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaProgressBarCss = "";
 

package/dist/cjs/salla-quick-order.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var iphoneX = require('./iphone-x-qC21wCLj.js');
 var mail = require('./mail-Bgvt2hc9.js');
 var cancel = require('./cancel-B5SbMYEk.js');

package/dist/cjs/salla-rating-modal.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var star = require('./star-DGcH7Yso.js');
 var checkCircle2 = require('./check-circle2-BDvlT4_n.js');
 var Helper = require('./Helper-CU4Xuiki.js');

package/dist/cjs/salla-reward-action_4.cjs.entry.js

@@ -3,13 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
-var functions = require('./functions-BRkBgcI0.js');
+var index = require('./index-CSI6rnkc.js');
+var functions = require('./functions-QULFiarR.js');
 var gift = require('./gift-DbNivqYO.js');
 var tag = require('./tag-D-PcUR33.js');
 var check = require('./check-BnVBPQNp.js');
 var cancel = require('./cancel-B5SbMYEk.js');
-var trackedPromise = require('./tracked-promise-DzZoxrcZ.js');
+var trackedPromise = require('./tracked-promise-DTPdQpTt.js');
 
 const sallaLoyaltyProgramCss$3 = "";
 

package/dist/cjs/salla-scopes.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var search = require('./search-c7Aa7lM9.js');
 
 var StoreAlt = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-search.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var search = require('./search-c7Aa7lM9.js');
 var Helper = require('./Helper-CU4Xuiki.js');
 require('./anime.es-BqW8JHZi.js');

package/dist/cjs/salla-skeleton.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaSkeletonCss = ":host{display:block}";
 

package/dist/cjs/salla-slider.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
 
 /**

package/dist/cjs/salla-social-share.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 var facebook = require('./facebook-DbXua6B9.js');
 var mail = require('./mail-Bgvt2hc9.js');

package/dist/cjs/salla-social.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var facebook = require('./facebook-DbXua6B9.js');
 
 var instagram = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-tab-content_3.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaTabContentCss = "";
 

package/dist/cjs/salla-tiered-offer.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 var DiscountType;
 (function (DiscountType) {

package/dist/cjs/salla-tooltip.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaTooltipCss = ".s-tooltip-container{position:relative;display:inline-block}.s-tooltip-item{position:absolute;transform:translateX(-39%);background-color:#baf3e6;color:#004d5a;bottom:100%;left:50%;text-align:center;border-radius:5px;z-index:1;white-space:nowrap;opacity:0;transition:opacity 0.3s;pointer-events:none;margin:0 0 16px 8px;padding:12px;max-width:150px;width:190px;white-space:normal;opacity:1}.s-tooltip-item::after{content:\"\";position:absolute;bottom:-10px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#baf3e6 transparent transparent transparent}.s-tooltip-item:dir(ltr){transform:translateX(-72%)}.s-tooltip-item--dark{background-color:#555555;color:white;padding:5px 15px;border-radius:8px;font-size:12px;font-weight:normal;max-width:330px;width:max-content}.s-tooltip-item--dark::after{border-color:#555555 transparent transparent transparent}";
 

package/dist/cjs/salla-trust-badges.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaTrustBadgesCss = "";
 

package/dist/cjs/salla-user-menu.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var keyboard_arrow_down = require('./keyboard_arrow_down-DHJ3FFZq.js');
 var bellRing = require('./bell-ring-BfKPinNo.js');
 var cart = require('./cart-s-x1Fshk.js');

package/dist/cjs/salla-user-profile.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var interfaces = require('./interfaces-CRqrf5RX.js');
 
 const sallaUserProfileCss = ":host{display:block}";

package/dist/cjs/salla-user-settings.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 var Bullhorn = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-verify.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 var mail = require('./mail-Bgvt2hc9.js');
 
 var AndroidPhoneIcon = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-wallet.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 const sallaWalletCss = ".s-wallet-table{min-width:100%}.s-wallet-table-balance-container{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:1rem}.s-wallet-table-balance-icon{border-radius:50%;width:52px;height:52px;font-size:25px;padding:16px 13px;background:var(--color-primary-reverse);color:var(--color-primary)}.s-wallet-table-empty-state{display:flex;flex-direction:column;align-items:center}.s-wallet-table-empty-state i{font-size:80px;margin:4rem 0 2rem;color:var(--infinte-color)}.s-wallet-table-transaction-status{padding:6px 19px !important;border-radius:20px;width:max-content;display:flex;align-items:center}.s-wallet-table-transaction-status-default{background:#fff6eb;color:#a46f29}.s-wallet-table-transaction-status-cashback{background:#effbf6;color:#00af6c}.s-wallet-table-transaction-status-refund{background:#ecf3fe;color:#5196f3}.s-wallet-table-transaction-status-purchase{background:#feecec;color:#f55157}.s-wallet-table-transaction-status-icons-success{color:#00af6c}";
 

package/dist/cjs/{tracked-promise-DzZoxrcZ.js → tracked-promise-DTPdQpTt.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 function TrackedPromise(fn, options = {}) {
     options = Object.assign({ initialData: undefined, initialStatus: 'idle' }, options);

package/dist/cjs/twilight.cjs.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*

package/dist/cjs/{vanilla-picker-BVAoSLKh.js → vanilla-picker-CmTZhXxo.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DDYWBzxi.js');
+var index = require('./index-CSI6rnkc.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

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

@@ -181,6 +181,9 @@ export class SallaOffer {
                 if (details.apply_to === 'brand' && details.targets) {
                     details.brands = details.targets;
                 }
+                if (details.apply_to === 'tag' && details.targets) {
+                    details.tags = details.targets;
+                }
                 if (offer.type === OfferType.BuyXGetY && details.get) {
                     const getY = details.get;
                     if (getY.source === 'products' && getY.source_value) {
@@ -301,7 +304,7 @@ export class SallaOffer {
         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), this.renderOfferBrands(offer))) : (h("div", { class: "s-offer-card-details" }, this.renderOfferCategories(offer), this.renderOfferBrands(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"] })))))));
+        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), this.renderOfferBrands(offer), this.renderOfferTags(offer))) : (h("div", { class: "s-offer-card-details" }, this.renderOfferCategories(offer), this.renderOfferBrands(offer), this.renderOfferTags(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
@@ -310,11 +313,13 @@ export class SallaOffer {
                 ? [
                     this.renderPercentageOrFixedOfferContent(offer),
                     this.renderOfferCategories(offer),
-                    this.renderOfferBrands(offer)
+                    this.renderOfferBrands(offer),
+                    this.renderOfferTags(offer)
                 ]
                 : [
                     this.renderOfferCategories(offer),
-                    this.renderOfferBrands(offer)
+                    this.renderOfferBrands(offer),
+                    this.renderOfferTags(offer)
                 ], this.renderProductsLinkForModalCard(offer, false))))));
     }
     getOfferIcon(offerType) {
@@ -394,6 +399,21 @@ export class SallaOffer {
                 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', 'عرض'), " ", `+${brands.length - maxVisible}`, ' ', h("i", { class: "sicon-keyboard_arrow_down" }))))))));
     }
+    renderOfferTags(offer) {
+        const details = offer.details;
+        const tags = details.tags || [];
+        if (!tags.length)
+            return null;
+        const maxVisible = 3;
+        const isExpanded = this.expandedCategories[offer.id];
+        const shouldShowMore = tags.length > maxVisible;
+        const visibleTags = isExpanded ? tags : tags.slice(0, maxVisible);
+        return (h("div", { class: "s-offer-categories" }, h("div", { class: "s-offer-categories-list" }, visibleTags.map((tag, index) => (h("a", { key: index, class: "s-offer-category-item", href: tag.url || salla.url.create('tags', tag.id) }, tag.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', 'عرض'), " ", `+${tags.length - maxVisible}`, ' ', h("i", { class: "sicon-keyboard_arrow_down" }))))))));
+    }
     /**
      * Toggle category expansion for a specific offer
      */

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

@@ -110,6 +110,9 @@ export class SallaOfferModal {
         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);
     }
@@ -182,6 +185,9 @@ export class SallaOfferModal {
         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: Tag }), h("span", { class: "s-offer-modal-badge-text" }, tag.name)))));
+        }
     }
     //todo:: pass event then use sallaButton from it
     //   private addItem() {
@@ -199,7 +205,7 @@ export class SallaOfferModal {
     //       '</div>';
     //   }
     render() {
-        return h("salla-modal", { key: '8be68e5882a9cbb1f4286f765f5db3ce88689c16', "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: '570bcafe6a1a00534b26ee25aa154e46594cb662', slot: 'loading' }, h("div", { key: 'baee23d1ad4429e8663fcf043004bf0747fe47de', class: "s-offer-modal-skeleton" }, h("div", { key: '1c6967ecfb17092c48247c17c2ce86b8ca048c77', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: 'a6ce5a415d4e6350c2467d7d3c070fddaeccd074', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '2d65ed027b9fff7eae7ecbb372f9e584a0334cf5', height: '15px', width: '50%' }), h("salla-skeleton", { key: '247706c9ddf7d2b9f96c7ea2deac960de3449017', height: '10px', width: '30%' })), h("div", { key: 'b5c9fec6565313706e2d6b73e2f060e4b216ffbc', 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: Cart2 }))))), h("div", { key: '58e2d38061e8e4434113b1fc16f3601969e342da', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: 'c388e246236e4849e5d97592ea6a803e6409083f', height: '15px', width: '50%' }), h("salla-skeleton", { key: '4ccd783b15647cf62f1b5b4d760f3e7feead7bfb', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+        return h("salla-modal", { key: '3387816ac4997e48ce463de1acae69583a99eef1', "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: '38ee273912aeec936b6762cac52eca16b65c2744', slot: 'loading' }, h("div", { key: '05911f31ca0884953185cbc1ac1c7b7ad007baf1', class: "s-offer-modal-skeleton" }, h("div", { key: '095055ba94627a2800e65be09a516286f3eea9c3', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: 'b1469e4e49e0d90602b9d0fac8672a9a063141f6', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '7b738f6b9b153a49d03bb76a57690e2de9749d87', height: '15px', width: '50%' }), h("salla-skeleton", { key: '6d88e7ad3e419ab5a647bdd2215976bacd892e8d', height: '10px', width: '30%' })), h("div", { key: 'ee012a7a75a728ee76fa0888c487ac6d63c05efa', 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: Cart2 }))))), h("div", { key: 'db71ea2e16e6d219bfeb1320b174e75d9e5fab19', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '862658e0a5df3c1a2350c2a571f4f0e8f8a4d0af', height: '15px', width: '50%' }), h("salla-skeleton", { key: '0f3c58145caf12c90626742c8cbc768a442a3ce4', 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'))),