npm - @salla.sa/twilight-components - Versions diffs - 2.14.574 → 2.14.576 - Mend

@salla.sa/twilight-components 2.14.574 → 2.14.576

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (348) hide show

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

@@ -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,32 @@ 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.renderMinSpend(offer), 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.renderMinSpend(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 +381,28 @@ 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))))))))))));
+    }
+    /**
+     * The minimum-purchase line for the offer types that have no conditions block
+     * of their own — BuyXGetY, SpecialPrice and Bank.
+     *
+     * Guarded on `min_spend` alone. This renders only the min-spend row, so the
+     * block-level guard used by renderPercentageOrFixedOfferContent (which gates
+     * three independently-rendered rows) does not apply here: borrowing it made
+     * any offer carrying just a `discount_value` print "a minimum of 0.00".
+     */
+    renderMinSpend(offer) {
+        const details = offer.details;
+        if (!(details.min_spend > 0))
+            return null;
+        return (h("div", { class: "s-offer-min-spend", innerHTML: this.min_spend_text(this.money(details.min_spend)) }));
     }
     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 +411,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 +445,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 +483,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 +592,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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-orders/salla-orders.js CHANGED Viewed

@@ -5,15 +5,20 @@ import { h } from "@stencil/core";
 import Helper from "../../Helpers/Helper";
 const FEEDBACK_STATUS_WAITING = 'waiting';
 const TAB_QUERY_PARAM = 'tab';
