@salla.sa/twilight-components 2.14.353 → 2.14.355

package/dist/cjs/salla-scopes.cjs.entry.js

@@ -0,0 +1,180 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+var index = require('./index-DgOViweO.js');
+var search = require('./search-c7Aa7lM9.js');
+
+var StoreAlt = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>store-alt</title>
+<path d="M6.667 24h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.86 10.071l-4-8c-0.227-0.452-0.688-0.737-1.193-0.737h-21.333c-0.505 0-0.967 0.285-1.193 0.737l-4 8c-0.092 0.184-0.14 0.389-0.14 0.596v18.667c0 0.737 0.597 1.333 1.333 1.333h29.333c0.736 0 1.333-0.596 1.333-1.333v-18.667c0-0.207-0.048-0.412-0.14-0.596zM6.157 4h19.685l3.333 6.667h-26.352zM24 28h-5.333v-9.333h5.333zM29.333 28h-2.667v-10.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333v10.667h-13.333v-14.667h26.667zM6.667 18.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333z"></path>
+</svg>
+`;
+
+var ModeType;
+(function (ModeType) {
+    ModeType["DEFAULT"] = "default";
+    ModeType["AVAILABILITY"] = "availability";
+})(ModeType || (ModeType = {}));
+
+const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-placeholder{flex:0 0 85%}";
+
+const SallaScopees = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        //to avoid over loading scopes in each open call
+        this.loadedScopes = {
+            [ModeType.DEFAULT]: null,
+            [ModeType.AVAILABILITY]: null,
+        };
+        this.translationLoaded = false;
+        this.mode = ModeType.DEFAULT;
+        this.scopes = [];
+        this.originalScopesList = [];
+        this.isOpenedBefore = salla.storage.get("branch-choosed-before");
+        this.hasError = false;
+        this.loading = false;
+        /**
+         * Optionally open the modal or enforce the pop-up to the viewer
+         */
+        this.selection = 'optional';
+        /**
+         * Dictates when to show the search field
+         */
+        this.searchDisplayLimit = 6;
+        this.getFormTitle = () => {
+            if (this.originalScopesList?.length < 2)
+                return "";
+            const isMultiCountries = salla.config.get('store.features')?.includes('multi-countries');
+            if (this.mode === ModeType.DEFAULT) {
+                return salla.lang.get(isMultiCountries
+                    ? "blocks.scope.shopping_from_another_market"
+                    : "blocks.scope.shopping_from_another_branch");
+            }
+            return salla.lang.get('blocks.scope.search_for_availability_in_other_branches');
+        };
+        salla.event.on('scopes::open', ({ mode = null, product_id = null }) => {
+            this.open(mode, product_id);
+        });
+        salla.lang.onLoaded(() => {
+            this.translationLoaded = true;
+        });
+    }
+    /**
+     * Closes the scope modal.
+     */
+    async close() {
+        return await this.modal?.close();
+    }
+    /**
+     * Opens the scope modal.
+     */
+    async open(mode = ModeType.DEFAULT, product_id = null) {
+        this.hasError = false;
+        this.mode = [ModeType.AVAILABILITY, ModeType.DEFAULT].includes(mode) ? mode : ModeType.DEFAULT;
+        this.loading = !this.loadedScopes[this.mode];
+        this.setScopeValues([]);
+        salla.log('SallaScope:: opened');
+        this.modal.open();
+        if (!this.loading) {
+            this.setScopeValues(this.loadedScopes[this.mode]);
+            return this.modal.stopLoading();
+        }
+        let callback = () => mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get();
+        return await salla.api.withoutNotifier(callback)
+            .then((resp) => {
+            if (mode == ModeType.AVAILABILITY) {
+                return this.setScopeValues(this.loadedScopes[ModeType.AVAILABILITY] = resp.data);
+            }
+            this.setScopeValues(this.loadedScopes[this.mode] = resp.data.scopes);
+        }).catch(e => {
+            console.log(e);
+            this.hasError = true;
+        })
+            .finally(() => {
+            this.modal.stopLoading();
+            this.loading = false;
+        });
+    }
+    /**
+     * Submit form to change exsiting scope.
+     */
+    async handleSubmit() {
+        let payload = { 'id': this.current_scope.id };
+        this.changeBtn.load();
+        return await salla.scope.change(payload)
+            .then(() => {
+            salla.storage.set("branch-choosed-before", true);
+            salla.storage.set("scope", {
+                'type': this.current_scope.type,
+                'id': this.current_scope.id
+            });
+            salla.cart.reset();
+            window.location.replace(salla.helpers.addParamToUrl('scope', this.current_scope.id));
+        }).catch(e => console.log(e))
+            .finally(() => {
+            this.changeBtn.stop();
+        });
+    }
+    setScopeValues(value) {
+        this.scopes = value;
+        this.originalScopesList = value;
+        if (value?.length == 1) {
+            this.current_scope = value[0];
+            this.selected_scope = value[0];
+            this.scopes = [value[0]]; // Just to make sure it's consistent, might not have that much effect though.
+        }
+        else {
+            this.current_scope = value?.find(scope => scope.selected);
+            this.selected_scope = value?.find(scope => scope.selected);
+        }
+    }
+    handleSearchFieldTyping(e) {
+        let value = e.target.value.toLocaleLowerCase();
+        if (!!value) {
+            this.scopes = this.originalScopesList.filter(scope => scope.name.toLowerCase().includes(value));
+        }
+        else {
+            this.scopes = this.originalScopesList;
+        }
+    }
+    handleScopeSelection(event) {
+        this.current_scope = this.scopes?.find(scope => scope.id == event.target.value);
+    }
+    placeholderContent() {
+        return index.h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, index.h("span", { slot: "title" }, salla.lang.get("blocks.scope.branch_looking_for_not_found")), index.h("span", { slot: "description" }, salla.lang.get("blocks.scope.our_services_not_available_in_this_branch")));
+    }
+    defaultContent() {
+        return [index.h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes?.map((scope) => index.h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, index.h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), index.h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, index.h("span", null, scope.name))))), this.footerContent()];
+    }
+    availabilityContent() {
+        return index.h("div", { class: "s-scopes-container" }, this.scopes?.map((scope) => index.h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, index.h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.mode === ModeType.DEFAULT } }, index.h("span", null, scope.name)), index.h("h2", { style: { 'color': scope?.availability?.color }, class: `s-scopes-${scope?.availability?.key}` }, scope?.availability?.label))));
+    }
+    footerContent() {
+        return index.h("div", { class: "s-scopes-footer" }, index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.changeBtn = btn, disabled: !this.current_scope, onClick: () => this.handleSubmit(), class: "s-scopes-submit", "loader-position": "center", width: "wide" }, salla.lang.get('common.elements.confirm'))));
+    }
+    //let's wait to salla to be ready then render it.
+    componentWillLoad() {
+        return salla.onReady();
+    }
+    render() {
+        return (index.h(index.Host, { key: '8cbe5fbbe87bff9b835ae59fc92278725a9d09cf' }, index.h("salla-modal", { key: '82017d18802be5fa8fff95b2cbe32886308bb23e', ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: this.loading, "has-skeleton": true }, this.loading ?
+            index.h("div", { slot: "loading" }, index.h("div", { class: "s-scopes-skeleton" }, index.h("salla-list-tile", { class: "s-scopes-header" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon" }, index.h("salla-skeleton", { type: "circle" })), index.h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, index.h("salla-skeleton", { height: '15px', width: '50%' })), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, index.h("salla-skeleton", { height: '10px' }), index.h("salla-skeleton", { height: '10px', width: '75%' }))), index.h("div", { class: "s-scopes-skeleton-search" }, index.h("salla-skeleton", { height: '10px', width: '50%' }), index.h("salla-skeleton", { height: '30px', width: '100%' })), index.h("div", { class: "s-scopes-skeleton-scopes" }, index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' })), index.h("div", { class: "s-scopes-skeleton-btn" }, index.h("salla-skeleton", { height: '40px', width: '100%' }))))
+            :
+                [index.h("salla-list-tile", { class: this.originalScopesList?.length ? "s-scopes-header block" : "s-hidden" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), index.h("div", { slot: "title", class: "s-scopes-header-title" }, salla.lang.get('blocks.scope.you_are_browse_store_from')), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), index.h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList?.length && index.h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList?.length > this.searchDisplayLimit ?
+                        index.h("div", { class: "s-scopes-search-wrapper" }, index.h("div", { class: "s-scopes-search-icon", innerHTML: search.Search }), index.h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), enterkeyhint: "search", placeholder: salla.lang.get('blocks.scope.searching_for_a_branch') }))
+                        : "", this.hasError || (!this.originalScopesList?.length && this.mode !== ModeType.AVAILABILITY) ?
+                        this.placeholderContent()
+                        : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent())])));
+    }
+    componentDidLoad() {
+        if (!this.isOpenedBefore && this.selection == 'mandatory') {
+            this.open();
+        }
+    }
+};
+SallaScopees.style = sallaScopesCss;
+
+exports.salla_scopes = SallaScopees;

package/dist/cjs/salla-search.cjs.entry.js

@@ -0,0 +1,153 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+var index = require('./index-DgOViweO.js');
+var search = require('./search-c7Aa7lM9.js');
+var Helper = require('./Helper-DHRnzcFm.js');
+require('./anime.es-BqW8JHZi.js');
+
+const sallaSearchCss = "";
+
+const SallaSearch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.inputValue = '';
+        this.translationLoaded = false;
+        this.loading = false;
+        this.typing = false;
+        this.debounce = setTimeout(() => '', 1000);
+        /**
+         * Set the component display without modal window. Defaults to `false`
+         */
+        this.inline = false;
+        /**
+         * Adds a border radius to the input. Half of the height.
+         */
+        this.oval = false;
+        /**
+         * Sets the height of the input
+         */
+        this.height = 60;
+        /**
+         * Maximum number of words allowed in the input
+         */
+        this.maxWords = 5;
+        /**
+         * Show submit action buttons at the end.
+         */
+        this.showAction = false;
+        this.productSlot = this.host.querySelector('[slot="product"]')?.innerHTML || this.getDefaultProductSlot();
+        salla.event.on('search::open', () => this.open());
+        salla.lang.onLoaded(() => {
+            this.translationLoaded = true;
+        });
+        salla.event.on('modalClosed', () => this.onModalClose());
+    }
+    async open() {
+        if (!this.inline) {
+            await this.modal.open().then(() => setTimeout(() => this.searchInput.focus(), 300));
+        }
+    }
+    onModalClose() {
+        this.searchInput.value = '';
+        this.results = undefined;
+        this.afterSearching();
+        this.container.classList.remove('s-search-no-results');
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Enter' && this.search_term?.length) {
+            window.location.href = salla.url.get('search?q=' + encodeURI(this.search_term));
+        }
+    }
+    getDefaultProductSlot() {
+        return '<div class="s-search-product-image-container">' +
+            '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+            '</div>' +
+            '<div class="s-search-product-details">' +
+            '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
+            '</div>';
+    }
+    debounceSearch(event) {
+        this.typing = true;
+        clearTimeout(this.debounce);
+        this.debounce = setTimeout(() => {
+            this.typing = false;
+            this.search_term = event.target.value;
+        }, 700);
+    }
+    limitWordsAndSearch(event) {
+        let value = event.target.value;
+        const words = value.trim().split(/\s+/);
+        if (words.length > this.maxWords) {
+            const truncatedInput = words.slice(0, this.maxWords).join(' ');
+            this.searchInput.value = truncatedInput;
+        }
+        this.debounceSearch(event);
+    }
+    getQueryParam(param) {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get(param);
+    }
+    handleActionClick() {
+        if (!!this.search_term && this.search_term.length > 2) {
+            return this.search(this.search_term);
+        }
+    }
+    handleSearch(val) {
+        this.inputValue = val;
+        if (val.length > 2) {
+            this.search(val);
+        }
+        else {
+            this.results = undefined;
+            this.afterSearching();
+        }
+    }
+    search(val) {
+        this.noResults.style.display = 'none';
+        //run loading spinner or stop it
+        this.loading = true;
+        salla.product.fetch({ source: "search", source_value: val })
+            .then(response => {
+            this.results = response;
+            salla.event.emit('Products Searched', val);
+        })
+            .catch(err => err !== 'Query is same as previous one!' ? this.results = undefined : null)
+            .finally(() => this.afterSearching(/*isEmpty*/ false));
+    }
+    afterSearching(isEmpty = true) {
+        this.noResults.style.display = isEmpty || this.results?.data.length > 0 ? 'none' : 'block';
+        Helper.Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => this.results?.data.length);
+        this.loading = false;
+        salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
+        this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
+    }
+    render() {
+        const searchContent = index.h("div", { key: '2e945555af379b5992375336c5b33a1dbb92589b', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, index.h("div", { key: '28c948e49a1d72a3a79e87477f37cc5f26dd4b3a', class: "s-search-input-wrapper" }, index.h("span", { key: 'b053ea1b4e6ed3c4030010dd61923421fcfeb214', class: "s-search-icon-wrap" }, index.h("span", { key: 'e1ecd01ab77d0ddd0b7b2010788fe28deaebd2af', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : search.Search })), index.h("input", { key: 'bca441ce72aac9bb85f2862413c77fa853e703c6', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }), this.showAction ?
+            index.h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && index.h("span", { innerHTML: search.Search })) : null), index.h("div", { key: '07ed4d8828b8343dd05bacb3a6904ad30eacce7a', class: "s-search-results" }, this.results?.data.map((product) => index.h("a", { href: product.url + '?from=search-bar', class: { "s-search-product": true, 's-search-product-not-available': !product.is_available }, innerHTML: this.productSlot
+                .replace(/\{name\}/g, product.name)
+                .replace(/\{price\}/g, product.price ? salla.money(product.price) : '')
+                .replace(/\{regular_price\}/g, product.is_on_sale && product.regular_price ? salla.money(product.regular_price) : '')
+                .replace(/\{image\}/g, product.image.url) })), index.h("p", { key: '7a3420f60f2172f39c44633176a454f9ae06f0ce', ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options'))));
+        return (this.inline ?
+            index.h("div", { class: "s-search-modal" }, searchContent)
+            :
+                index.h("salla-modal", { position: "top", class: "s-search-modal", ref: modal => this.modal = modal }, searchContent));
+    }
+    /**
+     * Run it one time after load
+     */
+    componentDidLoad() {
+        this.afterSearching();
+        this.searchInput.value = this.getQueryParam('q');
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "search_term": ["handleSearch"]
+    }; }
+};
+SallaSearch.style = sallaSearchCss;
+
+exports.salla_search = SallaSearch;

package/dist/cjs/salla-skeleton.cjs.entry.js

@@ -0,0 +1,36 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+var index = require('./index-DgOViweO.js');
+
+const sallaSkeletonCss = ":host{display:block}";
+
+const SallaSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+       *  Set the shape type of the skeleton is it circle or normal
+       */
+        this.type = 'normal';
+        /**
+       *  Set the skeleton width
+       */
+        this.width = '100%';
+        /**
+       *  Set the skeleton height
+       */
+        this.height = '100%';
+    }
+    render() {
+        const classes = {
+            's-skeleton-item': true,
+            's-skeleton-item-circular': this.type == 'circle',
+        };
+        return (index.h(index.Host, { key: 'ad465a77b10e2f1d739c802643076f63985cfda5', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, index.h("div", { key: '0b05bcfc21d3bcb85389a2a0c9b63c3a7aa28d60', class: classes }, "\u00A0")));
+    }
+};
+SallaSkeleton.style = sallaSkeletonCss;
+
+exports.salla_skeleton = SallaSkeleton;