npm - @salla.sa/twilight-components - Versions diffs - 2.14.470 → 2.14.472 - Mend

@salla.sa/twilight-components 2.14.470 → 2.14.472

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 (494) hide show

package/dist/collection/components/salla-order-options-modal/apple-pay-order-options.js ADDED Viewed

@@ -0,0 +1,84 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * Order-options helpers for the Apple Pay quick-buy flow — keeps <salla-quick-buy> to thin AP wiring.
+ * Apple Pay resolves options inside the session-started hook (single gesture), so the caller owns
+ * the ApplePaySession and drives it via callbacks.
+ */
+/** Get-or-create the singleton order-options modal on <body>. */
+function ensureOrderOptionsModal() {
+    let modal = document.querySelector('salla-order-options-modal');
+    if (!modal) {
+        modal = document.createElement('salla-order-options-modal');
+        document.body.appendChild(modal);
+    }
+    return modal;
+}
+/** Sync PDP-option validity (an `await` would consume the Apple Pay gesture). Skips hidden/disabled inputs. */
+export function reportProductOptionsValiditySync(productId) {
+    const optionsElement = document.querySelector(`salla-product-options[product-id="${productId}"]`);
+    if (!optionsElement)
+        return true;
+    const requiredInputs = optionsElement.querySelectorAll('[required]');
+    let pass = true;
+    requiredInputs.forEach((input) => {
+        if (input.disabled || input.closest('.hidden'))
+            return;
+        if ('reportValidity' in input && !input.reportValidity())
+            pass = false;
+    });
+    return pass;
+}
+/** Merge collected order-options into the quick-purchase payload (FormData or plain object). */
+export function appendOrderOptionsToPayload(data, orderOptions) {
+    if (!orderOptions.length)
+        return;
+    if (data && typeof data.append === 'function') {
+        orderOptions.forEach((entry, i) => {
+            data.append(`order_options[${i}][id]`, String(entry.id));
+            data.append(`order_options[${i}][value]`, String(entry.value));
+        });
+        return;
+    }
+    if (data && typeof data === 'object') {
+        data.order_options = orderOptions;
+    }
+}
+/**
+ * Fetch order options and, if any, collect them via the modal (apple-pay mode). Callbacks drive the
+ * caller's pre-created session: `beginPendingSession` (no options), `discardPendingSession` (options
+ * found — the modal's AP button starts a fresh one), `onSubmit` (submitted).
+ */
+export async function resolveApplePayOrderOptions(opts) {
+    let resp;
+    try {
+        resp = await salla.api.withoutNotifier(() => salla.product.api.getOrderOptions([{ id: opts.productId, quantity: opts.quantity }]));
+    }
+    catch (error) {
+        salla?.logger?.warn?.('order-options: fetch failed', error);
+        opts.beginPendingSession();
+        return;
+    }
+    const items = resp?.data?.order_options || [];
+    if (!items.length) {
+        opts.beginPendingSession(); // begin() doesn't need a fresh gesture
+        return;
+    }
+    opts.discardPendingSession(); // drop the unused session; the modal builds a fresh one
+    const basePrice = Number(opts.amount) > 0
+        ? Number(opts.amount)
+        : Number(resp?.data?.products?.[0]?.price?.amount) || 0;
+    const modal = ensureOrderOptionsModal();
+    try {
+        await modal.open({
+            orderOptions: items,
+            basePrice,
+            paymentMode: 'apple-pay',
+            onSubmit: opts.onSubmit,
+        });
+    }
+    catch {
+        // dismissed — no live session
+    }
+}

package/dist/collection/components/salla-order-options-modal/order-options-gate.js ADDED Viewed