+const SHOW_EXTERNAL_ORDERS_FEATURE = 'show-external-orders';
 function getFilterFromSearchParams() {
     const tab = new URLSearchParams(window.location.search).get(TAB_QUERY_PARAM);
-    return tab === 'waiting' ? 'waiting' : 'all';
+    if (tab === 'waiting' || tab === 'archived')
+        return tab;
+    return 'all';
 }
 const LANG_DEFAULTS = {
     'pages.orders.filter_all': { ar: 'الكل', en: 'All' },
+    'pages.orders.filter_archived': { ar: 'الطلبات المؤرشفة', en: 'Archived orders' },
     'pages.orders.filter_awaiting_review': { ar: 'بانتظار تقييمك', en: 'Awaiting your review' },
     'pages.orders.leave_review': { ar: 'أضف تقييمك', en: 'Add review' },
     'pages.orders.no_unrated_orders': { ar: 'لا توجد طلبات غير مقيَّمة', en: 'No unrated orders' },
+    'pages.orders.no_archived_orders': { ar: 'لا توجد طلبات مؤرشفة', en: 'No archived orders' },
     'pages.orders.review_banner': {
         ar: 'لديك طلبات بانتظار تقييمك. شارك رأيك وساعدنا على تحسين تجربتك.',
         en: 'You have orders awaiting your review. Share your feedback and help us improve your experience.',
@@ -33,9 +38,11 @@ export class SallaOrder {
         this.load_more_text_trans = salla.lang.get('common.elements.load_more');
         this.languageCode = salla.lang.locale;
         this.filterAllText = salla.lang.getWithDefault('pages.orders.filter_all', 'الكل');
+        this.filterArchivedText = salla.lang.getWithDefault('pages.orders.filter_archived', 'الطلبات المؤرشفة');
         this.filterAwaitingReviewText = salla.lang.getWithDefault('pages.orders.filter_awaiting_review', 'بانتظار تقييمك');
         this.leaveReviewText = salla.lang.getWithDefault('pages.orders.leave_review', 'شارك تقييمك');
         this.noUnratedOrdersText = salla.lang.getWithDefault('pages.orders.no_unrated_orders', 'لا توجد طلبات غير مقيَّمة');
+        this.noArchivedOrdersText = salla.lang.getWithDefault('pages.orders.no_archived_orders', 'لا توجد طلبات مؤرشفة');
         this.orders = [];
         this.nextPage = null;
         this.activeFilter = getFilterFromSearchParams();
@@ -44,6 +51,7 @@ export class SallaOrder {
         this.isFetching = false;
         this.reviewPoints = 0;
         this.filterGeneration = 0;
+        this.showExternalOrders = false;
         salla.lang.onLoaded(() => {
             this.languageCode = salla.lang.locale;
             this.orderNumberText = salla.lang.get('pages.thank_you.order_id');
@@ -63,9 +71,11 @@ export class SallaOrder {
     }
     refreshReviewLabels() {
         this.filterAllText = salla.lang.getWithDefault('pages.orders.filter_all', 'الكل');
+        this.filterArchivedText = salla.lang.getWithDefault('pages.orders.filter_archived', 'الطلبات المؤرشفة');
         this.filterAwaitingReviewText = salla.lang.getWithDefault('pages.orders.filter_awaiting_review', 'بانتظار تقييمك');
         this.leaveReviewText = salla.lang.getWithDefault('pages.orders.leave_review', 'شارك تقييمك');
         this.noUnratedOrdersText = salla.lang.getWithDefault('pages.orders.no_unrated_orders', 'لا توجد طلبات غير مقيَّمة');
+        this.noArchivedOrdersText = salla.lang.getWithDefault('pages.orders.no_archived_orders', 'لا توجد طلبات مؤرشفة');
     }
     setupLoyalty() {
         // ? Flags
@@ -210,11 +220,11 @@ export class SallaOrder {
             return;
         this.setLoadMoreLoading(false);
         this.isFetching = true;
-        // Rows are appended to the wrapper imperatively (outside Stencil's vdom), so
+        // Rows are appended to the table body imperatively (outside Stencil's vdom), so
         // switching the render branch to the skeleton table won't clear them on its
         // own — clear them explicitly or the old rows linger alongside the skeleton.
-        if (this.wrapper) {
-            this.wrapper.innerHTML = '';
+        if (this.ordersTableBody) {
+            this.ordersTableBody.innerHTML = '';
         }
         this.filterGeneration++;
         const feedbackStatus = filter === 'waiting' ? FEEDBACK_STATUS_WAITING : null;
@@ -224,6 +234,7 @@ export class SallaOrder {
                 format: 'light',
                 types: [''],
                 feedback_status: feedbackStatus,
+                ...(filter === 'archived' ? { external_orders: 1 } : {}),
             });
             this.orders = resp.data;
             this.hasInfiniteScroll = !!resp.pagination?.links.next;
@@ -237,8 +248,8 @@ export class SallaOrder {
             }
             if (!this.orders.length) {
                 this.setLoadMoreLoading(false);
-                this.emptyFilterResult = filter === 'waiting';
-                this.showPlaceholder = filter !== 'waiting';
+                this.emptyFilterResult = filter !== 'all';
+                this.showPlaceholder = filter === 'all';
                 return;
             }
             this.showPlaceholder = false;
@@ -256,7 +267,9 @@ export class SallaOrder {
         }
     }
     getSingleOrderItem(order) {
-        const referenceId = order.reference_id ?? '';
+        const orderNumber = String((this.activeFilter === 'archived' ? order.external_order_id : order.reference_id) ?? '');
+        // ponytail: # only for pure digits; alphanumeric external ids stay bare
+        const orderNumberLabel = /^\d+$/.test(orderNumber) ? `#${orderNumber}` : orderNumber;
         const tr = document.createElement('tr');
         tr.classList.add('s-orders-table-tbody-tr', 's-orders-table-tbody-tr-shadow');
         const td1 = document.createElement('td');
@@ -268,7 +281,7 @@ export class SallaOrder {
         span1.textContent = `${this.orderNumberText}:`;
         const span2 = document.createElement('span');
         span2.classList.add('s-orders-reference-id');
-        span2.textContent = `#${referenceId}`;
+        span2.textContent = orderNumberLabel;
         div1.appendChild(span1);
         div1.appendChild(span2);
         if (order.source === 'buy_as_gift') {
@@ -286,7 +299,7 @@ export class SallaOrder {
         sallaButton.classList.add('relative');
         sallaButton.setAttribute('color', 'dark');
         sallaButton.setAttribute('shape', 'link');
-        sallaButton.dataset.content = String(referenceId);
+        sallaButton.dataset.content = orderNumber;
         sallaButton.addEventListener('click', event => {
             Helper.copyToClipboard(event);
             Helper.toggleElementClassIf(sallaButton, 'copied', 'code-to-copy', () => true);
@@ -295,7 +308,7 @@ export class SallaOrder {
             }, 1000);
         });
         const span3 = document.createElement('span');
-        span3.textContent = '#' + referenceId;
+        span3.textContent = orderNumberLabel;
         const copyIcon = document.createElement('i');
         copyIcon.classList.add('sicon-swap-stroke', 's-orders-copy-to-clipboard-button-icon');
         // Check the text direction
@@ -427,8 +440,13 @@ export class SallaOrder {
     renderSkeletonRows(count = 5) {
         return Array.from({ length: count }, (_, index) => this.renderSkeletonRow(index));
     }
+    getEmptyFilterText() {
+        return this.activeFilter === 'archived'
+            ? this.noArchivedOrdersText
+            : this.noUnratedOrdersText;
+    }
     renderFilters() {
-        return (h("div", { class: "s-orders-filters" }, h("salla-button", { size: "small", color: this.activeFilter === 'all' ? 'primary' : 'light', fill: "outline", onClick: () => this.switchFilter('all'), enableLoader: false }, this.filterAllText), h("salla-button", { size: "small", color: this.activeFilter === 'waiting' ? 'primary' : 'light', fill: "outline", onClick: () => this.switchFilter('waiting'), enableLoader: false }, this.filterAwaitingReviewText)));
+        return (h("div", { class: "s-orders-filters" }, h("salla-button", { size: "small", color: this.activeFilter === 'all' ? 'primary' : 'light', fill: "outline", onClick: () => this.switchFilter('all'), enableLoader: false }, this.filterAllText), this.showExternalOrders && (h("salla-button", { size: "small", color: this.activeFilter === 'archived' ? 'primary' : 'light', fill: "outline", onClick: () => this.switchFilter('archived'), enableLoader: false }, this.filterArchivedText)), h("salla-button", { size: "small", color: this.activeFilter === 'waiting' ? 'primary' : 'light', fill: "outline", onClick: () => this.switchFilter('waiting'), enableLoader: false }, this.filterAwaitingReviewText)));
     }
     renderBanner() {
         if (!this.pendingReviewCount)
@@ -439,7 +457,7 @@ export class SallaOrder {
         if (this.showPlaceholder) {
             return (h("div", { class: "s-orders-no-content" }, h("i", { class: "sicon-packed-box icon" }), h("p", null, this.noOrderText)));
         }
-        return (h("div", { class: "s-orders-wrapper" }, this.renderBanner(), this.renderFilters(), h("div", { class: "s-orders-list-wrapper" }, this.isFetching ? (h("table", { class: "s-orders-table s-orders-table-skeleton" }, this.renderTableHead(), h("tbody", { class: "s-orders-table-tbody" }, this.renderSkeletonRows()))) : this.emptyFilterResult ? (h("div", { class: "s-orders-no-content" }, h("i", { class: "sicon-packed-box icon" }), h("p", null, this.noUnratedOrdersText))) : (h("table", { class: "s-orders-table" }, this.renderTableHead(), h("tbody", { class: "s-orders-table-tbody", ref: element => (this.ordersTableBody = element) })))), this.nextPage && !this.emptyFilterResult && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => (this.status = status) }, h("button", { type: "button", onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ?? this.load_more_text_trans), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => (this.btnLoader = btnLoader), style: { display: 'none' } })))), h("salla-rating-modal", { ref: el => (this.ratingModal = el) })));
+        return (h("div", { class: "s-orders-wrapper" }, this.renderBanner(), this.renderFilters(), h("div", { class: "s-orders-list-wrapper" }, this.isFetching ? (h("table", { class: "s-orders-table s-orders-table-skeleton" }, this.renderTableHead(), h("tbody", { class: "s-orders-table-tbody" }, this.renderSkeletonRows()))) : this.emptyFilterResult ? (h("div", { class: "s-orders-no-content" }, h("i", { class: "sicon-packed-box icon" }), h("p", null, this.getEmptyFilterText()))) : (h("table", { class: "s-orders-table" }, this.renderTableHead(), h("tbody", { class: "s-orders-table-tbody", ref: element => (this.ordersTableBody = element) })))), this.nextPage && !this.emptyFilterResult && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => (this.status = status) }, h("button", { type: "button", onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ?? this.load_more_text_trans), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => (this.btnLoader = btnLoader), style: { display: 'none' } })))), h("salla-rating-modal", { ref: el => (this.ratingModal = el) })));
     }
     componentDidRender() {
         this.populateOrdersTableIfEmpty();
@@ -451,6 +469,13 @@ export class SallaOrder {
         });
         return salla.onReady().then(() => {
             this.setupLoyalty();
+            this.showExternalOrders = salla.config
+                .get('store.features', [])
+                .includes(SHOW_EXTERNAL_ORDERS_FEATURE);
+            if (this.activeFilter === 'archived' && !this.showExternalOrders) {
+                this.activeFilter = 'all';
+                this.syncFilterToSearchParams('all');
+            }
             const tasks = [this.fetchOrders(this.activeFilter)];
             // fetchOrders already resolves the pending count when the initial tab is "waiting"
             if (this.activeFilter !== 'waiting') {
@@ -527,9 +552,11 @@ export class SallaOrder {
             "load_more_text_trans": {},
             "languageCode": {},
             "filterAllText": {},
+            "filterArchivedText": {},
             "filterAwaitingReviewText": {},
             "leaveReviewText": {},
             "noUnratedOrdersText": {},
+            "noArchivedOrdersText": {},
             "orders": {},
             "pagination": {},
             "hasInfiniteScroll": {},