@salla.sa/twilight-components 2.14.499 → 2.14.501

package/dist/components/salla-basket-gap.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaBasketGap extends Components.SallaBasketGap, HTMLElement {}
+export const SallaBasketGap: {
+    prototype: SallaBasketGap;
+    new (): SallaBasketGap;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,402 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { f as fetchCartBoughtTogether } from './catalog-recommendations.js';
+import { d as defineCustomElement$j } from './salla-add-product-button2.js';
+import { d as defineCustomElement$i } from './salla-booking-field2.js';
+import { d as defineCustomElement$h } from './salla-button2.js';
+import { d as defineCustomElement$g } from './salla-color-picker2.js';
+import { d as defineCustomElement$f } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$e } from './salla-count-down2.js';
+import { d as defineCustomElement$d } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$c } from './salla-file-upload2.js';
+import { d as defineCustomElement$b } from './salla-loading2.js';
+import { d as defineCustomElement$a } from './salla-map2.js';
+import { d as defineCustomElement$9 } from './salla-modal2.js';
+import { d as defineCustomElement$8 } from './salla-order-options-modal2.js';
+import { d as defineCustomElement$7 } from './salla-product-availability2.js';
+import { d as defineCustomElement$6 } from './salla-product-options2.js';
+import { d as defineCustomElement$5 } from './salla-progress-bar2.js';
+import { d as defineCustomElement$4 } from './salla-quick-buy2.js';
+import { d as defineCustomElement$3 } from './salla-skeleton2.js';
+import { d as defineCustomElement$2 } from './salla-tel-input2.js';
+
+const sallaBasketGapCss = ":host{display:block}";
+
+const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * 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)))));
+    }
+    get host() { return this; }
+    static get style() { return sallaBasketGapCss; }
+}, [0, "salla-basket-gap", {
+        "limit": [2],
+        "products": [32],
+        "isLoading": [32],
+        "canRender": [32],
+        "title": [32],
+        "addToCartLabel": [32],
+        "weightLabel": [32],
+        "discountLabel": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-basket-gap", "salla-add-product-button", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-options", "salla-progress-bar", "salla-quick-buy", "salla-skeleton", "salla-tel-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-basket-gap":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaBasketGap$1);
+            }
+            break;
+        case "salla-add-product-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "salla-count-down":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-order-options-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-product-availability":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-product-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-quick-buy":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-tel-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaBasketGap = SallaBasketGap$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaBasketGap, defineCustomElement };

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

@@ -2,13 +2,12 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as fetchProductCustomersAlsoBought } from './catalog-recommendations.js';
 import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
 const sallaBoughtTogetherCss = ":host{display:block}.s-bought-together-checkbox:checked~.s-bought-together-checkmark{background-color:var(--color-primary, #2ECC71);border-color:var(--color-primary, #2ECC71)}.s-bought-together-checkbox:checked~.s-bought-together-checkmark::after{content:\"\";display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}";
 
-// 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';
 const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBoughtTogether extends HTMLElement {
     constructor() {
         super();
@@ -46,25 +45,14 @@ const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBought
                 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) => {