@salla.sa/twilight-components 2.14.573 → 2.14.575

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

@@ -3,6 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { PageType, OfferType } from "./interfaces";
+import { translate } from "../../Helpers/translate";
 /**
  * `salla-offer` is a StencilJS component that displays offers, categories, products, banks, and discount information.
  * It uses the `salla-slider` component for carousel functionality.
@@ -43,8 +44,13 @@ export class SallaOffer {
         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.min_spend_text = (money) => translate('pages.offer.min_spend_amount', { amount: money, currency: '' }, `بحد أدنى ${money} من مبلغ الشراء`);
+        this.min_items_text = (items) => translate('pages.offer.min_items', { items }, `بحد أدنى ${items} منتجات`);
+        this.max_discount_text = (money) => translate('pages.offer.max_discount_amount', { amount: money, currency: '' }, `بحد أقصى ${money} للخصم`);
+        this.branches_text = translate('pages.offer.available_branches', {}, 'الفروع المتاحة');
+        this.buy_from_text = translate('pages.offer.buy_from_categories', {}, 'اشترِ من:');
+        this.get_from_text = translate('pages.offer.get_from_categories', {}, 'احصل من:');
+        this.payment_methods_text = translate('pages.offer.payment_methods', {}, 'طرق الدفع');
         this.product_text = salla.lang.get('common.elements.product', 'منتج');
         // Language
         salla.lang.onLoaded(() => {
@@ -54,8 +60,13 @@ export class SallaOffer {
             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.min_spend_text = (money) => translate('pages.offer.min_spend_amount', { amount: money, currency: '' }, `بحد أدنى ${money} من مبلغ الشراء`);
+            this.min_items_text = (items) => translate('pages.offer.min_items', { items }, `بحد أدنى ${items} منتجات`);
+            this.max_discount_text = (money) => translate('pages.offer.max_discount_amount', { amount: money, currency: '' }, `بحد أقصى ${money} للخصم`);
+            this.branches_text = translate('pages.offer.available_branches', {}, 'الفروع المتاحة');
+            this.buy_from_text = translate('pages.offer.buy_from_categories', {}, 'اشترِ من:');
+            this.get_from_text = translate('pages.offer.get_from_categories', {}, 'احصل من:');
+            this.payment_methods_text = translate('pages.offer.payment_methods', {}, 'طرق الدفع');
             this.product_text = salla.lang.get('common.elements.product', 'منتج');
         });
         salla.onReady(() => {
@@ -133,7 +144,9 @@ export class SallaOffer {
                 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'));
+                    (offer.type === OfferType.BuyXGetY &&
+                        (details.get?.source === 'categories' || details.get?.source === 'category' ||
+                            details.buy?.source === 'categories' || details.buy?.source === 'category'));
             });
             if (needsCategories) {
                 const res = await salla.product.api.categories();
@@ -199,6 +212,11 @@ export class SallaOffer {
                     if ((buyX.source === 'products' || buyX.source === 'product') && buyX.source_value) {
                         buyX.products = buyX.source_value.map(id => allProducts[id]).filter(Boolean);
                     }
+                    else if ((buyX.source === 'categories' || buyX.source === 'category') && allCategories && buyX.source_value) {
+                        // Without this the buy side stayed unresolved and the card could only
+                        // ever show the get-side categories.
+                        buyX.categories = this.findCategories(allCategories, buyX.source_value);
+                    }
                 }
             }
             return this.offersList;
@@ -282,6 +300,21 @@ export class SallaOffer {
         // For categories, we'll return empty array as we handle categories separately
         return [];
     }
+    /**
+     * Title-adjacent description row.
+     *
+     * For a discount table the design sits the included-products link on the same
+     * line as the short description, rather than below the tier grid.
+     */
+    renderCardDescriptionRow(offer, withProductsLink = false) {
+        const inlineLink = withProductsLink && offer.type === OfferType.DiscountsTable
+            ? this.renderProductsLinkForModalCard(offer, false)
+            : null;
+        if (!offer.description && !inlineLink) {
+            return null;
+        }
+        return (h("div", { class: "s-offer-card-description-row" }, offer.description && h("p", { class: "s-offer-card-description" }, offer.description), inlineLink));
+    }
     renderProductsLinkForModalCard(offer, isInDrawer) {
         const products = this.getOfferProducts(offer);
         if (!products || products.length === 0) {
@@ -304,23 +337,31 @@ 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), 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"] })))))));
+        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), this.renderCardDescriptionRow(offer), offer.type === OfferType.DiscountsTable ? (h("div", { class: "s-offer-card-details" }, this.renderDiscountTableOfferContent(offer), this.renderOfferPaymentMethods(offer), this.renderOfferBranches(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), this.renderOfferPaymentMethods(offer), this.renderOfferBranches(offer))) : (h("div", { class: "s-offer-card-details" }, this.renderOfferCategories(offer), this.renderOfferBrands(offer), this.renderOfferTags(offer), this.renderOfferPaymentMethods(offer), this.renderOfferBranches(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)
+        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), this.renderCardDescriptionRow(offer, true), h("div", { class: "s-offer-card-details" }, offer.type === OfferType.DiscountsTable
+            ? [
+                this.renderDiscountTableOfferContent(offer),
+                this.renderOfferPaymentMethods(offer),
+                this.renderOfferBranches(offer)
+            ]
             : (offer.type === OfferType.PercentageOrFixed || offer.type === OfferType.Percentage || offer.type === OfferType.FixedAmount)
                 ? [
                     this.renderPercentageOrFixedOfferContent(offer),
                     this.renderOfferCategories(offer),
                     this.renderOfferBrands(offer),
-                    this.renderOfferTags(offer)
+                    this.renderOfferTags(offer),
+                    this.renderOfferPaymentMethods(offer),
+                    this.renderOfferBranches(offer)
                 ]
                 : [
                     this.renderOfferCategories(offer),
                     this.renderOfferBrands(offer),
-                    this.renderOfferTags(offer)
-                ], this.renderProductsLinkForModalCard(offer, false))))));
+                    this.renderOfferTags(offer),
+                    this.renderOfferPaymentMethods(offer),
+                    this.renderOfferBranches(offer)
+                ], offer.type !== OfferType.DiscountsTable && this.renderProductsLinkForModalCard(offer, false))))));
     }
     getOfferIcon(offerType) {
         const iconMap = {
@@ -339,13 +380,13 @@ export class SallaOffer {
         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))))))))))));
