@salla.sa/twilight-components 2.14.389 → 2.14.391

package/dist/components/salla-count-down2.js

@@ -4,7 +4,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './salla-button2.js';
 
-const sallaCountDownCss = "";
+const sallaCountDownCss = ".s-count-down-horizontal{background-color:rgba(0, 0, 0, 0.06);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}";
 
 const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown extends HTMLElement {
     constructor() {
@@ -22,6 +22,11 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
          * The digits lang to show in the count down
          * */
         this.digits = 'auto';
+        /**
+         * If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0.
+         * Matches salla-timer behaviour. Off by default for backward compatibility.
+         * */
+        this.autoSegments = false;
         this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
         this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
         this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
@@ -29,6 +34,8 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
         this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
         this.offerEnded = false;
+        this.showDays = true;
+        this.showHours = true;
         this.days = this.number(0);
         this.hours = this.number(0);
         this.minutes = this.number(0);
@@ -89,25 +96,48 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         return salla.helpers.number(digit, this.digits === 'en');
     }
     startCountDown() {
-        let countDownDate = new Date(this.date.replace(/-/g, '/'));
-        if (this.endOfDay || this.date.split(' ').length === 1) {
-            countDownDate.setHours(23, 59, 59, 999);
+        const isIsoFormat = this.date.includes('-');
+        const isDateOnly = this.endOfDay || this.date.split(' ').length === 1;
+        let countDownTime;
+        if (isIsoFormat) {
+            // Backend KSA date — parse as UTC+3 explicitly
+            const dateStr = isDateOnly
+                ? `${this.date.split(' ')[0]}T23:59:59+03:00`
+                : `${this.date.replace(' ', 'T')}+03:00`;
+            countDownTime = new Date(dateStr).getTime();
+        }
+        else {
+            // "MMM DD, YYYY HH:mm:ss" format — preserve existing behaviour
+            const countDownDate = new Date(this.date);
+            if (isDateOnly) {
+                countDownDate.setHours(23, 59, 59, 999);
+            }
+            countDownTime = countDownDate.getTime();
         }
-        let countDownTime = countDownDate.getTime();
-        this.countInterval = setInterval(() => {
-            let now = new Date().getTime();
-            let distance = countDownTime - now;
-            this.days = this.number(Math.floor(distance / (1000 * 60 * 60 * 24)));
-            this.hours = this.number(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
+        const tick = () => {
+            const distance = countDownTime - Date.now();
+            const dRaw = Math.floor(distance / (1000 * 60 * 60 * 24));
+            const hRaw = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            this.days = this.number(dRaw);
+            this.hours = this.number(hRaw);
             this.minutes = this.number(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
             this.seconds = this.number(Math.floor((distance % (1000 * 60)) / 1000));
+            if (this.autoSegments) {
+                this.showDays = dRaw > 0;
+                this.showHours = dRaw > 0 || hRaw > 0;
+            }
             if (distance < 0) {
                 this.endCountDown();
             }
-        }, 1000);
+        };
+        this.countInterval = setInterval(tick, 1000);
+        tick();
     }
     renderCountDown() {
-        return (h("ul", { class: `s-count-down-list ${this.boxed ? 's-count-down-boxed' : ''} ${this.offerEnded ? 's-count-down-ended' : ''} s-count-down-${this.size} s-count-down-${this.color}` }, h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.seconds), this.labeled && h("div", { class: "s-count-down-item-label" }, this.secondsLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.minutes), this.labeled && h("div", { class: "s-count-down-item-label" }, this.minutesLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.hours), this.labeled && h("div", { class: "s-count-down-item-label" }, this.hoursLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.days), this.labeled && h("div", { class: "s-count-down-item-label" }, this.daysLabel))));
+        const listStyle = this.listPadding ? { paddingLeft: this.listPadding, paddingRight: this.listPadding } : undefined;
+        const resolvedBoxColor = this.boxTheme ? `var(--color-${this.boxTheme})` : this.boxColor;
+        const boxStyle = this.boxed && resolvedBoxColor ? { backgroundColor: resolvedBoxColor } : undefined;
+        return (h("ul", { class: `s-count-down-list ${this.boxed ? 's-count-down-boxed' : ''} ${this.offerEnded ? 's-count-down-ended' : ''} s-count-down-${this.size} s-count-down-${this.color}`, style: listStyle }, h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.seconds), this.labeled && h("div", { class: "s-count-down-item-label" }, this.secondsLabel)), h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.minutes), this.labeled && h("div", { class: "s-count-down-item-label" }, this.minutesLabel)), (!this.autoSegments || this.showHours) && (h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.hours), this.labeled && h("div", { class: "s-count-down-item-label" }, this.hoursLabel))), (!this.autoSegments || this.showDays) && (h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.days), this.labeled && h("div", { class: "s-count-down-item-label" }, this.daysLabel)))));
     }
     renderInvalidDate() {
         return h("div", { class: "s-count-down-text-center" }, this.invalidDate);
@@ -158,7 +188,7 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: '0cfdbb009d256be108123cabf3cb4311866bdc17', 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.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+        return (h(Host, { key: '72c0f5f822ea852674814ced58f323e8b99075c0', 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 style() { return sallaCountDownCss; }
 }, [0, "salla-count-down", {
@@ -175,8 +205,12 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         "color": [1],
         "labeled": [4],
         "endText": [1, "end-text"],
+        "boxColor": [1, "box-color"],
+        "boxTheme": [1, "box-theme"],
+        "listPadding": [1, "list-padding"],
         "digits": [1],
         "endOfDay": [4, "end-of-day"],
+        "autoSegments": [4, "auto-segments"],
         "daysLabel": [32],
         "hoursLabel": [32],
         "minutesLabel": [32],
@@ -189,6 +223,8 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         "hours": [32],
         "minutes": [32],
         "seconds": [32],
+        "showDays": [32],
+        "showHours": [32],
         "endCountDown": [64]
     }]);
 function defineCustomElement() {

package/dist/components/salla-delivery-promise.d.ts

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

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

@@ -0,0 +1,266 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './salla-skeleton2.js';
+
+const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliveryPromise extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.cities = [];
+        this.filteredCities = [];
+        this.selectedCity = null;
+        this.deliveryMessage = null;
+        this.isLoadingCities = false;
+        this.isLoadingPromises = false;
+        this.isDropdownOpen = false;
+        this.searchQuery = '';
+        this.hasError = false;
+        this.errorMessage = '';
+        /** i18n labels for city selector only; message comes from BE */
+        this.labels = {
+            deliveryTo: 'توصيل إلى',
+            pickupFromBranch: 'الاستلام من فرع',
+            searchPlaceholder: 'بحث...',
+            noResults: 'لا توجد نتائج',
+            selectCity: 'اختر المدينة',
+        };
+        this.canRender = false;
+        this.requiresShipping = false;
+        /** Used only for API calls, not rendered — no need for @State */
+        this.productId = undefined;
+        this.onClickOutside = (e) => {
+            if (this.host.contains(e.target)) {
+                return; // click inside component (e.g. search input, city list) — don't close
+            }
+            this.isDropdownOpen = false;
+            window.removeEventListener('click', this.onClickOutside);
+        };
+    }
+    setLabels() {
+        this.labels = {
+            deliveryTo: salla.lang.getWithDefault('pages.products.promise_deliver_to', 'توصيل إلى'),
+            pickupFromBranch: salla.lang.getWithDefault('pages.products.promise_pickup_from_branch', 'الاستلام من فرع'),
+            searchPlaceholder: salla.lang.getWithDefault('blocks.header.search_placeholder', 'بحث...'),
+            noResults: salla.lang.getWithDefault('common.elements.no_options', 'لا توجد نتائج'),
+            selectCity: salla.lang.getWithDefault('common.elements.select_city', 'اختر المدينة'),
+        };
+    }
+    logger(message, data) {
+        if (localStorage.getItem('salla-delivery-promise-debug')) {
+            if (data) {
+                console.log(message, data);
+            }
+            else {
+                console.log(message);
+            }
+        }
+    }
+    async componentDidLoad() {
+        await salla.onReady();
+        await salla.lang.onLoaded();
+        this.setLabels();
+        this.requiresShipping = salla.url.is_page('product.single') &&
+            salla.config.get('store.features', []).includes('delivery-promises');
+        if (this.requiresShipping) {
+            this.logger('requiresShipping', this.requiresShipping);
+            this.productId = salla.config.get('page.id');
+            this.logger('productId', this.productId);
+        }
+        else {
+            this.canRender = false;
+            this.logger('not requiresShipping', {
+                is_product_single: salla.url.is_page('product.single'),
+                includesDeliveryPromises: salla.config.get('store.features', []).includes('delivery-promises')
+            });
+            return;
+        }
+        await this.fetchCities();
+    }
+    async fetchCities() {
+        this.logger('start startfetchCities');
+        this.isLoadingCities = true;
+        this.hasError = false;
+        try {
+            const response = await salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises/cities`));
+            if (response.success && Array.isArray(response.data) && response.data.length > 0) {
+                this.logger('fetchCities success', { cities: response.data });
+                // Sort cities: explicit cities first (id !== -1), then "Rest of cities" (id === -1)
+                this.cities = this.sortCities(response.data);
+                this.filteredCities = [...this.cities];
+                // First, check if API returns a selected city (is_selected: true)
+                let cityToSelect = this.cities.find(c => c.is_selected);
+                if (!cityToSelect) {
+                    this.logger('no selectedCity from API response');
+                }
+                else {
+                    this.logger('selectedCity', cityToSelect);
+                    this.selectedCity = cityToSelect;
+                    await this.fetchDeliveryMessage(cityToSelect.id);
+                }
+                this.canRender = true;
+            }
+            else {
+                this.logger('no data returned from fetchCities', { response: response });
+                this.canRender = false;
+            }
+        }
+        catch (error) {
+            this.logger('fetchCities error', { error: error.message });
+            this.hasError = true;
+            this.errorMessage = error.message || 'Failed to load cities';
+            this.canRender = false;
+        }
+        finally {
+            this.isLoadingCities = false;
+        }
+    }
+    async fetchDeliveryMessage(cityId) {
+        this.logger('start fetchDeliveryMessage', { cityId });
+        this.isLoadingPromises = true;
+        this.hasError = false;
+        this.deliveryMessage = null;
+        try {
+            const response = await salla.api.withoutNotifier(() => salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises?city_id=${cityId}`)));
+            if (response.success && response.data?.message) {
+                const message = response.data.message.trim();
+                this.logger('fetchDeliveryMessage success', { message });
+                this.deliveryMessage = message || null;
+            }
+            else {
+                this.logger('deliveryMessage not valid', { response });
+            }
+        }
+        catch (error) {
+            this.logger('fetchDeliveryMessage error', { error: error.message });
+            this.hasError = true;
+            this.errorMessage = error.message || 'Failed to load delivery message';
+        }
+        finally {
+            this.isLoadingPromises = false;
+        }
+    }
+    toggleDropdown(e) {
+        e?.stopPropagation();
+        this.isDropdownOpen = !this.isDropdownOpen;
+        if (this.isDropdownOpen) {
+            window.addEventListener('click', this.onClickOutside);
+            if (this.searchInputRef) {
+                setTimeout(() => this.searchInputRef.focus(), 100);
+            }
+        }
+        else {
+            window.removeEventListener('click', this.onClickOutside);
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener('click', this.onClickOutside);
+    }
+    /**
+     * Sort cities: explicit cities first (id !== -1), then "Rest of cities" (id === -1) at the end
+     */
+    sortCities(cities) {
+        return [...cities].sort((a, b) => {
+            // "Rest of cities" (id === -1) should always be at the end
+            if (a.id === -1)
+                return 1;
+            if (b.id === -1)
+                return -1;
+            return 0;
+        });
+    }
+    handleSearch(event) {
+        const query = event.target.value.toLowerCase();
+        this.searchQuery = query;
+        if (query.length > 0) {
+            this.filteredCities = this.cities.filter(city => city.name.toLowerCase()?.includes(query) ||
+                (city.name_en || '').toLowerCase()?.includes(query));
+        }
+        else {
+            this.filteredCities = [...this.cities];
+        }
+    }
+    async selectCity(city) {
+        this.logger('selectCity', { city: city });
+        this.selectedCity = city;
+        this.isDropdownOpen = false;
+        window.removeEventListener('click', this.onClickOutside);
+        this.searchQuery = '';
+        this.filteredCities = [...this.cities];
+        await this.fetchDeliveryMessage(city.id);
+    }
+    renderDropdown() {
+        return (h("div", { class: "s-delivery-promise-dropdown" }, h("div", { class: "s-delivery-promise-dropdown-search" }, h("i", { class: "sicon-search" }), h("input", { type: "text", placeholder: this.labels.searchPlaceholder, value: this.searchQuery, onInput: (e) => this.handleSearch(e), ref: el => this.searchInputRef = el })), h("div", { class: "s-delivery-promise-dropdown-list" }, this.filteredCities.length === 0 ? (h("div", { class: "s-delivery-promise-dropdown-empty" }, this.labels.noResults)) : (this.filteredCities.map(city => (h("div", { key: city.id, class: `s-delivery-promise-dropdown-item ${this.selectedCity?.id === city.id ? 'selected' : ''}`, onClick: () => this.selectCity(city) }, h("span", { class: "s-delivery-promise-city-name" }, city.name), this.selectedCity?.id === city.id && (h("i", { class: "sicon-check" })))))))));
+    }
+    /**
+     * Skeleton shown during initial city fetch to avoid blank period and layout shift.
+     * Matches the structure/size of the real content (header + message area).
+     */
+    renderInitialLoadingSkeleton() {
+        return (h(Host, { class: "s-delivery-promise-wrapper s-delivery-promise-skeleton" }, h("div", { class: "s-delivery-promise-container" }, h("div", { class: "s-delivery-promise-header s-delivery-promise-header-skeleton" }, h("div", { class: "s-delivery-promise-location" }, h("salla-skeleton", { height: "14px", width: "180px" })), h("salla-skeleton", { height: "18px", width: "18px" })), h("div", { class: "s-delivery-promise-loading" }, h("salla-skeleton", { height: "20px", width: "80%" })))));
+    }
+    renderDeliveryMessage() {
+        if (this.isLoadingPromises) {
+            return (h("div", { class: "s-delivery-promise-loading" }, h("salla-skeleton", { height: "20px", width: "80%" })));
+        }
+        if (!this.deliveryMessage) {
+            return null;
+        }
+        return (h("div", { class: "s-delivery-promise-message" }, this.deliveryMessage));
+    }
+    render() {
+        // Not on product page or delivery-promises disabled — hide entirely
+        if (!this.requiresShipping) {
+            return null;
+        }
+        // Initial city fetch: show skeleton to avoid blank period and layout shift
+        if (this.isLoadingCities) {
+            return this.renderInitialLoadingSkeleton();
+        }
+        // Fetch done but no cities / error — hide
+        if (!this.canRender || this.cities.length === 0) {
+            return null;
+        }
+        return (h(Host, { class: "s-delivery-promise-wrapper" }, h("div", { class: "s-delivery-promise-container" }, h("div", { class: "s-delivery-promise-header", onClick: (e) => this.toggleDropdown(e) }, h("div", { class: "s-delivery-promise-location" }, h("span", { class: "s-delivery-promise-title" }, this.labels.deliveryTo, " ", this.selectedCity?.name || this.labels.selectCity)), h("i", { class: `sicon-keyboard_arrow_down s-delivery-promise-arrow ${this.isDropdownOpen ? 'open' : ''}` })), this.hasError && (h("div", { class: "s-delivery-promise-error" }, this.errorMessage)), this.isDropdownOpen && this.renderDropdown(), !this.hasError && this.renderDeliveryMessage())));
+    }
+    get host() { return this; }
+}, [0, "salla-delivery-promise", {
+        "cities": [32],
+        "filteredCities": [32],
+        "selectedCity": [32],
+        "deliveryMessage": [32],
+        "isLoadingCities": [32],
+        "isLoadingPromises": [32],
+        "isDropdownOpen": [32],
+        "searchQuery": [32],
+        "hasError": [32],
+        "errorMessage": [32],
+        "labels": [32],
+        "canRender": [32],
+        "requiresShipping": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-delivery-promise", "salla-skeleton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-delivery-promise":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaDeliveryPromise$1);
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaDeliveryPromise = SallaDeliveryPromise$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaDeliveryPromise, defineCustomElement };

package/dist/components/salla-fulfillment-methods.d.ts

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

package/dist/components/salla-fulfillment-methods.js

@@ -0,0 +1,64 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const SallaFulfillmentMethods$1 = /*@__PURE__*/ proxyCustomElement(class SallaFulfillmentMethods extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.methods = [];
+        this.shouldRender = false;
+    }
+    async componentDidLoad() {
+        await Salla.onReady();
+        await Salla.lang.onLoaded();
+        if (!Salla.config.get('store.support_pickup'))
+            return;
+        this.shouldRender = true;
+        this.setLabels();
+    }
+    setLabels() {
+        this.methods = [
+            {
+                id: 'delivery',
+                title: Salla.lang.getWithDefault('pages.products.promise_delivery_title', 'متاح للتوصيل'),
+                subtitle: Salla.lang.getWithDefault('pages.products.promise_delivery_subtitle', 'طلبك يوصلك لباب البيت بسهولة.'),
+                iconClass: 'sicon-location',
+            },
+            {
+                id: 'pickup',
+                title: Salla.lang.getWithDefault('pages.products.promise_pickup_title', 'متاح للاستلام'),
+                subtitle: Salla.lang.getWithDefault('pages.products.promise_pickup_subtitle', 'استلام فوري من أقرب فرع.'),
+                iconClass: 'sicon-store',
+            },
+        ];
+    }
+    render() {
+        if (!this.shouldRender)
+            return null;
+        return (h(Host, { class: "s-fulfillment-methods" }, h("div", { class: "s-fulfillment-methods-list" }, this.methods.map((method) => (h("div", { key: method.id, class: "s-fulfillment-methods-card" }, h("div", { class: "s-fulfillment-methods-content" }, h("div", { class: "s-fulfillment-methods-icon-wrap" }, h("i", { class: `${method.iconClass} s-fulfillment-methods-icon` })), h("div", { class: "s-fulfillment-methods-text" }, h("span", { class: "s-fulfillment-methods-title" }, method.title), h("span", { class: "s-fulfillment-methods-subtitle" }, method.subtitle)))))))));
+    }
+}, [0, "salla-fulfillment-methods", {
+        "methods": [32],
+        "shouldRender": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-fulfillment-methods"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-fulfillment-methods":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaFulfillmentMethods$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaFulfillmentMethods = SallaFulfillmentMethods$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaFulfillmentMethods, defineCustomElement };