@salla.sa/twilight-components 2.14.422 → 2.14.423

package/dist/collection/components/salla-cookies-bar/salla-cookies-bar.js

@@ -14,6 +14,16 @@ export class SallaCookiesBar {
         this.isMobile = false;
         this.mobileBreakpoint = 768;
         this.mobileQueryHandler = (e) => (this.isMobile = e.matches);
+        this.cookiesSettingsAnchorClass = 's-cookies-settings-link';
+        this.onCookiesSettingsClick = (event) => {
+            const target = event.target;
+            const link = target?.closest(`a.${this.cookiesSettingsAnchorClass}`);
+            if (!link) {
+                return;
+            }
+            event.preventDefault();
+            this.open();
+        };
     }
     async componentWillLoad() {
         await Salla.onReady();
@@ -33,9 +43,11 @@ export class SallaCookiesBar {
         this.mobileQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`);
         this.isMobile = this.mobileQuery.matches;
         this.mobileQuery.addEventListener('change', this.mobileQueryHandler);
+        document.addEventListener('click', this.onCookiesSettingsClick);
     }
     disconnectedCallback() {
         this.mobileQuery?.removeEventListener('change', this.mobileQueryHandler);
+        document.removeEventListener('click', this.onCookiesSettingsClick);
     }
     /**
      * Accept cookies consent.
@@ -57,6 +69,13 @@ export class SallaCookiesBar {
         Salla.storage.set('cookies-consent', 'rejected');
         return this.host;
     }
+    /**
+     * Show cookies settings bar to allow updating consent.
+     */
+    async open() {
+        this.isVisible = true;
+        return this.host;
+    }
     isRtl() {
         return Salla.config.get('theme.is_rtl', true);
     }
@@ -130,6 +149,27 @@ export class SallaCookiesBar {
                     "text": "Reject cookies consent.",
                     "tags": []
                 }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement>"
+                },
+                "docs": {
+                    "text": "Show cookies settings bar to allow updating consent.",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/salla-loyalty-program/salla-reward-details.js

@@ -101,7 +101,10 @@ export class SallaRewardDetails {
         }
     }
     getCategoriesJsx(items, title) {
-        return !items.length ? '' : h("div", { class: c('reward-details-categories-wrapper') }, h("div", { class: c('reward-details-categories') }, h("h2", { class: c('reward-details-categories-heading') }, title), h("ul", { class: c('reward-details-categories-list') }, items.map((category) => (h("li", null, h("a", { href: category.url || category.lingual_urls?.[0], class: c('reward-details-categories-item') }, h("span", { innerHTML: SITag }), h("span", { class: c('reward-details-categories-item-content') }, category.name))))))));
+        return !items.length ? '' : h("div", { class: c('reward-details-categories-wrapper') }, h("div", { class: c('reward-details-categories') }, h("h2", { class: c('reward-details-categories-heading') }, title), h("ul", { class: c('reward-details-categories-list') }, items.map((category) => {
+            console.log("🚀 ~ SallaRewardDetails ~ getCategoriesJsx ~ category:", category);
+            return (h("li", null, h("a", { href: category.urls?.customer || category.url || category.lingual_urls?.[0], class: c('reward-details-categories-item') }, h("span", { innerHTML: SITag }), h("span", { class: c('reward-details-categories-item-content') }, category.name))));
+        }))));
     }
     getBrandsJsx(items, title) {
         return !items.length ? '' : h("div", { class: c('reward-details-items-brands', 'slider-arrows-edges') }, h("div", null, h("h2", null, title), h("salla-slider", { id: `brands-${items.map(({ id }) => id).join('-')}`, "slider-config": '{"loop":false,"slidesPerView":"auto","spaceBetween":10}' }, h("div", { slot: "items" }, items.map((brand) => (h("a", { href: salla.url.get(brand_path(brand)), class: c('reward-brand-item') }, h("img", { src: brand.logo || salla.url.cdn('images/s-empty.png'), alt: "" }))))))));
@@ -111,11 +114,11 @@ export class SallaRewardDetails {
     }
     render() {
         const termsAndConditions = this.getTermsAndConditions();
-        return (h("div", { key: '17b29a9098873643557786c9d9515b6245e2d773', class: "s-loyalty-program-reward-modal" }, h("div", { key: 'bd5411918a07a8e2dc1eb8ef7b1e06e82403d280', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: '9e6d884e3e70c0ff3dbb005f61d48c1d1fa2ee65', class: "s-loyalty-program-points-modal-info" }, !salla.url.is_page('cart') ? ''
+        return (h("div", { key: 'ef93a73728cf87285615dfe5dc9345d1a54db64a', class: "s-loyalty-program-reward-modal" }, h("div", { key: '85883b377d8ec2490cde174ea33aa08a64e84b68', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: '2be1018fcdfff3966535a5e4cde4e10b99a690f6', class: "s-loyalty-program-points-modal-info" }, !salla.url.is_page('cart') ? ''
             : h("button", { class: "s-loyalty-program-back-btn", onClick: () => closeModals(() => salla.event.dispatch('modal::open', 'loyalty-rewards-modal')) }, h("span", { class: {
                     'sicon-arrow-right': document.documentElement.getAttribute('dir') === 'rtl',
                     'sicon-arrow-left': document.documentElement.getAttribute('dir') === 'ltr',
-                } })), this.prize.name)), h("div", { key: '09d716d984701a251a3a759acbf112883fd0cf8f', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: 'f7e2c8d017ba4dab380d08e0c7a5f1e49416b1f4', class: "s-loyalty-program-reward-details-header" }, h("div", { key: '369bb4e9a1b8d8dde62de1236b4d836fd3d6841f', class: "s-loyalty-program-aspect-container" }, h("img", { key: '3ed20feecdcd1c7433ec465364ae62639824ee6d', src: this.prize.image, alt: this.prize.name })), h("salla-badge", { key: '2bba4702e75d05622b719fa796efccda0520ce69', size: "sm", bg: "light" }, h("span", { key: '837afff2bdf9a390e8ca373f31dddbd84d7c6a91', innerHTML: SIGift }), h("span", { key: 'c3631a877062d69947928b1beee2ae4932910eec', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.prize.cost_points)))), !termsAndConditions.length ? '' : h("div", { class: "s-loyalty-program-terms-and-conditions" }, h("h1", { class: "s-loyalty-program-terms-and-conditions-heading" }, salla.lang.get('pages.loyalty_program.terms_and_conditions')), h("ul", { class: "s-loyalty-program-terms-and-conditions-list" }, termsAndConditions.map(([title, points]) => (h("li", { class: "s-loyalty-program-terms-and-conditions-item" }, h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, title), h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, points)))))), h("div", { key: '872bfd776acf67910a5cdeafdb48e2c7afd5d71c', class: "s-loyalty-program-reward-info-message" }, h("h1", { key: '253e6f58946e911ba2b74ef18ebcee0eae0bb514', class: "s-loyalty-program-reward-info-message-heading" }, salla.lang.get('pages.loyalty_program.how_to_benefit_from_this_reward')), h("p", { key: 'ce4b30fab9f1fae89fd956ae3eb20e5750fcea09', class: "s-loyalty-program-reward-info-message-content" }, this.getItemsMarkersText())), (this.prize.key === 'FREE_SHIPPING' || this.getItemsMarkers('both') === '000000') ? '' : h("div", { class: "s-loyalty-program-reward-details" }, h("salla-tabs", { key: this.refreshKey }, this.getItemsMarkers('included') === '000' ? '' : [
+                } })), this.prize.name)), h("div", { key: 'eac6726dde8b8f5562fc4953ffb5c84830d185d4', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: 'a0ea8aca31d63016ad4890044a8f9789a4798ee2', class: "s-loyalty-program-reward-details-header" }, h("div", { key: '9ff0ade39430845577a765f897ea50dc07ea498e', class: "s-loyalty-program-aspect-container" }, h("img", { key: '6001c3c5388611f924f22f229d879b48e7f5035e', src: this.prize.image, alt: this.prize.name })), h("salla-badge", { key: '4e69c07ff18b8a652ab852554ecb8a203fc34e16', size: "sm", bg: "light" }, h("span", { key: '854e73b47beeb53bda03ea3a6ac093fbe4098f16', innerHTML: SIGift }), h("span", { key: 'ed3c8592176708a08016560ee0e35f57bfb3bec4', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.prize.cost_points)))), !termsAndConditions.length ? '' : h("div", { class: "s-loyalty-program-terms-and-conditions" }, h("h1", { class: "s-loyalty-program-terms-and-conditions-heading" }, salla.lang.get('pages.loyalty_program.terms_and_conditions')), h("ul", { class: "s-loyalty-program-terms-and-conditions-list" }, termsAndConditions.map(([title, points]) => (h("li", { class: "s-loyalty-program-terms-and-conditions-item" }, h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, title), h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, points)))))), h("div", { key: 'f9b79897d68a7b9b7f35d36ef3e8bf34a58ae3c3', class: "s-loyalty-program-reward-info-message" }, h("h1", { key: '663d761572fe3961f616fd10cf98409ca31e5002', class: "s-loyalty-program-reward-info-message-heading" }, salla.lang.get('pages.loyalty_program.how_to_benefit_from_this_reward')), h("p", { key: '2756956099b574b793d3a0ea3bcc3de63fc4ab4c', class: "s-loyalty-program-reward-info-message-content" }, this.getItemsMarkersText())), (this.prize.key === 'FREE_SHIPPING' || this.getItemsMarkers('both') === '000000') ? '' : h("div", { class: "s-loyalty-program-reward-details" }, h("salla-tabs", { key: this.refreshKey }, this.getItemsMarkers('included') === '000' ? '' : [
             h("salla-tab-header", { slot: "header", name: "included", style: {
                     display: this.getItemsMarkers('excluded') === '000' ? 'none' : 'block',
                 } }, h("span", { class: "s-loyalty-program-reward-details-tab-icon", innerHTML: SICheck }), h("span", null, salla.lang.get(`pages.loyalty_program.included`))),
@@ -125,7 +128,7 @@ export class SallaRewardDetails {
                     display: this.getItemsMarkers('included') === '000' ? 'none' : 'block',
                 } }, h("span", { class: "s-loyalty-program-reward-details-tab-icon", innerHTML: SICancel }), h("span", null, salla.lang.get(`pages.loyalty_program.excluded`))),
             h("salla-tab-content", { slot: "content", name: "excluded" }, h("div", { class: "s-loyalty-program-reward-details-items-wrapper" }, this.getCategoriesJsx(this.getIncludedItems(this.prize.excludedCategories, this.prize.excluded_category_ids), salla.lang.get('pages.loyalty_program.excluded_categories')), this.getBrandsJsx(this.getIncludedItems(this.prize.excludedBrands, this.prize.excluded_brand_ids), salla.lang.get('pages.loyalty_program.excluded_brands')), this.getProductsJsx(this.getProductIds(this.prize.excluded_product_ids), salla.lang.get('pages.loyalty_program.excluded_products')))),
-        ]))), h("salla-reward-action", { key: '4055a99cf9dd6a30448848544d302e929afb5f06', onActionClick: e => this.actionClick.emit(e.detail), prize: this.prize })));
+        ]))), h("salla-reward-action", { key: '6576910c32df5d49f33e9372e2c0a3bd758c8125', onActionClick: e => this.actionClick.emit(e.detail), prize: this.prize })));
     }
     static get is() { return "salla-reward-details"; }
     static get originalStyleUrls() {

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

@@ -12,11 +12,19 @@ export class SallaMenu {
          * Boolean indicating whether to use React Link elements for menu links.
          */
         this.useReactLink = false;
+        /**
+         * When true (footer menu only), appends a link to open cookie preferences.
+         * Use as `with-cookie-preferences` in markup.
+         */
+        this.withCookiePreferences = false;
         this.menus = [];
+        this.cookiePreferencesLabel = '';
+        this.displayAllText = '';
     }
     async componentWillLoad() {
         return salla.onReady(() => {
             this.displayAllText = salla.lang.get('blocks.home.display_all');
+            this.cookiePreferencesLabel = salla.lang.get('common.cookies.settings');
             if (this.sourceValue && this.source === 'json') {
                 this.menus = typeof this.sourceValue === 'string' ? JSON.parse(this.sourceValue) : this.sourceValue || [];
             }
@@ -105,7 +113,11 @@ export class SallaMenu {
                     "s-menu-footer-item": !this.topnav,
                     "s-menu-topnav-item topnav-link-item right-side": this.topnav
                 } }, menu.title);
-        })));
+        }), this.withCookiePreferences ? (h("a", { href: "#cookies-settings", class: {
+                "s-menu-footer-item": !this.topnav,
+                "s-menu-topnav-item topnav-link-item right-side": this.topnav,
+                "s-cookies-settings-link": true,
+            } }, this.cookiePreferencesLabel)) : null));
     }
     /**
   * Get the menus
@@ -242,12 +254,33 @@ export class SallaMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "withCookiePreferences": {
+                "type": "boolean",
+                "attribute": "with-cookie-preferences",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true (footer menu only), appends a link to open cookie preferences.\nUse as `with-cookie-preferences` in markup."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "menus": {}
+            "menus": {},
+            "cookiePreferencesLabel": {}
         };
     }
 }

package/dist/collection/components/salla-next-order-coupon/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/salla-next-order-coupon/salla-next-order-coupon.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/salla-next-order-coupon/salla-next-order-coupon.js

@@ -0,0 +1,142 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+import TagMoneyIcon from "../../assets/svg/tag-money.svg";
+import SwapStrokeIcon from "../../assets/svg/swap-stroke.svg";
+export class SallaNextOrderCoupon {
+    constructor() {
+        this.coupon = null;
+        this.isLoading = true;
+        this.titlePercentTpl = '';
+        this.titleFixedTpl = '';
+        this.badgeLabel = '';
+        this.minSpendTpl = '';
+        this.expiresTpl = '';
+        this.shopNowLabel = '';
+        this.copyLabel = '';
+        this.copiedLabel = '';
+    }
+    componentWillLoad() {
+        Salla.onReady()
+            .then(() => Salla.lang.onLoaded())
+            .then(() => {
+            this.loadTranslations();
+            return this.loadCoupon();
+        })
+            .catch(() => {
+            this.isLoading = false;
+        });
+    }
+    loadTranslations() {
+        this.titlePercentTpl = Salla.lang.get('pages.thank_you.next_order_coupon.title_percent') || '';
+        this.titleFixedTpl = Salla.lang.get('pages.thank_you.next_order_coupon.title_fixed') || '';
+        this.badgeLabel = Salla.lang.get('pages.thank_you.next_order_coupon.badge') || '';
+        this.minSpendTpl = Salla.lang.get('pages.thank_you.next_order_coupon.min_spend') || '';
+        this.expiresTpl = Salla.lang.get('pages.thank_you.next_order_coupon.expires') || '';
+        this.shopNowLabel = Salla.lang.get('pages.thank_you.next_order_coupon.shop_now') || '';
+        this.copyLabel = Salla.lang.get('common.elements.copy') || '';
+        this.copiedLabel = Salla.lang.get('pages.thank_you.next_order_coupon.copied') || '';
+    }
+    async loadCoupon() {
+        try {
+            const response = await salla.api.request('coupons', { type: 'thankyou' });
+            const raw = response?.data;
+            const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : []);
+            this.coupon = list[0] ?? null;
+        }
+        catch {
+            this.coupon = null;
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async copyCode() {
+        if (!this.coupon)
+            return;
+        try {
+            await navigator.clipboard.writeText(this.coupon.code);
+            salla.notify.success(this.copiedLabel);
+            salla.event.dispatch('salla::next-order-coupon.code.copied', { code: this.coupon.code });
+        }
+        catch {
+            // clipboard write failed silently
+        }
+    }
+    isPercentage() {
+        return this.coupon?.type === 'P' || this.coupon?.type === 'percentage';
+    }
+    formatAmount() {
+        if (!this.coupon)
+            return '';
+        if (this.isPercentage()) {
+            return `${salla.helpers.number(this.coupon.amount)}%`;
+        }
+        const amt = this.coupon.amount;
+        if (typeof amt === 'object' && amt.amount) {
+            const a = amt;
+            return h("span", { innerHTML: salla.money(a.amount, a.currency) });
+        }
+        return h("span", { innerHTML: salla.money(amt) });
+    }
+    formatMinSpend() {
+        const min = this.coupon?.minimum_amount;
+        if (!min)
+            return '';
+        if (typeof min === 'string') {
+            return min.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+        }
+        return salla.money(min.amount, min.currency);
+    }
+    formatExpiry() {
+        const d = this.coupon?.expiry_date;
+        if (!d)
+            return '';
+        return new Date(d).toLocaleDateString(Salla.lang.locale || 'en-GB');
+    }
+    renderSkeleton() {
+        return (h("div", { class: "s-next-order-coupon-wrapper s-next-order-coupon-skeleton" }, h("div", { class: "s-next-order-coupon-inner" }, h("div", { class: "s-next-order-coupon-info" }, h("salla-skeleton", { type: "normal", width: "48px", height: "48px" }), h("div", { class: "s-next-order-coupon-details" }, h("salla-skeleton", { height: "14px", width: "220px" }), h("salla-skeleton", { height: "12px", width: "140px" }))), h("div", { class: "s-next-order-coupon-actions" }, h("salla-skeleton", { height: "40px", width: "140px" }), h("salla-skeleton", { height: "40px", width: "100px" })))));
+    }
+    renderTitle() {
+        const amount = this.formatAmount();
+        const tpl = this.isPercentage() ? this.titlePercentTpl : this.titleFixedTpl;
+        const placeholder = this.isPercentage() ? ':amount%' : ':amount';
+        const parts = tpl.split(placeholder);
+        return (h("p", { class: "s-next-order-coupon-title" }, parts[0], h("span", { class: "s-next-order-coupon-amount" }, amount), parts[1] || ''));
+    }
+    render() {
+        if (this.isLoading)
+            return this.renderSkeleton();
+        if (!this.coupon)
+            return null;
+        const minSpend = this.formatMinSpend();
+        const expiry = this.formatExpiry();
+        return (h("div", { class: "s-next-order-coupon-wrapper" }, h("div", { class: "s-next-order-coupon-inner" }, h("div", { class: "s-next-order-coupon-info" }, h("div", { class: "s-next-order-coupon-icon-wrap" }, h("span", { class: "s-next-order-coupon-icon-bg" }), h("span", { class: "s-next-order-coupon-icon", innerHTML: TagMoneyIcon })), h("div", { class: "s-next-order-coupon-details" }, h("div", { class: "s-next-order-coupon-title-row" }, this.renderTitle(), h("span", { class: "s-next-order-coupon-badge" }, h("span", { class: "s-next-order-coupon-badge-bg" }), h("span", { class: "s-next-order-coupon-badge-text" }, this.badgeLabel))), (minSpend || expiry) && (h("p", { class: "s-next-order-coupon-meta" }, minSpend && (h("span", { innerHTML: this.minSpendTpl.replace(':amount', minSpend) })), expiry && (h("span", null, this.expiresTpl.replace(':date', expiry))))))), h("div", { class: "s-next-order-coupon-actions" }, h("div", { class: "s-next-order-coupon-code-box" }, h("span", { class: "s-next-order-coupon-code-text" }, this.coupon.code), h("salla-button", { shape: "link", class: "s-next-order-coupon-copy-btn", title: this.copyLabel, onClick: () => this.copyCode() }, h("span", { class: "s-next-order-coupon-copy-icon", innerHTML: SwapStrokeIcon }))), h("salla-button", { href: salla.url.get(''), class: "s-next-order-coupon-shop-btn" }, this.shopNowLabel)))));
+    }
+    static get is() { return "salla-next-order-coupon"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-next-order-coupon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-next-order-coupon.css"]
+        };
+    }
+    static get states() {
+        return {
+            "coupon": {},
+            "isLoading": {},
+            "titlePercentTpl": {},
+            "titleFixedTpl": {},
+            "badgeLabel": {},
+            "minSpendTpl": {},
+            "expiresTpl": {},
+            "shopNowLabel": {},
+            "copyLabel": {},
+            "copiedLabel": {}
+        };
+    }
+}