@@ -0,0 +1,136 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * Order-options gate for the fast-checkout widget — keeps <salla-add-product-button> thin.
+ * Intercepts the widget click → runs the order-options modal → injects the result → re-fires the click.
+ */
+const PRODUCT_FORM_SELECTOR = 'form.product-form';
+export class OrderOptionsGate {
+    constructor(host, productId) {
+        this.host = host;
+        this.productId = productId;
+        /** True on the re-fired click so it passes through instead of re-gating. */
+        this.collected = false;
+        /** Live PDP price (one onPriceUpdated subscription per widget). */
+        this.livePrice = 0;
+    }
+    /** Attach once to the widget. Returns false when there's no widget (e.g. product cards) so the caller retries. */
+    static attach(host, productId) {
+        const widget = host.querySelector('salla-mini-checkout-widget');
+        if (!widget)
+            return false;
+        const gate = new OrderOptionsGate(host, String(productId));
+        // One subscription per widget (PDP only) — no per-card leak.
+        salla.product?.event?.onPriceUpdated?.((response) => {
+            gate.livePrice = Number(response?.data?.price) || gate.livePrice;
+        });
+        widget.addEventListener('click', (event) => gate.handleWidgetClick(event, widget), true);
+        return true;
+    }
+    /** Quantity from the same form the widget submits (PRODUCT_FORM_SELECTOR), not the button's nearest form. */
+    getSelectedQuantity() {
+        try {
+            const form = document.querySelector(PRODUCT_FORM_SELECTOR);
+            const data = form?.getElementSallaData?.();
+            const qty = Number(data instanceof FormData ? data.get('quantity') : data?.quantity);
+            if (Number.isFinite(qty) && qty > 0)
+                return qty;
+        }
+        catch {
+            // fall through to the attribute
+        }
+        return Number(this.host.getAttribute('quantity')) || 1;
+    }
+    async handleWidgetClick(event, widget) {
+        if (this.collected) {
+            this.collected = false;
+            return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (!await this.validatePdpOptions())
+            return;
+        if (salla.config.isGuest()) {
+            salla.api.auth.requireLoginThen('salla-add-product-button::oo.after-login', () => this.handleWidgetClick(event, widget));
+            return;
+        }
+        widget.classList.add('s-add-product-button-busy');
+        let resp;
+        try {
+            resp = await salla.api.withoutNotifier(() => salla.product.api.getOrderOptions([{ id: this.productId, quantity: this.getSelectedQuantity() }]));
+        }
+        catch (error) {
+            salla?.logger?.warn?.('order-options: fetch failed', error);
+            widget.classList.remove('s-add-product-button-busy');
+            this.resumeWidget(widget);
+            return;
+        }
+        widget.classList.remove('s-add-product-button-busy');
+        const items = resp?.data?.order_options || [];
+        if (!items.length) {
+            this.resumeWidget(widget);
+            return;
+        }
+        const basePrice = this.livePrice > 0
+            ? this.livePrice
+            : Number(resp?.data?.products?.[0]?.price?.amount) || 0;
+        const modal = this.ensureModal();
+        try {
+            const result = await modal.open({ orderOptions: items, basePrice });
+            this.injectIntoMini(result?.orderOptions || []);
+            this.resumeWidget(widget);
+        }
+        catch {
+            // user dismissed — widget stays blocked, they re-click to retry.
+        }
+    }
+    async validatePdpOptions() {
+        const optionsEl = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+        if (!optionsEl)
+            return true;
+        if (typeof optionsEl.validateAndScroll === 'function') {
+            return await optionsEl.validateAndScroll();
+        }
+        if (typeof optionsEl.reportValidity === 'function') {
+            return await optionsEl.reportValidity();
+        }
+        return true;
+    }
+    /** Inject order_options into the next cart-add payload via `cart::before.add.item` (one-shot, scoped to productId). */
+    injectIntoMini(orderOptions) {
+        if (!orderOptions.length)
+            return;
+        const productId = this.productId;
+        const onceHandler = (eventData) => {
+            if (String(eventData?.id) !== String(productId))
+                return;
+            try {
+                eventData?.payload?.set?.('order_options', orderOptions);
+            }
+            finally {
+                salla.event.off('cart::before.add.item', onceHandler);
+            }
+        };
+        salla.event.on('cart::before.add.item', onceHandler);
+    }
+    ensureModal() {
+        let modal = document.querySelector('salla-order-options-modal');
+        if (!modal) {
+            modal = document.createElement('salla-order-options-modal');
+            document.body.appendChild(modal);
+        }
+        return modal;
+    }
+    resumeWidget(widget) {
+        this.collected = true;
+        // Real click target lives in the widget's shadow DOM.
+        const innerBtn = widget.shadowRoot?.querySelector?.('.s-fast-checkout-button');
+        if (innerBtn) {
+            innerBtn.click();
+        }
+        else if (typeof widget.click === 'function') {
+            widget.click();
+        }
+    }
+}

package/dist/collection/components/salla-order-options-modal/salla-order-options-modal.css ADDED Viewed

@@ -0,0 +1,35 @@
+/*
+* Salla Order Options Modal: popup modal that collects cart-level order options
+* before the fast-checkout widget creates the cart via /mini.
+*/
+.s-order-options-modal-host .s-modal-header-inner,
+.s-order-options-modal-host .s-modal-header-content,
+.s-order-options-modal-host .s-modal-title {
+  text-align: start !important;
+}
+.s-order-options-modal-apple-pay {
+  display: block;
+  width: 100%;
+  --apple-pay-button-width: 100%;
+  --apple-pay-button-height: 44px;
+  --apple-pay-button-border-radius: 0.75rem;
+}
+.s-order-options-modal-apple-pay-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+.s-order-options-modal-apple-pay-total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.s-order-options-modal-apple-pay-label, .s-order-options-modal-apple-pay-amount {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  color: #111827;
+}

package/dist/collection/components/salla-order-options-modal/salla-order-options-modal.js ADDED Viewed

@@ -0,0 +1,282 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+/**
+ * Modal that collects merchant-configured order options before checkout.
+ *
+ * Usage:
+ *   const modal = document.querySelector('salla-order-options-modal');
+ *   const { orderOptions } = await modal.open({ orderOptions, basePrice });
+ *   // orderOptions = [{ id, value }, ...] — ready to send as `order_options`.
+ */
+export class SallaOrderOptionsModal {
+    constructor() {
+        this.resolveFn = null;
+        this.rejectFn = null;
+        this.optionsRefs = new Map();
+        this.changeHandler = null;
+        /** Sync hook for callers that need to act under the submit user gesture (Apple Pay). */
+        this.submitCallback = null;
+        this.orderOptions = [];
+        this.basePrice = 0;
+        this.liveTotal = 0;
+        this.isSubmitting = false;
+        /** Bumped each open() so the inner <salla-product-options> remounts. */
+        this.sessionId = 0;
+        this.paymentMode = 'default';
+        this.title = '';
+        this.subtitle = '';
+        this.submitLabel = '';
+        this.totalLabel = '';
+        this.requiredMessage = '';
+        this.handleClose = () => {
+            if (this.isSubmitting)
+                return;
+            this.rejectFn?.({ reason: 'dismissed' });
+            this.resolveFn = null;
+            this.rejectFn = null;
+            this.detachChangeListener();
+            this.reset();
+        };
+        salla.lang.onLoaded(() => this.loadTranslations());
+    }
+    componentWillLoad() {
+        this.loadTranslations();
+    }
+    loadTranslations() {
+        this.title = salla.lang.get('blocks.order_options.title');
+        this.subtitle = salla.lang.get('blocks.order_options.subtitle');
+        this.submitLabel = salla.lang.get('blocks.order_options.continue');
+        this.totalLabel = salla.lang.get('blocks.order_options.total');
+        this.requiredMessage = salla.lang.get('blocks.order_options.required_message');
+    }
+    /**
+     * Open the modal. Resolves with selections on submit; rejects on dismiss.
+     * `onSubmit` fires sync in the submit click (for Apple Pay user-gesture).
+     * `paymentMode: 'apple-pay'` swaps the footer button for <apple-pay-button>.
+     */
+    async open(payload) {
+        // Normalize here, not in the shared salla-product-options: text/number order options ship no
+        // `details`, which product-options dereferences unguarded.
+        this.orderOptions = (Array.isArray(payload.orderOptions) ? payload.orderOptions : [])
+            .map((o) => ({ ...o, details: o.details ?? [] }));
+        this.basePrice = Number(payload.basePrice) || 0;
+        this.liveTotal = this.basePrice + this.seedOptionsPrice(this.orderOptions);
+        this.isSubmitting = false;
+        this.sessionId++;
+        this.optionsRefs.clear();
+        this.submitCallback = payload.onSubmit ?? null;
+        this.paymentMode = payload.paymentMode ?? 'default';
+        await this.modal?.open();
+        this.attachChangeListener();
+        return new Promise((resolve, reject) => {
+            this.resolveFn = resolve;
+            this.rejectFn = reject;
+        });
+    }
+    async close() {
+        await this.modal?.close();
+    }
+    /** Sync walk of inputs — avoids `await` through the @Method that would consume the AP user gesture. */
+    collectOrderOptionsSync() {
+        const result = [];
+        for (const [, el] of this.optionsRefs) {
+            if (!el)
+                continue;
+            const inputs = el.querySelectorAll('[name^="options["],[name*="[options]["]');
+            inputs.forEach((input) => {
+                if (input instanceof HTMLInputElement && (input.type === 'radio' || input.type === 'checkbox') && !input.checked) {
+                    return;
+                }
+                const match = input.name.match(/(?:^|\[)options\]?\[(\d+)\]/);
+                if (!match)
+                    return;
+                const raw = input.value;
+                if (raw === '' || raw === null || raw === undefined)
+                    return;
+                const numeric = Number(raw);
+                result.push({
+                    id: Number(match[1]),
+                    value: Number.isFinite(numeric) && raw === String(numeric) ? numeric : raw,
+                });
+            });
+        }
+        return result;
+    }
+    /** Sync native validity — keeps the AP user gesture intact. */
+    validateSync() {
+        let pass = true;
+        for (const [, el] of this.optionsRefs) {
+            if (!el)
+                continue;
+            const requiredInputs = el.querySelectorAll('[required]');
+            requiredInputs.forEach((input) => {
+                // Mirror salla-product-options.reportValidity(): skip hidden/disabled inputs so a
+                // required field in a `.hidden` conditional container can't silently block submit.
+                if (input.disabled || input.closest('.hidden'))
+                    return;
+                if ('reportValidity' in input && !input.reportValidity())
+                    pass = false;
+            });
+        }
+        return pass;
+    }
+    /** Sum the additional_price of any pre-selected details. */
+    seedOptionsPrice(orderOptions) {
+        let sum = 0;
+        orderOptions.forEach((opt) => {
+            (opt.details || []).forEach((d) => {
+                if (d.is_selected)
+                    sum += Number(d.additional_price) || 0;
+            });
+        });
+        return sum;
+    }
+    /** salla.event.on is global — attach per open, detach on close to avoid stacking. */
+    attachChangeListener() {
+        this.detachChangeListener();
+        this.changeHandler = () => this.recomputeTotal();
+        salla.event.on('product-options::change', this.changeHandler);
+    }
+    detachChangeListener() {
+        if (!this.changeHandler)
+            return;
+        salla.event.off('product-options::change', this.changeHandler);
+        this.changeHandler = null;
+    }
+    async recomputeTotal() {
+        let selectedPrice = 0;
+        for (const [, el] of this.optionsRefs) {
+            if (!el)
+                continue;
+            const selected = typeof el.getSelectedOptions === 'function'
+                ? await el.getSelectedOptions()
+                : [];
+            (selected || []).forEach((s) => {
+                selectedPrice += Number(s.additional_price) || 0;
+            });
+        }
+        this.liveTotal = this.basePrice + selectedPrice;
+    }
+    handleSubmit() {
+        if (this.isSubmitting)
+            return;
+        if (!this.validateSync()) {
+            salla.notify?.error?.(this.requiredMessage);
+            return;
+        }
+        this.isSubmitting = true;
+        const orderOptions = this.collectOrderOptionsSync();
+        const total = Math.round(this.liveTotal * 100) / 100;
+        // Fire onSubmit BEFORE any await — Apple Pay needs the user gesture.
+        try {
+            this.submitCallback?.(orderOptions, total);
+        }
+        catch (err) {
+            salla?.logger?.warn?.('order-options modal onSubmit threw', err);
+        }
+        this.resolveFn?.({ orderOptions });
+        this.resolveFn = null;
+        this.rejectFn = null;
+        this.submitCallback = null;
+        this.detachChangeListener();
+        this.modal?.close().then(() => this.reset());
+        this.isSubmitting = false;
+    }
+    /** Clear options on close so the inner <salla-product-options> unmounts. */
+    reset() {
+        this.orderOptions = [];
+        this.optionsRefs.clear();
+        this.liveTotal = 0;
+    }
+    render() {
+        // salla.money returns HTML (sicon-sar icon) → render via innerHTML. Round
+        // first so floating-point sum doesn't show as 1174.3799999999999.
+        const totalHtml = salla.money(Math.round(this.liveTotal * 100) / 100);
+        return (h("salla-modal", { key: 'a7b7c31da2f5fd9f5f3ee601052f84e512368cee', ref: el => (this.modal = el), class: "s-order-options-modal-host", width: "md", "modal-title": this.title, onModalVisibilityChanged: (e) => {
+                if (!e.detail)
+                    this.handleClose();
+            } }, h("div", { key: '9a44c4dcec6f0e49a65217b1e1e2cd19ccc80c76', class: "s-order-options-modal-body" }, h("p", { key: '66c41a32e2130db4dc1aa402a31cfd6d519544b3', class: "s-order-options-modal-subtitle" }, this.subtitle), h("div", { key: 'fffe868427973b6426b8a2f8f33f48c017dfb7fb', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
+                if (!el)
+                    return;
+                this.optionsRefs.set('order-options', el);
+                // Without seeding, first multi-select toggle wipes pre-selected defaults.
+                el.seedSelectedOptions?.();
+            }, "product-id": `order-options-${this.orderOptions[0]?.id}`, "unique-key": "order-options", options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: '36f3a18380f05a8420d4bc32fa643bf596ac16fb', slot: "footer", class: "s-order-options-modal-footer" }, this.paymentMode === 'apple-pay' ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, this.submitLabel), h("span", { class: "s-order-options-modal-cta-total", innerHTML: totalHtml })))))));
+    }
+    static get is() { return "salla-order-options-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-order-options-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-order-options-modal.css"]
+        };
+    }
+    static get states() {
+        return {
+            "orderOptions": {},
+            "basePrice": {},
+            "liveTotal": {},
+            "isSubmitting": {},
+            "sessionId": {},
+            "paymentMode": {},
+            "title": {},
+            "subtitle": {},
+            "submitLabel": {},
+            "totalLabel": {},
+            "requiredMessage": {}
+        };
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "(payload: { orderOptions: any[]; basePrice?: number; paymentMode?: \"default\" | \"apple-pay\"; onSubmit?: (orderOptions: OrderOptionEntry[], total: number) => void; }) => Promise<{ orderOptions: OrderOptionEntry[]; }>",
+                    "parameters": [{
+                            "name": "payload",
+                            "type": "{ orderOptions: any[]; basePrice?: number; paymentMode?: \"default\" | \"apple-pay\"; onSubmit?: (orderOptions: OrderOptionEntry[], total: number) => void; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "OrderOptionEntry": {
+                            "location": "local",
+                            "path": "/home/runner/_work/twilight/twilight/packages/twilight-components/src/components/salla-order-options-modal/salla-order-options-modal.tsx",
+                            "id": "src/components/salla-order-options-modal/salla-order-options-modal.tsx::OrderOptionEntry"
+                        }
+                    },
+                    "return": "Promise<{ orderOptions: OrderOptionEntry[]; }>"
+                },
+                "docs": {
+                    "text": "Open the modal. Resolves with selections on submit; rejects on dismiss.\n`onSubmit` fires sync in the submit click (for Apple Pay user-gesture).\n`paymentMode: 'apple-pay'` swaps the footer button for <apple-pay-button>.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/salla-order-summary/salla-order-summary.js CHANGED Viewed

@@ -62,7 +62,7 @@ export class SallaOrderSummary {
         this.copyCodeButtonTimeout && clearTimeout(this.copyCodeButtonTimeout);
     }
     render() {
-        return (h("ul", { key: 'e26e13231b72707a39a6fd83561247bea05aa490', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
+        return (h("ul", { key: 'c95c9ab867fda65d1db9e61addec2e5f8e5135a6', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
             this.order_items.map((item) => (this.isDigitalCard(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.codes_text, " (", item.name, ")"), item.codes.map((code) => (h("div", { key: code.code, class: "s-order-summary-code-item-wrapper" }, h("p", null, h("span", { innerHTML: iconCreditCard }), h("span", null, code.code)), h("salla-button", { class: `s-order-summary-item-copy-button ${this.codeCopied === code.code ? 'copied' : ''}`, onClick: () => this.copyToClipboardHandler(code.code), shape: "link" }, h("span", { innerHTML: this.codeCopied === code.code ? iconCheck : iconCopy }), h("span", null, this.copy_text))))))) :
                 this.isDigitalProduct(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.files_text, " (", item.name, ")"), h("ul", null, item.files.map((file) => (h("li", { class: "s-order-summary-digital-item-wrapper" }, h("div", null, h("span", { innerHTML: iconFileArchive }), h("span", null, file.name)), h("a", { href: file.url, target: "_blank", class: "s-order-summary-item-download" }, h("span", { innerHTML: iconDownload }), h("span", null, this.download_text)))))))) : null))));
     }

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

@@ -35,12 +35,12 @@ export class SallaPayments {
     render() {
         const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
         const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
-        return (h(Host, { key: '2d3a652f9eb7fc3a07d79be1aa4ac08df349e4bc', class: "s-payments-list-wrap" }, h("ul", { key: '62ed1989e85b2b89bd1f1ad370806dc1c8f67454', class: "s-payments-list" }, madeInKSA && h("li", { key: 'a77bdb50ba28249d0b587e3aba0beb392cb1db59', class: "s-payments-list-item" }, h("img", { key: '3aa60ab4ee98cf8efe3e3a17f2c2363038b76b24', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
+        return (h(Host, { key: 'dcf34aa7bf20914e9413c39c5429b66067a29ec5', class: "s-payments-list-wrap" }, h("ul", { key: '523fef26ce20eedcdbf2701f64f0be3ee04dc62a', class: "s-payments-list" }, madeInKSA && h("li", { key: 'feb443128cf1820f22b076acd10681e5a3b401c8', class: "s-payments-list-item" }, h("img", { key: 'c82b844706cd47ee4633ea896352611defe21685', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
             h("div", { id: "cod-slot", innerHTML: this.codSlot
                     .replace(/\{image\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58)) }) :
             h("div", { id: "payment-slot", innerHTML: this.paymentSlot
                     .replace(/\{image\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))
-                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: 'c1d56e4217afdb48f955a5133156a1708c91da52', id: "sbc-slot", innerHTML: this.sbcSlot
+                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: 'c439bed0cf4cf57c206a44008b4daaaa28559e2f', id: "sbc-slot", innerHTML: this.sbcSlot
                 .replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
                 .replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
     }

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

@@ -35,7 +35,7 @@ export class SallaPlaceholder {
         };
     }
     render() {
-        return (h(Host, { key: 'ccc65b60efc14d78b46b838f089cf09ed849d136', class: this.alignmentClass() }, h("div", { key: 'b174990bfedc2e979ca0484552015abc112795d1', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '51ec34810a25ae77f797754419c6dc5f0afcfbaa', class: "s-placeholder-title" }, h("slot", { key: '3e0c9987b7477e8145436098f024dde49bd76162', name: 'title' }, h("span", { key: '618dfc6b328f2f5c82a16357ecf403b740e67778' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '005e68bcb52eca86ea3368ce750e1b7f9cfda50e', class: "s-placeholder-description" }, h("slot", { key: '5e2b860c11a35e93658c153ea2eb2efb9683900b', name: 'description' }, h("span", { key: '903012cd214bb068e591ca9280f4c95762672e9c' }, salla.lang.get('common.errors.empty_results'))))));
+        return (h(Host, { key: 'f2fb77ca80d28fcc5f5505f4588bef72a4a26690', class: this.alignmentClass() }, h("div", { key: 'b2a1b41baf2a78087fd1f41f2f7244a36eb20846', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '65d106c0700890b7033ffb17ad7497db11cbdc65', class: "s-placeholder-title" }, h("slot", { key: 'aaa421d74b1c1c7e506adaee5efd6e7e1fe367e9', name: 'title' }, h("span", { key: '5e8232ebceffa33a1a997faf302e66f7f7d6112d' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '47f7267ff9aef10baff8a5d555cd116c569790c9', class: "s-placeholder-description" }, h("slot", { key: '8f54838b8258e2f2a42a0da120186a9a7b71503f', name: 'description' }, h("span", { key: '6a5b79c1a69449ea4cd20d96f6149dfe89425ec3' }, salla.lang.get('common.errors.empty_results'))))));
     }
     static get is() { return "salla-placeholder"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-price-range/salla-price-range.js CHANGED Viewed

@@ -146,9 +146,9 @@ export class SallaPriceRange {
         this.maxPrice = value === undefined ? '' : value;
     }
     render() {
-        return (h(Host, { key: 'ab96e0b292966af5dea7627ed2cfae7aa6cf42d2' }, this.filterValues.map((filterValue, index) => {
+        return (h(Host, { key: 'ecc44cf63ea7788f00aa33a19c06579c887c59dd' }, this.filterValues.map((filterValue, index) => {
             return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}`, key: index }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), h("span", { innerHTML: this.getPriceLabel(filterValue) }));
-        }), h("div", { key: '5d958a76e7878542fd8090229570ed9baf9ca2ea', class: "flex justify-center items-center" }, h("div", { key: '1c500632705c5006b901a809368ce85a16709afb', class: "relative max-w-xl w-full" }, h("div", { key: 'd29b5185bf50c5582920b54716005e8756de05bd', class: "s-price-range-inputs" }, h("div", { key: 'bd41a6602d5f3f434ba7d7ee4b8c92900d27c6b9', class: "s-price-range-relative" }, h("div", { key: 'd61027acbb26d6754d4406aa07c11101fd8c4005', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'b368eabded71a6631943b5cd12624418df07afe8', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '0b7b3750d740e929fe0c3f120185d153cb9f6a8e', class: "s-price-range-gray-text" }, " -"), h("div", { key: '148ebe3d2b5a52d013ab9ca6aef02342c5acb3fa', class: "s-price-range-relative" }, h("div", { key: '205c13dd92d5784fc2b1551b56a0ec5e329e0854', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'a4b8886ae87387e891f286931b58a3340920a0e0', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '221241ca34ed2e7aec47b57b609718e68ccd5060', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: 'b277d7c12f44eba76b967055e79a12ed7e492e4d', innerHTML: this.isRTL ? arrowLeft : arrowRight })))))));
+        }), h("div", { key: 'c4b6d75b11a2625f429caf6bba9e0dd625f6f646', class: "flex justify-center items-center" }, h("div", { key: '4e85f9c05415daf235ab965ebe185c7171f08e06', class: "relative max-w-xl w-full" }, h("div", { key: '44b7747bfa4ec0e46da70dcf25f5325562bb0be9', class: "s-price-range-inputs" }, h("div", { key: '08a9afa0ea579f31eba87561283162b1d47f123f', class: "s-price-range-relative" }, h("div", { key: '54540065c16484f01e356fb2094f3163357ffd95', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '851b957d076c25808edba4e763ae31286047782f', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: 'f8a910aca554ae21657a19115d7f9607efb0566d', class: "s-price-range-gray-text" }, " -"), h("div", { key: '7d1561634459c15862bc0455b4bd9248d44a8446', class: "s-price-range-relative" }, h("div", { key: '7ca1fb8056b8af71f6f57524ed9d5fdfdc641ef2', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'e6411b0e1b0e36b45a6879c1b257f394ec94007f', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '63bc422c8d82c820bd984d5af68f8081add164c3', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: 'b81d3813cb2ff9523f232cf0a615c58576b14177', innerHTML: this.isRTL ? arrowLeft : arrowRight })))))));
     }
     componentDidLoad() {
         this.isReady = true;

package/dist/collection/components/salla-product-availability/salla-product-availability.js CHANGED Viewed

@@ -137,7 +137,7 @@ export class SallaProductAvailability {
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: '144b0687a0e527fa493aa701c334db76a7b42164', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
+        return (h(Host, { key: '0779c3aef2637bfcd30ecf110d0cd31d819a82a5', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
             ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
             :
                 h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribedToProduct ? '' : this.renderModal()));

package/dist/collection/components/salla-product-card/salla-product-card.js CHANGED Viewed

@@ -105,14 +105,14 @@ export class SallaProductCard {
             's-product-card-out-of-stock': this.productData?.is_out_of_stock,
         };
         const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
-        return (h(Host, { key: '789fbb35499a12f08dab69a6be3559eebea03381', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '9cb05484a39b108348e3b2070d63c503681ef417', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '1805be53cb3a3cf1068752121b846178d6b9340f', ...hrefProp }, h("img", { key: 'bf9183ed961e8fe5207548ce1e8146064b69675d', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+        return (h(Host, { key: '0f4b4f64ee342da10905dee73db8a2b4bebdfc9e', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: 'ed5cfb208c6241ca6ccd2c8f2205f76d1f81ca2a', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '865376db3deadd97c23480e9226a50abe9371284', ...hrefProp }, h("img", { key: 'ad314a97956853e26b3a3c4ecb9f1d427bf748fb', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                 ? 'contain'
                 : this.fitImageHeight
                     ? this.fitImageHeight
-                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: '567e6766ff7516ff409d9f86dc3cba7a51508d57', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'b36b0e6bdb8af5b1cf38d416b9f64038fa1f17ae', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'eef3edab8f4cc75c385928dcdbd9d29c318b68cc', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: '208f74738cd81bb68ec63f4fdadedbd9b19e6dad', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
-            : '', h("div", { key: '93258adb3ca7ff5d3a89a118c7642b8b1264e045', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'fdf1c66e6533f3b092ad66e66875cbb2e213e6ad', class: "s-product-card-content-title" }, h("a", { key: 'cd3476f564e8ed4050b909c33926a5d44bf8fb5a', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
+            : '', h("div", { key: '6b00056661ebe29db89377f858bfefda80ed365f', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'a1a7a2d363a009c3254df7728e80f958be76a012', class: "s-product-card-content-title" }, h("a", { key: 'c3c8a4b862cf6a0b78bafb6f30bd5a04d437257d', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
             : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
             [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
@@ -121,7 +121,7 @@ export class SallaProductCard {
                                 this.addBtn.donatingAmount = e.target.value;
                             }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                     : '')]
-            : '', h("div", { key: 'b32c488819742ae8dd56147f4285424d381a3df4', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
+            : '', h("div", { key: '2ab7701aac64f90667627f0a0b3bfc031e30d835', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
             h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Star }), h("span", null, this.productData.rating.stars))
             : ''), this.isSpecial && this.productData.discount_ends
             ? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })