@salla.sa/twilight-components 2.14.353 → 2.14.354

package/dist/esm/salla-list-tile.entry.js

@@ -0,0 +1,32 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+
+const sallaListTileCss = "";
+
+const SallaListTile = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Designates the component as anchor and applies the `href` attribute.
+         */
+        this.href = undefined;
+        /**
+         * Designates the target attribute. This should only be applied when using the `href` prop.
+         */
+        this.target = "_self";
+    }
+    generateClass() {
+        return {
+            "s-list-tile-item": true,
+            "s-list-tile-item-href": !!this.href
+        };
+    }
+    render() {
+        return (h(Host, { key: '1e84d5e259adbf61502fbe1ee771ce948c87f218' }, h("a", { key: '5e28c64a0f1c62e6749a32859180e705f99af27e', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: 'ace3fdaae7332c4c23ab411f0b97cb0699c26ec2', class: "s-list-tile-item-icon" }, h("slot", { key: 'f8790cd45f2004691b156ef96d12a0f003d99899', name: 'icon' })), h("div", { key: 'a788d022e2afe3cd383c321f4100dafbae84f844', class: "s-list-tile-item-content" }, h("div", { key: 'a07afce13d054e11236ffb282901de9db3d23923', class: "s-list-tile-item-title" }, h("slot", { key: '43c23495cfb026ddba8739dcc1a619ec25fe98e0', name: 'title' })), h("div", { key: 'db5e2767a4220ee5d658b3b9384c28d0e105febb', class: "s-list-tile-item-subtitle" }, h("slot", { key: '245f602055419b1f32fa943805a72c6a207eea3f', name: "subtitle" }))), h("div", { key: '394a2d1402d3e8346cbc1ebd8d410405ed568c77', class: "s-list-tile-item-action" }, h("slot", { key: '6086eb6b1f9894f5a3a77ca484c74dd06f0d468f', name: 'action' })))));
+    }
+};
+SallaListTile.style = sallaListTileCss;
+
+export { SallaListTile as salla_list_tile };

package/dist/esm/salla-localization-modal.entry.js

@@ -0,0 +1,135 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+
+const SallaLocalizationModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.translationLoaded = false;
+        this.languages = [];
+        this.currencies = [];
+        this.hasError = false;
+        /**
+         * Current language (existing or newly selected)
+         */
+        this.language = salla.config.get('user.language_code');
+        /**
+         * Current currency (existing or newly selected)
+         */
+        this.currency = salla.config.get('user.currency_code');
+        salla.event.on('localization::open', () => this.open());
+        salla.lang.onLoaded(() => {
+            this.translationLoaded = true;
+        });
+        /**
+         * letting developer to insert his own slot like:
+         * <salla-localization>
+         *   <div slot="language">...{name}....</div>
+         *   <div slot="currency">...{name}....</div>
+         * </salla-localization>
+         * Because scoped templates not supported in stencil );
+         * we made a workaround to pass language & currency attributes, then replace names in rendering
+         */
+        this.languageSlot = this.host.querySelector('[slot="language"]')?.innerHTML || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span></label>';
+        this.currencySlot = this.host.querySelector('[slot="currency"]')?.innerHTML || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{code}</small></label>';
+    }
+    /**
+     * open the component
+     */
+    async open() {
+        this.modal.open();
+        return await salla.api.withoutNotifier(() => this.getLanguages())
+            .then(() => this.getCurrencies())
+            .then(() => {
+            if (this.languages.length < 2 && this.currencies.length < 2) {
+                this.modal.close();
+            }
+        })
+            .catch(e => {
+            console.log(e);
+            this.hasError = true;
+            this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+        })
+            .finally(() => this.modal.stopLoading());
+    }
+    /**
+     * Hide the component
+     */
+    async close() {
+        return this.modal.close();
+    }
+    async getLanguages() {
+        this.language = this.language || salla.config.get('user.language_code');
+        return this.languages.length > 1 ? null : await salla.config.languages().then(data => this.languages = data);
+    }
+    async getCurrencies() {
+        this.currency = this.currency || salla.config.get('user.currency_code');
+        return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = Object.values(data || {}));
+    }
+    onChangeCurrency(event) {
+        this.currency = event.target.value;
+    }
+    onChangeLanguage(event) {
+        this.language = event.target.value;
+    }
+    /**
+     * Change currency and language to the selected ones.
+     */
+    async submit() {
+        let url;
+        this.btn.load()
+            .then(() => {
+            if (!this.currency) {
+                salla.log('There is no currency!');
+                return;
+            }
+            if (this.currency === salla.config.get('user.currency_code', 'SAR')) {
+                return;
+            }
+            url = window.location.href;
+            return salla.currency.api.change(this.currency);
+        })
+            .then(() => {
+            if (this.language !== salla.config.get('user.language_code', 'ar')) {
+                url = salla.helpers.addParamToUrl('lang', this.language);
+            }
+        })
+            .then(() => this.btn.stop())
+            .then(() => this.close())
+            .then(() => {
+            if (url) {
+                window.location.href = url.replace(`/${salla.config.get('user.language_code')}/`, `/${this.language}/`);
+            }
+        });
+    }
+    render() {
+        return (h("salla-modal", { key: '8f37a27df315cdc0c28e3294dc91209c852be37f', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: 'f12693b51bd57a866dd5eb40dedfb824262d69c9', slot: 'loading' }, h("div", { key: 'cf40e4ae38a9bffe76b63688b59638a534dfbfeb', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: 'b58668b0c16863b7998832c4be120636b32e4b05', width: '25%', height: '15px' }), h("div", { key: '2277672008dd8895791954ad3f8ac0bf090095cd', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: 'e22fe136879a706972c05b2b9ea8ab85be57b82f', width: '25%', height: '15px' }), h("div", { key: '8800d040033db851d2903c05fe0ce947072aae2e', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '3248a10d8023fa2c8b411294da1072d4209e9a87', height: '40px', width: '100%' }))), !!this.hasError ?
+            h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
+            h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
+                h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
+                    this.languages.map(lang => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot
+                            .replace(/\{name\}/g, lang.name)
+                            .replace(/\{code\}/g, lang.code)
+                            .replace(/\{country_code\}/g, lang.country_code) }))) :
+                    h("select", { class: "s-localization-modal-select", name: "language", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+                : '', this.currencies.length > 1 ?
+                h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.currency')), h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
+                    this.currencies.map(currency => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }), h("div", { class: "s-localization-modal-label-slot", id: "currency-slot", innerHTML: this.currencySlot
+                            .replace(/\{name\}/g, currency.name)
+                            .replace(/\{code\}/g, currency.code)
+                            .replace(/\{country_code\}/g, currency.country_code) }))) :
+                    h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
+                : '', h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))));
+    }
+    /**
+     * to reduce dom levels we will move slot data into the parent dom
+     */
+    componentDidRender() {
+        this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
+        this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
+    }
+    get host() { return getElement(this); }
+};
+
+export { SallaLocalizationModal as salla_localization_modal };

package/dist/esm/salla-login-modal.entry.js

@@ -0,0 +1,318 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, F as Fragment, a as getElement } from './index-B74h9G6a.js';
+
+const sallaLoginModalCss = "iframe{-moz-transition:height 0.3s;-ms-transition:height 0.3s;-o-transition:height 0.3s;-webkit-transition:height 0.3s;transition:height 0.3s;width:100%}";
+
+const SallaLoginModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
+         */
+        this.isMobileAllowed = true;
+        /**
+         * Does the merchant require registration with email & mobile
+         */
+        this.isEmailRequired = false;
+        /**
+         * Once the api verify success, it will be login the customer in web pages
+         */
+        this.supportWebAuth = true;
+        /**
+         * Reload after a successful login
+         */
+        this.withoutReload = false;
+        /**
+         * The source of opening login modal
+         */
+        this.source = '';
+        this.htmlElement = document.documentElement;
+        this.messages = [];
+        this.isClosable = true;
+        this.iframeLoaded = false;
+        this.scrolling = 'no';
+        this.direction = document.dir;
+        this.canRenderIframe = false;
+        salla.event.on('login::open', (data) => {
+            if (!this.isEmailAllowed && !this.isMobileAllowed) {
+                salla.logger.warn('Please enable atleast one login type to use this component.');
+                return;
+            }
+            this.source = data?.source ?? false;
+            this.withoutReload = data?.withoutReload ?? this.withoutReload;
+            this.open(data);
+            this.openModal();
+        });
+        salla.event.on('modal::close', (data) => {
+            if (this.iframe)
+                this.sendMessageToIframe({
+                    source: 'login',
+                    type: 'modal_closed',
+                    data,
+                });
+        });
+        salla.onReady(() => {
+            this.api = salla.config.get('store.api');
+            this.storeId = salla.config.get('store.id');
+        });
+    }
+    componentDidLoad() {
+        window.addEventListener('message', (event) => {
+            if (event.data.source != "login") {
+                return;
+            }
+            if (!this.inline && !this.canRenderIframe) {
+                return;
+            }
+            salla.log(`salla-account:: recived an event`, event.data);
+            let action = event.data?.type?.replace('iframe::', '');
+            let value = event.data.message;
+            //if we need skip some events
+            // if (action === 'dispatchEvent' && [].includes(value.event)) {
+            //     return;
+            // }
+            // if (action == "dispatchEvent") {
+            //   return this.host.dispatchEvent(new CustomEvent(value.name, {
+            //     cancelable: true,
+            //     bubbles: true,
+            //     detail: value.payload
+            //   }));
+            // }
+            if (action == 'ready') {
+                if (value.isPasskeyPage) {
+                    this.createPassKey.postMessage({ source: "login", type: "init_passkey_page", data: {
+                            token: salla.storage.get('token'),
+                            store_id: salla.config.get('store.id'),
+                            locale: salla.config.get('user.language_code'),
+                            redirect: salla.config.get('store.url')
+                        } }, salla.config.get('login.url'));
+                    return;
+                }
+                this.handleIframeReadyAction();
+                return;
+            }
+            if (action == 'height') {
+                return (this.iframe.height = value?.height + 'px');
+            }
+            //share the iframe storage, so login too
+            if (action == "storage") {
+                return this.handleIframeStorageAction(value);
+            }
+            // if (action == "success") {
+            //   this.isClosable = true;
+            //   confetti.startConfetti(1200, 50, 150);
+            // }
+            if (action == "scrolling") {
+                this.scrolling = value;
+                this.isClosable = false;
+                return;
+            }
+            if (action == "direction") {
+                return document.dir = this.direction = value ? "rtl" : "ltr";
+            }
+            if (action == 'notify') {
+                return salla.notify[value.type](value.message);
+            }
+            // temporary condition until we handle both cases separately
+            if (action == 'authenticated' || action == 'authenticated_web_auth') {
+                !value?.withoutClose && this.close();
+                return salla.auth.api.handlAfterAuthenticatedResponse(value, this.supportWebAuth)
+                    .then(() => !(value?.withoutReload || this.withoutReload) && setTimeout(() => window.location.reload(), 1000));
+            }
+            if (action == 'dispatchEvent' && value.event == 'auth::verified') {
+                salla.log('Ignored dispatchEvent `auth::verified` from iframe');
+                //we don't need to fire this event because it have listeners for it, and already it's fired/firing from `salla.auth.api.handlAfterAuthenticatedResponse` already we are handling it
+                return;
+            }
+            if (action == 'dispatchEvent') {
+                return salla.event.emit(value.event, ...value.payload);
+            }
+            if (action == 'reload') {
+                if (value?.withClose)
+                    this.modal.close();
+                return window.location.reload();
+            }
+            if (action === 'open_page') {
+                return window.location.href = value.url;
+            }
+            if (action === 'open_passkey_page') {
+                this.createPassKey = window.open(`${salla.config.get('login.url')}/create-passkey`);
+                return;
+            }
+            if (action === 'guest-checkout') {
+                return this.handleGuestCheckout();
+            }
+            if (action == "close") {
+                this.close();
+            }
+        });
+        this.observeDarkModeChanges();
+        setTimeout(() => Salla.event.emit('salla-login::ready'), 1);
+    }
+    /**
+     * Open login component
+     */
+    async open(_event = null) {
+        /**
+         * This is a workaround until we remove all the user objet from twig files
+         * When the user is already login, let's reload the page
+         */
+        if (!salla.config.isGuest()) {
+            if (!this.withoutReload) {
+                return location.reload();
+            }
+            // Fire an event if withoutReload is true
+            return;
+        }
+        return this.modal.open();
+    }
+    close() {
+        Salla.event.emit('salla-login::closing');
+        this.modal.close();
+        this.iframeLoaded = false;
+        this.canRenderIframe = false;
+        this.host.dispatchEvent(new CustomEvent('salla-login:closed', {
+            cancelable: true,
+            bubbles: true,
+            detail: null
+        }));
+        Salla.event.emit('salla-login::closed');
+    }
+    handleIframeReadyAction() {
+        this.sendInitMessage();
+        this.sendMessageToIframe({
+            source: 'login',
+            type: 'width',
+            data: document.body.clientWidth,
+        });
+    }
+    observeDarkModeChanges() {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === 'class') {
+                    this.sendMessageToIframe({
+                        source: 'login',
+                        type: 'darkMode',
+                        data: { isDark: this.htmlElement.classList.contains('dark') ? true : false },
+                    });
+                }
+            });
+        });
+        // observing the HTML element for attribute changes
+        observer.observe(this.htmlElement, { attributes: true });
+    }
+    async handleIframeStorageAction(value) {
+        let token, cartUserId = salla.storage.get('cart.user_id');
+        let withCartReset = false;
+        Object.entries(value).filter(item => !Salla.storage.get(item[0]))
+            .forEach(([key, value]) => {
+            salla.log('Shared storage from accounts domain', key, value);
+            let cleanedValue = (typeof value === 'string') ? value?.replace(/^"|"$/g, '') : value;
+            salla.storage.set(key, cleanedValue);
+            if (key === 'token') {
+                token = cleanedValue;
+            }
+            if (key === 'user' && cartUserId && (cleanedValue.id !== cartUserId)) {
+                withCartReset = true;
+            }
+        });
+        if (token) {
+            this.modal.close();
+            Salla.auth.event.tokenFetched(token);
+            try {
+                await Salla.api.cart.assign();
+            }
+            catch (err) {
+                Salla.log('Error on assign after handle iframe', err);
+            }
+            withCartReset && Salla.cart.reset();
+            try {
+                !Salla.auth.api.isSessionless() && await Salla.auth.api.request('auth/jwt');
+                if (Salla.auth.api.canRedirect()) {
+                    setTimeout(() => window.location.reload(), 100);
+                }
+                else {
+                    // Match handlAfterAuthenticatedResponse order: loggedIn (fetches profile + emits) -> afterUserLogin
+                    // Note: auth::verified is omitted here since cart.assign() already handles cart sync above
+                    await Salla.auth.event.loggedIn({ data: { token } }).then(() => Salla.auth.api.afterUserLogin());
+                }
+            }
+            catch (err) {
+                this.modal.open();
+                Salla.log('Error on request auth/jwt after handle iframe', err);
+            }
+            return;
+        }
+        withCartReset && Salla.cart.reset();
+    }
+    sendMessageToIframe(message) {
+        if (!this.iframe)
+            return;
+        return this.iframe.contentWindow.postMessage(message, '*');
+    }
+    sendInitMessage() {
+        let headers = this.headers;
+        try {
+            headers = typeof headers === 'string' ? JSON.parse(headers) : headers;
+        }
+        catch (error) {
+            console.error('Failed to parse headers!', this.headers, error);
+            headers = undefined;
+        }
+        const storageObject = {
+            user: salla.storage.get('user'),
+            s_translations: salla.storage.get('s_translations'),
+            token: salla.storage.get('token'),
+        };
+        storageObject.user || (delete storageObject.user);
+        storageObject.s_translations || (delete storageObject.s_translations);
+        storageObject.token || (delete storageObject.token);
+        this.sendMessageToIframe({
+            source: "login",
+            type: "init",
+            data: {
+                id: this.storeId,
+                lang: salla.lang.locale,
+                isDark: this.htmlElement.classList.contains('dark') ? true : false,
+                apiUrl: this.api?.replace(/\/+$/, ''),
+                supportWebAuth: this.supportWebAuth,
+                withoutReload: this.withoutReload,
+                inline: this.inline,
+                settings: salla.config.all(),
+                headers: headers,
+                storage: storageObject,
+            }
+        });
+    }
+    async handleGuestCheckout() {
+        this.modal.close();
+        if (salla.config.isGuest()) {
+            await salla.api.cart.syncGuestCart();
+            return salla.cart.submit(true);
+        }
+    }
+    openModal() {
+        if (!this.canRenderIframe) {
+            this.canRenderIframe = true;
+        }
+        this.modal.open();
+    }
+    render() {
+        if (this.inline) {
+            return this.getLoginDom();
+        }
+        return (h("salla-modal", { class: "s-login-modal", ref: modal => this.modal = modal, width: "xs" }, this.getLoginDom()));
+    }
+    getLoginDom() {
+        if (!this.canRenderIframe) {
+            return;
+        }
+        return h(Fragment, null, h("iframe", { src: `${salla.config.get('login.url', 'https://accounts.salla.com')}?src=${this.source}`, title: "Salla Login", class: "hide-scroll", loading: 'lazy', ref: iframe => { this.iframe = iframe; }, allow: "publickey-credentials-get; publickey-credentials-create", scrolling: this.scrolling, frameborder: "0", width: "100%" }));
+    }
+    get host() { return getElement(this); }
+};
+SallaLoginModal.style = sallaLoginModalCss;
+
+export { SallaLoginModal as salla_login_modal };

package/dist/esm/salla-loyalty-prize-item.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-6mr785rH.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B74h9G6a.js';
 
 const sallaLoyaltyPrizeItemCss = "salla-loyalty-prize-item:hover{box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important}";
 

package/dist/esm/salla-loyalty-program.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-6mr785rH.js';
-import { G as GiftIcon } from './gift-C0JNGIpa.js';
+import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+import { l as loyaltyProgramIcon } from './gift-BChI23pG.js';
 
 const sallaLoyaltyProgramCss = "";
 
@@ -76,7 +76,7 @@ const SallaWalletTable = class {
         }
     }
     render() {
-        return (h(Host, { key: '9beb3c0146ba1e0d5dc1c60a09c7d38af391bdc6' }, h("div", { key: 'a6ce757cb30de9b2e4d2c7e224b62452b9ce26e9' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-program-table" }, h("thead", { class: "s-loyalty-program-table-head" }, h("tr", { class: "s-loyalty-program-table-head-tr" }, h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", { class: "s-loyalty-program-table-tbody" }, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-program-table-tbody-tr" }, h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, point?.type === 'plus' ? '+' : '', point?.points || '', " ", salla.lang.get('pages.loyalty_program.point')), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.points_expire_date)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.key)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.status_key))))))), h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrlLoyalty && (h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (h("div", null, h("div", { class: "s-loyalty-program-table-empty-state" }, h("span", { innerHTML: GiftIcon }), h("div", { class: "s-loyalty-program-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), h("div", { class: "s-loyalty-program-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title'))))))))));
+        return (h(Host, { key: '9beb3c0146ba1e0d5dc1c60a09c7d38af391bdc6' }, h("div", { key: 'a6ce757cb30de9b2e4d2c7e224b62452b9ce26e9' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-program-table" }, h("thead", { class: "s-loyalty-program-table-head" }, h("tr", { class: "s-loyalty-program-table-head-tr" }, h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", { class: "s-loyalty-program-table-tbody" }, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-program-table-tbody-tr" }, h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, point?.type === 'plus' ? '+' : '', point?.points || '', " ", salla.lang.get('pages.loyalty_program.point')), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.points_expire_date)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.key)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.status_key))))))), h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrlLoyalty && (h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (h("div", null, h("div", { class: "s-loyalty-program-table-empty-state" }, h("span", { innerHTML: loyaltyProgramIcon }), h("div", { class: "s-loyalty-program-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), h("div", { class: "s-loyalty-program-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title'))))))))));
     }
 };
 SallaWalletTable.style = sallaLoyaltyProgramCss;