@salla.sa/twilight-components 2.14.500 → 2.14.501

package/dist/collection/components/salla-basket-gap/salla-basket-gap.js

@@ -0,0 +1,306 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Host, h } from "@stencil/core";
+import { fetchCartBoughtTogether } from "../../shared/catalog-recommendations";
+export class SallaBasketGap {
+    constructor() {
+        /**
+         * Maximum number of recommendations to fetch.
+         */
+        this.limit = 10;
+        this.products = [];
+        this.isLoading = true;
+        this.canRender = true;
+        this.title = '';
+        this.addToCartLabel = '';
+        this.weightLabel = '';
+        this.discountLabel = '';
+        this.placeholder = '';
+        this.fetchGeneration = 0;
+        this.isSyncingCart = false;
+        this.cartItemChangedHandler = (response) => {
+            const items = response?.data?.cart?.items ?? [];
+            const ids = items.map((i) => String(i.product_id)).filter(Boolean);
+            // Reflect a newly added product in the cart list without a full page refresh.
+            this.syncCartItemsDom(items);
+            this.fetchRecommendations(ids);
+        };
+        this.beforeAddItemHandler = (data) => {
+            const id = String(data?.id ?? '');
+            if (id && this.products.some((p) => String(p.id) === id) && salla.cart?.api) {
+                salla.cart.api.addToCartSource = 'basket_gap';
+            }
+        };
+        this.addButtonSuccessHandler = (event) => {
+            const productId = event?.target?.getAttribute?.('product-id');
+            if (!productId)
+                return;
+            const product = this.products.find((p) => String(p.id) === String(productId));
+            if (!product)
+                return;
+            const items = event?.detail?.data?.items ?? [];
+            const cartItem = items.find((i) => String(i.product_id) === String(product.id)) ?? items.slice(-1)[0];
+            salla.event.emit('salla-basket-gap::product.added', [{
+                    product,
+                    position: this.products.indexOf(product) + 1,
+                    cartItem,
+                    cartId: event?.detail?.data?.id,
+                    source: 'basket_gap',
+                }]);
+        };
+        salla.lang.onLoaded(() => {
+            this.title = salla.lang.get('pages.cart.basket_gap_title');
+            this.addToCartLabel = salla.lang.get('pages.cart.add_to_cart');
+            this.weightLabel = salla.lang.get('pages.products.weight');
+            this.discountLabel = salla.lang.get('pages.products.discount');
+        });
+    }
+    componentWillLoad() {
+        salla.onReady().then(() => {
+            if (!salla.config.get('store.settings.cart.basket_gap')) {
+                this.canRender = false;
+                this.isLoading = false;
+                return;
+            }
+            this.title = salla.lang.get('pages.cart.basket_gap_title');
+            this.addToCartLabel = salla.lang.get('pages.cart.add_to_cart');
+            this.weightLabel = salla.lang.get('pages.products.weight');
+            this.discountLabel = salla.lang.get('pages.products.discount');
+            this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));
+            const cachedCart = salla.storage.get('cart');
+            const cachedIds = (cachedCart?.items ?? []).map((i) => String(i.product_id)).filter(Boolean);
+            if (cachedIds.length) {
+                return this.fetchRecommendations(cachedIds);
+            }
+            return salla.api.cart.details()
+                .then(({ data: { cart } }) => {
+                const objectIDs = (cart?.items ?? []).map((i) => String(i.product_id)).filter(Boolean);
+                return this.fetchRecommendations(objectIDs);
+            })
+                .catch(() => {
+                this.canRender = false;
+                this.isLoading = false;
+            });
+        });
+    }
+    componentDidLoad() {
+        this.positionUnderCartItems();
+    }
+    componentDidUpdate() {
+        document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
+        this.positionUnderCartItems();
+    }
+    /**
+     * Cart item rows on the storefront cart page (excluding the order-options block).
+     * Kept defensive: themes that don't use the `form[id^="item-"]` pattern return none.
+     */
+    getCartItemForms(root = document) {
+        return Array.from(root.querySelectorAll('form[id^="item-"]'))
+            .filter((form) => !form.closest('.cart-options'));
+    }
+    /**
+     * The component is injected at the theme's `cart:items.end` hook, which may sit
+     * below the order options/offers. Move the host to render directly under the
+     * cart items. No-ops when the cart item pattern isn't present.
+     */
+    positionUnderCartItems() {
+        const items = this.getCartItemForms();
+        const lastItem = items[items.length - 1];
+        if (lastItem && lastItem.nextElementSibling !== this.host) {
+            lastItem.after(this.host);
+        }
+    }
+    /**
+     * Reflect a newly added product in the cart list without a full page reload.
+     * The whole item list is replaced with the fresh server-rendered rows because
+     * Salla re-assigns cart line-item ids on add, so diffing by id would duplicate
+     * the existing rows. No-ops on themes without the cart item markup.
+     */
+    syncCartItemsDom(cartItems) {
+        if (!cartItems?.length || this.isSyncingCart)
+            return;
+        const missing = cartItems.filter((item) => !document.getElementById('item-' + item.id));
+        if (!missing.length)
+            return;
+        this.isSyncingCart = true;
+        fetch(window.location.href, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
+            .then((res) => res.text())
+            .then((html) => {
+            const doc = new DOMParser().parseFromString(html, 'text/html');
+            const freshForms = this.getCartItemForms(doc);
+            const currentForms = this.getCartItemForms();
+            if (!freshForms.length || !currentForms.length)
+                return;
+            const firstCurrent = currentForms[0];
+            const parent = firstCurrent.parentElement;
+            if (!parent)
+                return;
+            // Insert the fresh rows in place of the current ones, then drop the old rows.
+            freshForms.forEach((form) => {
+                parent.insertBefore(document.importNode(form, true), firstCurrent);
+            });
+            currentForms.forEach((form) => form.remove());
+            document.lazyLoadInstance?.update?.();
+            this.positionUnderCartItems();
+        })
+            .catch(() => { })
+            .finally(() => { this.isSyncingCart = false; });
+    }
+    connectedCallback() {
+        salla.event.on('cart::item.added', this.cartItemChangedHandler);
+        salla.event.on('cart::item.deleted', this.cartItemChangedHandler);
+        // Tag adds originating from a basket-gap recommendation so the cart auto-track
+        // is suppressed in favour of our attributed `salla-basket-gap::product.added`.
+        salla.event.on('cart::before.add.item', this.beforeAddItemHandler);
+        this.host.addEventListener('success', this.addButtonSuccessHandler);
+    }
+    disconnectedCallback() {
+        salla.event.off('cart::item.added', this.cartItemChangedHandler);
+        salla.event.off('cart::item.deleted', this.cartItemChangedHandler);
+        salla.event.off('cart::before.add.item', this.beforeAddItemHandler);
+        this.host.removeEventListener('success', this.addButtonSuccessHandler);
+    }
+    // The recommendation API receives at most 5 cart product IDs, so it can return
+    // products that are already in the cart (those beyond the 5-item payload limit).
+    // We filter them out here to avoid showing items the customer already has.
+    // cartProductIds may be passed in directly from a live event payload; otherwise
+    // we fall back to storage (which can lag behind on the initial load path).
+    getCartProductIds(knownIds) {
+        if (knownIds?.length)
+            return new Set(knownIds);
+        const cart = salla.storage.get('cart');
+        return new Set((cart?.items ?? []).map((i) => String(i.product_id)).filter(Boolean));
+    }
+    fetchRecommendations(objectIDs) {
+        if (!objectIDs.length) {
+            this.canRender = false;
+            this.isLoading = false;
+            return Promise.resolve();
+        }
+        const generation = ++this.fetchGeneration;
+        return fetchCartBoughtTogether(objectIDs)
+            .then((ids) => {
+            if (generation !== this.fetchGeneration)
+                return;
+            // Pass objectIDs as the authoritative cart list so the filter is not
+            // affected by stale storage when called from a live cart event.
+            const cartIds = this.getCartProductIds(objectIDs);
+            const filteredIds = ids.filter(id => !cartIds.has(id));
+            if (!filteredIds.length) {
+                this.canRender = false;
+                return;
+            }
+            return this.fetchProducts(filteredIds.slice(0, this.limit), generation);
+        })
+            .catch(() => {
+            if (generation !== this.fetchGeneration)
+                return;
+            this.canRender = false;
+        })
+            .finally(() => {
+            if (generation !== this.fetchGeneration)
+                return;
+            this.isLoading = false;
+        });
+    }
+    fetchProducts(ids, generation) {
+        return salla.api.withoutNotifier(() => salla.product.api.fetch({
+            source: 'selected',
+            source_value: ids,
+            limit: this.limit,
+        })).then((response) => {
+            if (generation !== this.fetchGeneration)
+                return;
+            this.products = response?.data ?? [];
+            this.canRender = this.products.length > 0;
+        }).catch(() => {
+            if (generation !== this.fetchGeneration)
+                return;
+            this.canRender = false;
+        });
+    }
+    getDiscountLabel(product) {
+        if (product.promotion_title)
+            return product.promotion_title;
+        if (product.is_on_sale && product.regular_price > 0 && product.sale_price > 0) {
+            const percent = Math.round((1 - product.sale_price / product.regular_price) * 100);
+            return percent > 0 ? `${this.discountLabel} ${percent}%` : null;
+        }
+        return null;
+    }
+    formatDate(timestamp) {
+        const d = new Date(timestamp * 1000);
+        const mm = String(d.getMonth() + 1).padStart(2, '0');
+        const dd = String(d.getDate()).padStart(2, '0');
+        return `${d.getFullYear()}-${mm}-${dd}`;
+    }
+    getSkeletonView() {
+        return (h(Host, { class: "s-basket-gap-entry" }, h("div", { class: "s-basket-gap-skeleton" }, h("salla-skeleton", { height: "16px", width: "40%", style: { marginBottom: '16px' } }), Array(3).fill(null).map((_, i) => (h("div", { key: i, class: "s-basket-gap-skeleton-card" }, h("salla-skeleton", { height: "64px", width: "64px", style: { borderRadius: '8px', flexShrink: '0' } }), h("div", { class: "s-basket-gap-skeleton-info" }, h("salla-skeleton", { height: "14px", width: "50%" }), h("salla-skeleton", { height: "12px", width: "25%", style: { marginTop: '6px' } }), h("salla-skeleton", { height: "10px", width: "35%", style: { marginTop: '4px' } })), h("salla-skeleton", { height: "36px", width: "100px", style: { borderRadius: '6px', flexShrink: '0', marginInlineStart: 'auto' } })))))));
+    }
+    getProductCard(product) {
+        const discountLabel = this.getDiscountLabel(product);
+        return (h("div", { key: product.id, class: "s-basket-gap-card" }, h("a", { href: product.url, class: "s-basket-gap-card-image" }, h("img", { class: "lazy", src: this.placeholder, "data-src": product.image?.url, alt: product.image?.alt || product.name })), h("div", { class: "s-basket-gap-card-info" }, h("h3", { class: "s-basket-gap-card-name" }, h("a", { href: product.url }, product.name)), product.is_on_sale
+            ? h("div", { class: "s-basket-gap-card-sale-price" }, h("span", { innerHTML: salla.money(product.sale_price) }), h("del", { innerHTML: salla.money(product.regular_price) }))
+            : h("span", { class: "s-basket-gap-card-price", innerHTML: salla.money(product.price) }), product.weight_label && (h("span", { class: "s-basket-gap-card-weight" }, this.weightLabel, " ", product.weight_label))), (product.promotion_title || product.discount_ends || product.is_on_sale) && (h("div", { class: "s-basket-gap-card-offer" }, h("i", { class: "sicon-gift" }), discountLabel && h("span", null, discountLabel), product.discount_ends && [
+            h("salla-count-down", { date: this.formatDate(product.discount_ends), "end-of-day": true, digits: "en" }),
+            h("i", { class: "sicon-alarm" }),
+        ])), h("salla-add-product-button", { class: "s-basket-gap-card-btn", "product-id": product.id, "product-status": product.status, "product-type": product.type }, this.addToCartLabel)));
+    }
+    render() {
+        if (!this.canRender)
+            return null;
+        if (this.isLoading)
+            return this.getSkeletonView();
+        if (!this.products.length)
+            return null;
+        return (h(Host, { class: "s-basket-gap-entry" }, this.title && h("h2", { class: "s-basket-gap-title" }, this.title), h("div", { class: "s-basket-gap-list" }, this.products.map(product => this.getProductCard(product)))));
+    }
+    static get is() { return "salla-basket-gap"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-basket-gap.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-basket-gap.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "limit": {
+                "type": "number",
+                "attribute": "limit",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of recommendations to fetch."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "10"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "products": {},
+            "isLoading": {},
+            "canRender": {},
+            "title": {},
+            "addToCartLabel": {},
+            "weightLabel": {},
+            "discountLabel": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/salla-bought-together/salla-bought-together.js

@@ -2,8 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { Host, h } from "@stencil/core";
-// Read-only recommendations key confirmed safe for client-side use by the API team — no write access or sensitive scope.
-const XSELL_API_KEY = 'VOL5WaZu2YROp0RplCZAr1RplhL9FFGQ';
+import { fetchProductCustomersAlsoBought } from "../../shared/catalog-recommendations";
 export class SallaBoughtTogether {
     constructor() {
         /**
@@ -39,25 +38,14 @@ export class SallaBoughtTogether {
                 return;
             }
             this.resolvedProductId = id;
-            return salla.api.request('https://api.salla.dev/1/indexes/*/recommendations', {
-                requests: [{
-                        indexName: 'products',
-                        model: 'xsell-v1',
-                        priceThreshold: 2,
-                        objectID: String(id),
-                        maxRecommendations: this.limit,
-                    }]
-            }, 'post', { headers: { 'X-Algolia-Api-Key': XSELL_API_KEY, 'X-Query-Enrichment': 'false', 'X-source': 'store' } });
+            return fetchProductCustomersAlsoBought(String(id));
         })
-            .then((response) => {
-            if (!response)
-                return;
-            const hits = response?.results?.[0]?.hits ?? [];
-            if (!hits.length) {
+            .then((recommendedIds) => {
+            if (!recommendedIds?.length) {
                 this.canRender = false;
                 return;
             }
-            const ids = [String(this.resolvedProductId), ...hits.map(h => h.objectID)];
+            const ids = [String(this.resolvedProductId), ...recommendedIds.slice(0, this.limit)];
             return salla.product.fetch({ source: 'selected', source_value: ids });
         })
             .then((response) => {

package/dist/collection/components/salla-count-down/salla-count-down.js

@@ -125,7 +125,8 @@ export class SallaCountDown {
         return !isNaN(Date.parse(testedDate));
     }
     number(digit) {
-        return salla.helpers.number(digit, this.digits === 'en');
+        const value = String(Math.max(0, Math.floor(digit))).padStart(2, '0');
+        return salla.helpers.number(value, this.digits === 'en');
     }
     startCountDown() {
         const normalized = this.normalizeDate(this.date);
@@ -228,7 +229,7 @@ export class SallaCountDown {
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: '966a6ce961c0cc07b937d9b8e328211377084d44', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+        return (h(Host, { key: 'e2805e528a52b71ad71f4f1f16a473947dafb5bc', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get is() { return "salla-count-down"; }
     static get originalStyleUrls() {

package/dist/collection/shared/catalog-recommendations.js

@@ -0,0 +1,89 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const RECOMMENDATIONS_BASE_PATH = '/recommendations/v1';
+const CART_BOUGHT_TOGETHER_MAX_PRODUCT_IDS = 5;
+const CATALOG_RECOMMENDATIONS_API = 'https://api.salla.dev';
+function getRecommendationsBaseUrl() {
+    const storeApi = String(salla.config.get('store.api', '') || '').replace(/\/$/, '');
+    if (storeApi.includes('api.salla.dev')) {
+        return storeApi;
+    }
+    // Recommendations proxy is on the global catalog API host (prod-only for now),
+    // not on beta preview /api/v1 paths that store.api may point to.
+    return CATALOG_RECOMMENDATIONS_API;
+}
+function getRecommendationsUrl(path) {
+    return `${getRecommendationsBaseUrl()}${RECOMMENDATIONS_BASE_PATH}${path}`;
+}
+function parseHostname(value) {
+    if (!value) {
+        return null;
+    }
+    try {
+        const normalized = value.startsWith('http') ? value : `https://${value}`;
+        return new URL(normalized).hostname || null;
+    }
+    catch {
+        const hostname = String(value).replace(/^https?:\/\//i, '').split('/')[0];
+        return hostname || null;
+    }
+}
+function getStoreOriginHostname() {
+    const trackUrl = salla.config.get('jitsu.track_url');
+    const trackHostname = trackUrl ? parseHostname(String(trackUrl)) : null;
+    if (trackHostname) {
+        return trackHostname;
+    }
+    for (const candidate of [salla.config.get('store.domain'), salla.config.get('store.url')]) {
+        const hostname = candidate ? parseHostname(String(candidate)) : null;
+        if (hostname && !hostname.includes('beta.salla.group')) {
+            return hostname;
+        }
+    }
+    return window.location.hostname;
+}
+function getRecommendationsRequestConfig(params) {
+    const headers = {
+        's-store-id': String(salla.config.get('store.id')),
+        origin: getStoreOriginHostname(),
+        's-source': 'store',
+        lang: salla.lang.getLocale(),
+    };
+    const scopeId = salla.api.getHeader('s-scope-id');
+    if (scopeId) {
+        headers['s-scope-id'] = String(scopeId);
+    }
+    return { params, headers };
+}
+function extractRecommendationIds(response) {
+    return (response?.data ?? [])
+        .map(item => item?.id)
+        .filter((id) => Boolean(id));
+}
+function fetchRecommendations(path, params) {
+    const url = getRecommendationsUrl(path);
+    const config = getRecommendationsRequestConfig(params);
+    // Recommendations are a non-critical, best-effort feature; suppress the global
+    // API error notifier so transient failures stay invisible and the consuming
+    // component can silently hide its section via its own .catch().
+    return salla.api.withoutNotifier(() => salla.api.request(url, config, 'get'))
+        .then((response) => extractRecommendationIds(response));
+}
+export function fetchCartBoughtTogether(productIds) {
+    const ids = productIds.slice(0, CART_BOUGHT_TOGETHER_MAX_PRODUCT_IDS);
+    if (!ids.length) {
+        return Promise.resolve([]);
+    }
+    return fetchRecommendations('/carts/bought-together', {
+        product_ids: ids.join(','),
+    });
+}
+export function fetchProductCustomersAlsoBought(productId) {
+    if (!productId) {
+        return Promise.resolve([]);
+    }
+    return fetchRecommendations('/products/customers-also-bought', {
+        product_id: productId,
+    });
+}

package/dist/components/catalog-recommendations.js

@@ -0,0 +1,91 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const RECOMMENDATIONS_BASE_PATH = '/recommendations/v1';
+const CART_BOUGHT_TOGETHER_MAX_PRODUCT_IDS = 5;
+const CATALOG_RECOMMENDATIONS_API = 'https://api.salla.dev';
+function getRecommendationsBaseUrl() {
+    const storeApi = String(salla.config.get('store.api', '') || '').replace(/\/$/, '');
+    if (storeApi.includes('api.salla.dev')) {
+        return storeApi;
+    }
+    // Recommendations proxy is on the global catalog API host (prod-only for now),
+    // not on beta preview /api/v1 paths that store.api may point to.
+    return CATALOG_RECOMMENDATIONS_API;
+}
+function getRecommendationsUrl(path) {
+    return `${getRecommendationsBaseUrl()}${RECOMMENDATIONS_BASE_PATH}${path}`;
+}
+function parseHostname(value) {
+    if (!value) {
+        return null;
+    }
+    try {
+        const normalized = value.startsWith('http') ? value : `https://${value}`;
+        return new URL(normalized).hostname || null;
+    }
+    catch {
+        const hostname = String(value).replace(/^https?:\/\//i, '').split('/')[0];
+        return hostname || null;
+    }
+}
+function getStoreOriginHostname() {
+    const trackUrl = salla.config.get('jitsu.track_url');
+    const trackHostname = trackUrl ? parseHostname(String(trackUrl)) : null;
+    if (trackHostname) {
+        return trackHostname;
+    }
+    for (const candidate of [salla.config.get('store.domain'), salla.config.get('store.url')]) {
+        const hostname = candidate ? parseHostname(String(candidate)) : null;
+        if (hostname && !hostname.includes('beta.salla.group')) {
+            return hostname;
+        }
+    }
+    return window.location.hostname;
+}
+function getRecommendationsRequestConfig(params) {
+    const headers = {
+        's-store-id': String(salla.config.get('store.id')),
+        origin: getStoreOriginHostname(),
+        's-source': 'store',
+        lang: salla.lang.getLocale(),
+    };
+    const scopeId = salla.api.getHeader('s-scope-id');
+    if (scopeId) {
+        headers['s-scope-id'] = String(scopeId);
+    }
+    return { params, headers };
+}
+function extractRecommendationIds(response) {
+    return (response?.data ?? [])
+        .map(item => item?.id)
+        .filter((id) => Boolean(id));
+}
+function fetchRecommendations(path, params) {
+    const url = getRecommendationsUrl(path);
+    const config = getRecommendationsRequestConfig(params);
+    // Recommendations are a non-critical, best-effort feature; suppress the global
+    // API error notifier so transient failures stay invisible and the consuming
+    // component can silently hide its section via its own .catch().
+    return salla.api.withoutNotifier(() => salla.api.request(url, config, 'get'))
+        .then((response) => extractRecommendationIds(response));
+}
+function fetchCartBoughtTogether(productIds) {
+    const ids = productIds.slice(0, CART_BOUGHT_TOGETHER_MAX_PRODUCT_IDS);
+    if (!ids.length) {
+        return Promise.resolve([]);
+    }
+    return fetchRecommendations('/carts/bought-together', {
+        product_ids: ids.join(','),
+    });
+}
+function fetchProductCustomersAlsoBought(productId) {
+    if (!productId) {
+        return Promise.resolve([]);
+    }
+    return fetchRecommendations('/products/customers-also-bought', {
+        product_id: productId,
+    });
+}
+
+export { fetchProductCustomersAlsoBought as a, fetchCartBoughtTogether as f };