+        return (h("div", null, !offer.description && (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))
+        if (!details.discount_value && !(details.min_spend > 0) && !(details.min_items > 0) && !(details.max_discount_amount > 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)))));
+        return (h("div", { class: "s-offer-percentage-fixed-content" }, details.min_spend > 0 && (h("div", { class: "s-offer-min-spend", innerHTML: this.min_spend_text(this.money(details.min_spend)) })), details.min_items > 0 && (h("div", { class: "s-offer-min-items" }, this.min_items_text(details.min_items))), details.max_discount_amount > 0 && (h("div", { class: "s-offer-max-discount", innerHTML: this.max_discount_text(this.money(details.max_discount_amount)) }))));
     }
     groupDiscountsByRows(discounts, itemsPerRow) {
         const rows = [];
@@ -354,15 +395,31 @@ export class SallaOffer {
         }
         return rows;
     }
+    /**
+     * A tier is labelled by its item count ("20 منتج"), with the percentage above
+     * it saying what the shopper gets. `discounted_amount` is the resulting price;
+     * returning that here took the condition's place and hid the item count
+     * entirely, which is what the tiers used to render on the product page.
+     */
+    /**
+     * Money the way the rest of the storefront renders it.
+     *
+     * `salla.money()` returns markup — it swaps the currency for
+     * `<i class=sicon-sar></i>` when the store has the SAR symbol enabled — so the
+     * result has to be set with innerHTML. Printing it as text is what showed the
+     * riyal icon as raw code on the offer card and in the popup.
+     */
+    money(amount) {
+        return typeof salla?.money === 'function'
+            ? salla.money(amount)
+            : `${amount} ${this.userCurrency?.symbol || ''}`;
+    }
     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}`;
+        return `${discount.quantity ?? 1} ${this.product_text}`;
+    }
+    /** One labelled row of category links, used when buy and get differ. */
+    renderCategoryGroup(offer, categories, label) {
+        return (h("div", { class: "s-offer-categories-group" }, h("span", { class: "s-offer-categories-label" }, label), h("div", { class: "s-offer-categories-list" }, categories.map((category, index) => (h("a", { key: `${offer.id}-${index}`, class: "s-offer-category-item", href: category.url || salla.url.create('categories', category.id || category.id_) }, category.name))))));
     }
     renderOfferCategories(offer) {
         const details = offer.details;
@@ -372,6 +429,17 @@ export class SallaOffer {
         if (offer.type === OfferType.BuyXGetY && details.get?.categories) {
             categories = details.get.categories;
         }
+        // "Buy 2 from A, get 1 from B" needs both sides named; one flat list reads as
+        // if the whole offer were scoped to B. Only split when the sides really
+        // differ, so same-category offers keep rendering as a single list.
+        if (offer.type === OfferType.BuyXGetY) {
+            const buySide = details.buy?.categories || [];
+            const getSide = details.get?.categories || [];
+            const idsOf = (list) => list.map(c => c.id || c.id_).join(',');
+            if (buySide.length && getSide.length && idsOf(buySide) !== idsOf(getSide)) {
+                return (h("div", { class: "s-offer-categories" }, this.renderCategoryGroup(offer, buySide, this.buy_from_text), this.renderCategoryGroup(offer, getSide, this.get_from_text)));
+            }
+        }
         if (!categories.length)
             return null;
         const maxVisible = 3; // Show only first 3 categories initially
@@ -399,6 +467,30 @@ 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" }))))))));
     }
+    /**
+     * Payment methods the offer is conditioned on. Reads `payment_methods` rather
+     * than `targets`: for a payment-method offer `targets` holds bare encoded ids
+     * with no label to show.
+     */
+    renderOfferPaymentMethods(offer) {
+        const details = offer.details;
+        const methods = details.payment_methods || [];
+        if (!methods.length)
+            return null;
+        return (h("div", { class: "s-offer-payment-methods" }, h("span", { class: "s-offer-payment-methods-label" }, this.payment_methods_text), h("div", { class: "s-offer-payment-methods-list" }, methods.map((method, index) => (h("span", { key: index, class: "s-offer-payment-method-item" }, method.name))))));
+    }
+    /**
+     * Branch restriction. Rendered for every offer type because the restriction is
+     * a condition on the offer itself, not on what it discounts. Branches carry no
+     * storefront URL, so these are plain badges rather than links.
+     */
+    renderOfferBranches(offer) {
+        const details = offer.details;
+        const branches = details.branches || [];
+        if (!branches.length)
+            return null;
+        return (h("div", { class: "s-offer-branches" }, h("span", { class: "s-offer-branches-label" }, this.branches_text), h("div", { class: "s-offer-branches-list" }, branches.map((branch, index) => (h("span", { key: index, class: "s-offer-branch-item" }, branch.name))))));
+    }
     renderOfferTags(offer) {
         const details = offer.details;
         const tags = details.tags || [];
@@ -484,6 +576,11 @@ export class SallaOffer {
             "products_link_text": {},
             "min_spend_text": {},
             "min_items_text": {},
+            "max_discount_text": {},
+            "branches_text": {},
+            "buy_from_text": {},
+            "get_from_text": {},
+            "payment_methods_text": {},
             "product_text": {}
         };
     }

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

@@ -518,3 +518,35 @@
 .s-offer-modal-type-discounts-table .s-modal-body {
   position: relative !important;
 }
+.s-offer-modal-conditions {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: center;
+}
+.s-offer-modal-condition {
+  font-size: 13px;
+  line-height: 17px;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-offer-modal-condition-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+.s-offer-modal-condition-label {
+  font-size: 13px;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-offer-modal-condition-items {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  column-gap: 0.75rem;
+  row-gap: 0.25rem;
+}

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

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { h } from "@stencil/core";
+import { translate } from "../../Helpers/translate";
 import SpecialDiscountIcon from "../../assets/svg/special-discount.svg";
 import Tag from "../../assets/svg/tag.svg";
 import Cart2 from "../../assets/svg/cart2.svg";
@@ -124,6 +125,30 @@ export class SallaOfferModal {
         this.emitPromotionClicked(this.offer);
         salla.api.withoutNotifier(() => salla.cart.quickAdd(this.productID, qty, this.offer_type)).then(() => this.modal.close());
     }
+    /**
+     * Conditions attached to the offer — spend floor, discount ceiling, eligible
+     * payment methods and branch restriction. Rendered outside `getOfferContent()`
+     * because that method returns a single element per offer shape, while these
+     * apply across all of them.
+     */
+    getOfferConditions() {
+        const buy = this.offer.buy || {};
+        const get = this.offer.get || {};
+        const branches = this.offer.branches || [];
+        const paymentMethods = buy.payment_methods || [];
+        const hasMinAmount = buy.min_amount > 0;
+        const hasMinItems = buy.min_items > 0;
+        const hasMaxDiscount = get.max_discount_amount > 0;
+        if (!hasMinAmount && !hasMinItems && !hasMaxDiscount && !paymentMethods.length && !branches.length) {
+            return null;
+        }
+        return h("div", { class: "s-offer-modal-conditions" }, hasMinAmount &&
+            h("p", { class: "s-offer-modal-condition", innerHTML: translate('pages.offer.min_spend_amount', { amount: salla.money(buy.min_amount), currency: '' }, `بحد أدنى ${salla.money(buy.min_amount)} من مبلغ الشراء`) }), hasMinItems &&
+            h("p", { class: "s-offer-modal-condition" }, translate('pages.offer.min_items', { items: buy.min_items }, `بحد أدنى ${buy.min_items} منتجات`)), hasMaxDiscount &&
+            h("p", { class: "s-offer-modal-condition", innerHTML: translate('pages.offer.max_discount_amount', { amount: salla.money(get.max_discount_amount), currency: '' }, `بحد أقصى ${salla.money(get.max_discount_amount)} للخصم`) }), !!paymentMethods.length &&
+            h("div", { class: "s-offer-modal-condition-group" }, h("span", { class: "s-offer-modal-condition-label" }, translate('pages.offer.payment_methods', {}, 'طرق الدفع')), h("div", { class: "s-offer-modal-condition-items" }, paymentMethods.map((method) => h("span", { class: "s-offer-modal-badge-text" }, method.name)))), !!branches.length &&
+            h("div", { class: "s-offer-modal-condition-group" }, h("span", { class: "s-offer-modal-condition-label" }, translate('pages.offer.available_branches', {}, 'الفروع المتاحة')), h("div", { class: "s-offer-modal-condition-items" }, branches.map((branch) => h("span", { class: "s-offer-modal-badge-text" }, branch.name)))));
+    }
     getOfferContent() {
         if (this.offer.get.discounts_table) {
             return h("div", { class: "s-offer-modal-discount-table" }, h("table", null, h("tbody", null, this.offer.get.discounts_table?.map(discount => h("tr", null, h("td", null, discount.text), h("td", { class: "s-offer-modal-discount-table-cell" }, h("salla-button", { fill: "outline", shape: "btn", color: "primary", size: "medium", width: "normal", onClick: () => this.addToCart(discount.quantity) }, this.addToCartLabel)))))));
@@ -205,8 +230,9 @@ export class SallaOfferModal {
     //       '</div>';
     //   }
     render() {
-        return h("salla-modal", { key: 'fc50768aeae326779fc8321f98be591f19694877', "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: '0acb2bcfd86d7c43ffb806d9ef1c60ddf6babbe3', slot: 'loading' }, h("div", { key: '9d71931ba0fe2da318b111938f8df049c8bcba3f', class: "s-offer-modal-skeleton" }, h("div", { key: '2c56879682a5587f895b98122b11f7ac9b854277', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '58fcd5fe1bacde1f1bc289142821dbf2b98936ea', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '2ff2cf01d0423560b51a4a1ca1cb5957aad07571', height: '15px', width: '50%' }), h("salla-skeleton", { key: '879bc41293537d830604d056328a5390d1f83677', height: '10px', width: '30%' })), h("div", { key: 'c56c86160c0aa8cb9bab302adac0bb3ce6f0b544', 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: '7ae342a4e8bcb1acb104a7faaa51591453342446', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '064b069c56f8db50b508382f7a1b3d40aa929faf', height: '15px', width: '50%' }), h("salla-skeleton", { key: 'b8da7d4dea95f74e68954b69866f3e0c4c5d04c1', 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 ?
+        return h("salla-modal", { key: '65f0a5622466ab72be96f7a251e6ebab29c3f30c', "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: 'cb235e4d13b95673bde9bd5eeac1ee1ff7e0c1f4', slot: 'loading' }, h("div", { key: '249ced69c178e7071cb100c11829120f2b0a52b6', class: "s-offer-modal-skeleton" }, h("div", { key: '44da044786147e7b693866a7b3e776742622a7d2', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: 'cca94fa75f1086118dcce2dd6e4099cc09d9db7c', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: 'a0e1548a9f168c724b9353fca617ed55407b8537', height: '15px', width: '50%' }), h("salla-skeleton", { key: '72fd306f044249a568fc5ddf75eed898685955a5', height: '10px', width: '30%' })), h("div", { key: 'c54ceb5db0887372d487448c39cf1f2fe2b9cfd6', 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: '82400b8a1b032ce266cbd093d04607cabd4334ce', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '1898c3045f98af8a5fa70fc96544bdc93c8e21d2', height: '15px', width: '50%' }), h("salla-skeleton", { key: '2b3746f994eb9baaf5c8ed62e9b779fe6746a0a4', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+            ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(),
+                this.getOfferConditions(), 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'))),
             ] :

package/dist/collection/components/salla-user-menu/salla-user-menu.js

@@ -7,7 +7,7 @@ import ArrowDown from "../../assets/svg/keyboard_arrow_down.svg";
 import BellRing from "../../assets/svg/bell-ring.svg";
 import OrderIcon from "../../assets/svg/box-bankers.svg";
 import PendingOrdersIcon from "../../assets/svg/cart.svg";
-import WishListIcon from "../../assets/svg/star.svg";
+import WishListIcon from "../../assets/svg/heart.svg";
 import ProfileIcon from "../../assets/svg/user-circle.svg";
 import LogoutIcon from "../../assets/svg/send-out.svg";
 import Cancel from "../../assets/svg/cancel.svg";

package/dist/collection/components/salla-wishlist-summary/salla-wishlist-summary.css

@@ -0,0 +1,62 @@
+/*!twlt*/:host {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: 1rem;
+}
+.hidden {
+  display: none;
+}
+.s-wishlist-summary-wrapper {
+  position: relative;
+  margin-inline-start: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  border-style: none;
+  text-decoration-line: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.s-wishlist-summary-wrapper:hover {
+  opacity: 0.8;
+}
+.s-wishlist-summary-icon {
+  display: inline-flex;
+  height: 2.5rem;
+  width: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: var(--color-border,#e5e7eb);
+  color: var(--color-text-primary,#374151);
+}
+.s-wishlist-summary-icon svg {
+  height: 1.25rem;
+  width: 1.25rem;
+  fill: currentColor;
+}
+.s-wishlist-summary-count {
+  position: absolute;
+  top: -4px;
+  left: -6px;
+  display: inline-flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
+  padding: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.s-wishlist-summary-count:where([dir="rtl"], [dir="rtl"] *) {
+  left: unset;
+  right: -6px;
+}

package/dist/collection/components/salla-wishlist-summary/salla-wishlist-summary.js

@@ -0,0 +1,65 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Host, h } from "@stencil/core";
+import HeartIcon from "../../assets/svg/heart.svg";
+import Helper from "../../Helpers/Helper";
+/**
+ * Standalone wishlist ("Fav") icon, meant to sit at the outer nav-bar level
+ * next to `salla-user-menu` and `salla-cart-summary` — not nested inside the
+ * account dropdown.
+ *
+ * A/B test: shown only on basic/plus stores (see Helper.getPlanName()) —
+ * pro/special stores keep the pre-existing wishlist-in-menu-only experience.
+ * TODO: confirm before/after click-count reporting comes from analytics.
+ */
+export class SallaWishlistSummary {
+    constructor() {
+        this.isEnabled = false;
+        this.wishlistCount = 0;
+        this.wishlistLabel = salla.lang.get('common.titles.wishlist');
+        salla.wishlist.event.onAdded(() => this.syncCount());
+        salla.wishlist.event.onRemoved(() => this.syncCount());
+        // Server hydration (packages/twilight/src/api/wishlist.js syncStorageFromServer)
+        // rewrites `salla::wishlist` in storage after the add/remove events above have
+        // already fired, or without either firing at all — re-sync once it settles so
+        // the badge doesn't stay stale.
+        salla.event.on('wishlist::storage.synced', () => this.syncCount());
+    }
+    componentWillLoad() {
+        return new Promise(resolve => salla.onReady(() => {
+            const plan = Helper.getPlanName();
+            this.isEnabled = !!plan && ['basic', 'plus'].includes(plan);
+            this.syncCount();
+            resolve();
+        }));
+    }
+    syncCount() {
+        this.wishlistCount = (salla.storage.get('salla::wishlist', []) || []).length;
+    }
+    render() {
+        const is_guest = salla.config.isGuest();
+        if (!this.isEnabled || is_guest) {
+            return h(Host, { hidden: true });
+        }
+        return (h(Host, null, h("a", { class: "s-wishlist-summary-wrapper", href: salla.url.get('account/wishlist'), "aria-label": this.wishlistLabel }, h("i", { class: "s-wishlist-summary-icon", innerHTML: HeartIcon }), this.wishlistCount > 0 && (h("span", { class: "s-wishlist-summary-count" }, salla.helpers.number(this.wishlistCount))))));
+    }
+    static get is() { return "salla-wishlist-summary"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-wishlist-summary.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-wishlist-summary.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isEnabled": {},
+            "wishlistCount": {},
+            "wishlistLabel": {}
+        };
+    }
+}