@salla.sa/twilight-components 2.14.410 → 2.14.412

package/dist/components/salla-bought-together.d.ts

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

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

@@ -0,0 +1,174 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+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();
+        this.__registerHost();
+        /**
+         * Maximum number of recommendations to fetch. Max is 4.
+         */
+        this.limit = 3;
+        this.recommendations = [];
+        this.selectedIds = new Set();
+        this.isLoading = true;
+        this.canRender = true;
+        this.isAdding = false;
+        this.title = salla.lang.get('pages.products.bought_together_title');
+        this.subtitle = salla.lang.get('pages.products.bought_together_subtitle');
+        this.buyTogetherFor = salla.lang.get('pages.products.buy_together_for');
+        this.resolvedProductId = 0;
+        salla.lang.onLoaded(() => {
+            this.title = salla.lang.get('pages.products.bought_together_title');
+            this.subtitle = salla.lang.get('pages.products.bought_together_subtitle');
+            this.buyTogetherFor = salla.lang.get('pages.products.buy_together_for');
+        });
+    }
+    componentWillLoad() {
+        salla.onReady()
+            .then(() => {
+            if (!salla.config.get('store.settings.product.bought_together')) {
+                this.canRender = false;
+                return;
+            }
+            const id = salla.config.get('page.id');
+            if (!id) {
+                this.canRender = false;
+                return;
+            }
+            this.resolvedProductId = id;
+            return salla.api.request('https://api.salla.dev/1/indexes/*/recommendations', {
+                requests: [{
+                        indexName: 'products',
+                        model: 'xsell-v1',
+                        objectID: String(id),
+                        maxRecommendations: this.limit,
+                    }]
+            }, 'post', { headers: { 'X-Algolia-Api-Key': XSELL_API_KEY, 'X-Query-Enrichment': 'false', 'X-source': 'store' } });
+        })
+            .then((response) => {
+            if (!response)
+                return;
+            const hits = response?.results?.[0]?.hits ?? [];
+            if (!hits.length) {
+                this.canRender = false;
+                return;
+            }
+            const ids = [String(this.resolvedProductId), ...hits.map(h => h.objectID)];
+            return salla.product.fetch({ source: 'selected', source_value: ids });
+        })
+            .then((response) => {
+            if (!response)
+                return;
+            const products = response?.data ?? [];
+            if (!products.length) {
+                this.canRender = false;
+                return;
+            }
+            const mainProduct = products.find(p => String(p.id) === String(this.resolvedProductId));
+            const rest = products.filter(p => String(p.id) !== String(this.resolvedProductId));
+            if (!rest.length) {
+                this.canRender = false;
+                return;
+            }
+            this.recommendations = mainProduct ? [mainProduct, ...rest] : rest;
+            this.selectedIds = new Set(this.recommendations.map((p) => p.id));
+        })
+            .catch(() => {
+            this.canRender = false;
+        })
+            .finally(() => {
+            this.isLoading = false;
+        });
+    }
+    toggleProduct(id) {
+        const next = new Set(this.selectedIds);
+        next.has(id) ? next.delete(id) : next.add(id);
+        this.selectedIds = next;
+    }
+    get totalPrice() {
+        const total = this.recommendations
+            .filter(p => this.selectedIds.has(p.id))
+            // p.price is a plain float in the API response (e.g. 1150.58) — the TS type (any[]) is misleading.
+            .reduce((sum, p) => sum + (p.price ?? 0), 0);
+        return salla.money(total);
+    }
+    async addSelectedToCart() {
+        if (this.isAdding || !this.selectedIds.size)
+            return;
+        this.isAdding = true;
+        try {
+            // Intentional: quickAdd is used for all items including the main product without options — business decision by product team.
+            const results = await Promise.allSettled(Array.from(this.selectedIds).map(id => salla.cart.quickAdd(id)));
+            if (results.some(r => r.status === 'rejected')) {
+                salla.error(salla.lang.get('common.messages.error'));
+            }
+        }
+        finally {
+            this.isAdding = false;
+        }
+    }
+    getSkeletonView() {
+        return (h(Host, { class: "s-bought-together-entry" }, h("div", { class: "s-bought-together-skeleton" }, h("div", { class: "s-bought-together-skeleton-header" }, h("salla-skeleton", { height: "16px", width: "35%" }), h("salla-skeleton", { height: "10px", width: "60%" })), Array(4).fill(null).map((_, i) => (h("div", { key: i, class: "s-bought-together-skeleton-item" }, h("salla-skeleton", { height: "22px", width: "22px" }), h("salla-skeleton", { height: "48px", width: "48px" }), h("div", { class: "s-bought-together-skeleton-info" }, h("salla-skeleton", { height: "12px", width: "55%", style: { marginBottom: '3px' } }), h("salla-skeleton", { height: "10px", width: "25%" }))))), h("salla-skeleton", { height: "44px", width: "100%" }))));
+    }
+    render() {
+        if (!this.canRender)
+            return null;
+        if (this.isLoading)
+            return this.getSkeletonView();
+        if (!this.recommendations.length)
+            return null;
+        return (h(Host, { class: "s-bought-together-entry" }, h("div", { class: "s-bought-together-header" }, h("h3", { class: "s-bought-together-title" }, this.title), h("p", { class: "s-bought-together-subtitle" }, this.subtitle)), h("div", { class: "s-bought-together-list" }, this.recommendations.map((product) => (h("div", { key: product.id, class: `s-bought-together-item${!this.selectedIds.has(product.id) ? ' s-bought-together-item--unchecked' : ''}` }, h("label", { class: "s-bought-together-checkbox-label" }, h("input", { type: "checkbox", class: "s-bought-together-checkbox", checked: this.selectedIds.has(product.id), onChange: () => this.toggleProduct(product.id) }), h("span", { class: "s-bought-together-checkmark" })), h("a", { class: "s-bought-together-item-link", href: product.url }, h("img", { class: "s-bought-together-item-img", src: product.image?.url || salla.url.cdn('images/s-empty.png'), alt: product.image?.alt || product.name, loading: "lazy", decoding: "async", onError: e => {
+                e.currentTarget.onerror = null;
+                e.currentTarget.src = salla.url.cdn('images/s-empty.png');
+            } }), h("span", { class: "s-bought-together-item-name" }, product.name)), h("span", { class: "s-bought-together-item-price", innerHTML: salla.money(product.price) }))))), h("salla-button", { class: "s-bought-together-btn", disabled: !this.selectedIds.size || this.isAdding, loading: this.isAdding, onClick: () => this.addSelectedToCart() }, h("span", { innerHTML: `${this.buyTogetherFor} ${this.totalPrice}` }))));
+    }
+    static get style() { return sallaBoughtTogetherCss; }
+}, [0, "salla-bought-together", {
+        "limit": [2],
+        "recommendations": [32],
+        "selectedIds": [32],
+        "isLoading": [32],
+        "canRender": [32],
+        "isAdding": [32],
+        "title": [32],
+        "subtitle": [32],
+        "buyTogetherFor": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-bought-together", "salla-button", "salla-skeleton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-bought-together":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaBoughtTogether$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaBoughtTogether = SallaBoughtTogether$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaBoughtTogether, defineCustomElement };

package/dist/components/salla-bullet-delivery.js

@@ -1971,7 +1971,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         }
     }
     render() {
-        return (h(Host, { key: 'bb96dd168aab4c0a798dea4e8049a2a34bec9952', class: "s-bullet-delivery" }, h("salla-modal", { key: 'bdc1a4189566ae23c4113a65f2fd3e7d3d840851', ref: (modal) => {
+        return (h(Host, { key: '83c8404002c477d2eedc8103fde0a8645e81d9a8', class: "s-bullet-delivery" }, h("salla-modal", { key: '5ba5b3fb56422415654e5d48f9656a86abe02c10', ref: (modal) => {
                 this.modal = modal;
             }, isClosable: !this.isRequired && !this.shouldForceNonClosable(), class: "s-bullet-delivery-modal", isLoading: this.loading, width: "sm" }, this.loading ? (this.renderSkeleton()) : (h("div", { class: "s-bullet-delivery-inner" }, this.viewMode === "main" && this.renderMainView(), this.viewMode === "add-address" && this.renderAddAddressForm())))));
     }