@salla.sa/twilight-components 1.6.3 → 1.6.5

package/dist/components/salla-offer-modal.js

@@ -4,9 +4,11 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
 import { K as KeyboardArrowRightIcon } from './keyboard_arrow_right.js';
-import { d as defineCustomElement$4 } from './salla-button2.js';
-import { d as defineCustomElement$3 } from './salla-loading2.js';
-import { d as defineCustomElement$2 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-button2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-placeholder2.js';
+import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
 const SpecialDiscountIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -28,6 +30,13 @@ const Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" he
 </svg>
 `;
 
+const Cart2 = `<!-- 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>cart2</title>
+<path d="M6.845 5.333l-1.905-5.333h-3.607c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333v0h1.727l5.72 16.012c0.569 1.56 2.039 2.654 3.765 2.655h12.133c0.001 0 0.002 0 0.003 0 1.825 0 3.364-1.222 3.845-2.892l0.007-0.028 3.161-13.080zM25.96 17.716c-0.167 0.554-0.672 0.951-1.27 0.951-0.002 0-0.005 0-0.007-0h-12.133c-0.575-0-1.065-0.364-1.252-0.875l-0.003-0.009-3.497-9.783h20.508zM13.333 24c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4v0c0-2.209-1.791-4-4-4v0zM13.333 29.333c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333c0.736 0 1.333 0.597 1.333 1.333v0c0 0.736-0.597 1.333-1.333 1.333v0zM24 24c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4v0c0-2.209-1.791-4-4-4v0zM24 29.333c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333c0.736 0 1.333 0.597 1.333 1.333v0c0 0.736-0.597 1.333-1.333 1.333v0z"></path>
+</svg>
+`;
+
 const sallaOfferModalCss = "";
 
 const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -36,8 +45,10 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     var _a, _b;
     this.offer = null;
+    this.hasError = false;
     this.translationLoaded = false;
     Helper.setHost(this.host);
+    salla.event.on('offer-modal::open', (product_id) => this.open(product_id));
     salla.lang.onLoaded(() => {
       this.translationLoaded = true;
     });
@@ -57,8 +68,15 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    */
   async open(product_id) {
     //TODO:: make sure there is only one offer
-    return salla.product.offers(product_id)
-      .then(response => this.showOffer(response.data[0]));
+    this.modal.open();
+    return salla.api.withoutNotifier(salla.product.offers(product_id))
+      .then(response => this.showOffer(response.data[0]))
+      .catch(e => {
+      var _a, _b, _c, _d;
+      this.hasError = true;
+      this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
+    })
+      .finally(() => setTimeout(() => { this.modal.stopLoading(); }, 1000));
   }
   /**
    * Show offer details
@@ -69,7 +87,6 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.offer_name = offer.name;
     this.offer_message = offer.message;
     this.modal.setTitle(this.offer_name);
-    return this.modal.open();
   }
   rememberMe(event) {
     salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
@@ -91,8 +108,8 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { "sub-title-first": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.offer !== null
-      ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
+    return h("salla-modal", { "sub-title-first": true, "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true }, h("div", { slot: 'loading' }, h("div", { class: "s-offer-modal-skeleton" }, h("div", { class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { height: '15px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '30%' })), h("div", { class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { height: '15px', width: '50%' }), h("salla-skeleton", { height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+      ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
           ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
               .replace(/\{tagIcon\}/g, Tag)
               .replace(/\{name\}/g, category.name)
@@ -106,7 +123,8 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
               : salla.money(product.price)) }, h("div", { class: "s-offer-modal-btn-wrap" }, h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.out_of_stock')))))), h("div", { class: "s-offer-modal-slider-nav" }, h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowLeftIcon })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowRightIcon })))), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
           h("p", { class: "s-offer-modal-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.formatted_date)
           : '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", salla.lang.get('common.elements.remember_my_choice'))),
-      ] : '');
+      ] :
+      h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : ''));
   }
   componentDidRender() {
     // Sooo mini Slider
@@ -159,6 +177,8 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "offer": [32],
     "offer_name": [32],
     "offer_message": [32],
+    "hasError": [32],
+    "errorMessage": [32],
     "translationLoaded": [32],
     "open": [64],
     "showOffer": [64]
@@ -167,7 +187,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-offer-modal", "salla-button", "salla-loading", "salla-modal"];
+  const components = ["salla-offer-modal", "salla-button", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-offer-modal":
       if (!customElements.get(tagName)) {
@@ -176,15 +196,25 @@ function defineCustomElement$1() {
       break;
     case "salla-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$6();
       }
       break;
     case "salla-loading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$5();
       }
       break;
     case "salla-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-placeholder":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-skeleton":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/salla-product-size-guide.js

@@ -17,21 +17,32 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   constructor() {
     super();
     this.__registerHost();
+    this.hasError = false;
     Helper.setHost(document);
     salla.event.on('size-guide::open', (product_id) => this.open(product_id));
+    salla.lang.onLoaded(() => {
+      this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
+      this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
+      this.modal_title = salla.lang.get('pages.products.size_guides');
+    });
   }
   /**
    * Show the size-guide modal window
    */
   async open(product_id) {
-    this.modal.setTitle(salla.lang.get('pages.products.size_guides'));
+    this.modal.setTitle(this.modal_title);
     this.modal.open();
-    return await salla.product.getSizeGuides(product_id)
+    return await salla.api.withoutNotifier(salla.product.getSizeGuides(product_id)
       .then((response) => {
       this.guides = response.data;
     })
-      .catch(e => console.log(e))
-      .finally(() => this.modal.stopLoading());
+      .catch(e => {
+      var _a, _b, _c, _d;
+      console.log(e);
+      this.hasError = true;
+      this.placeholder_description = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
+    })
+      .finally(() => this.modal.stopLoading()));
   }
   /**
    *
@@ -42,10 +53,10 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   }
   // !Todo - Enhance placeholder text
   showPlaceholder() {
-    return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, salla.lang.get('pages.products.size_guide_placeholder')), h("div", { slot: "description" }, salla.lang.get('pages.products.size_guide_placeholder_info')));
+    return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
   }
   render() {
-    return (h(Host, { class: "s-product-size-guide-block" }, h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("div", { class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' })), h("div", { class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '100%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '45%' }), h("salla-skeleton", { height: '10px', width: '30%' })))), h("slot", { name: "header" }), !!this.guides ?
+    return (h(Host, { class: "s-product-size-guide-block" }, h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("div", { class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' })), h("div", { class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '100%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '45%' }), h("salla-skeleton", { height: '10px', width: '30%' })))), h("slot", { name: "header" }), !this.hasError && !!this.guides ?
       [h("div", { class: "container px-8" }, h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description })))))]
       : this.showPlaceholder(), h("slot", { name: "footer" }))));
   }
@@ -54,6 +65,10 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class extends H
 }, [4, "salla-product-size-guide", {
     "guides": [32],
     "productId": [32],
+    "placeholder_title": [32],
+    "placeholder_description": [32],
+    "modal_title": [32],
+    "hasError": [32],
     "open": [64],
     "close": [64]
   }]);

package/dist/components/salla-rating-modal.js

@@ -3,10 +3,18 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
-import { C as CheckCircle2, d as defineCustomElement$3 } from './salla-modal2.js';
-import { d as defineCustomElement$5 } from './salla-button2.js';
-import { d as defineCustomElement$4 } from './salla-loading2.js';
-import { d as defineCustomElement$2 } from './salla-rating-stars2.js';
+import { C as CheckCircle2, d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-button2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-rating-stars2.js';
+import { d as defineCustomElement$2 } from './salla-skeleton2.js';
+
+const Star = `<!-- 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>star</title>
+<path d="M31.819 12.077c-0.367-0.883-1.209-1.411-2.259-1.411h-8.437l-2.681-8.871c-0.347-1.075-1.329-1.796-2.443-1.796s-2.096 0.721-2.447 1.805l-2.788 8.861h-8.275c-1.076 0-1.939 0.533-2.308 1.427-0.375 0.904-0.159 2.012 0.525 2.693 0.044 0.044 0.092 0.085 0.141 0.124l6.811 5.101-2.773 8.567c-0.344 1.063 0.019 2.228 0.899 2.899 0.459 0.351 1.001 0.527 1.544 0.527 0.528 0 1.056-0.165 1.511-0.499l7.159-5.267 7.161 5.268c0.896 0.659 2.168 0.645 3.051-0.028 0.884-0.671 1.245-1.836 0.901-2.9l-2.773-8.567 6.811-5.101c0.051-0.037 0.099-0.080 0.143-0.124 0.687-0.687 0.904-1.8 0.528-2.709zM21.976 18.448c-0.456 0.343-0.644 0.936-0.469 1.477l3.044 9.293-7.763-5.711c-0.235-0.173-0.513-0.259-0.791-0.259s-0.556 0.085-0.791 0.259l-7.713 5.676 2.997-9.257c0.175-0.541-0.013-1.136-0.469-1.477l-6.829-5.116h8.551c0.583 0 1.097-0.377 1.272-0.933l2.981-9.479 2.861 9.465c0.169 0.561 0.688 0.947 1.276 0.947h8.672z"></path>
+</svg>
+`;
 
 const ShippingFast = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -21,6 +29,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   constructor() {
     super();
     this.__registerHost();
+    this.hasError = false;
     this.stepsCount = 0;
     this.currentIndex = 0;
     this.submitted = [];
@@ -39,12 +48,23 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
    * Show the rating modal
    */
   async open() {
-    return this.modal.open()
-      .then(() => this.order || salla.rating.api.order(this.orderId).then(res => this.order = res.data))
-      .then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
-      .then(() => this.modal.stopLoading())
-      .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
-      .then(() => setTimeout(() => this.handleWizard(), 100));
+    this.modal.open();
+    return await salla.api.withoutNotifier(salla.rating.api.order(this.orderId)
+      .then(res => this.order = res.data)
+      .catch(e => {
+      var _a, _b, _c, _d;
+      this.hasError = true;
+      this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
+    })
+      .finally(() => {
+      var _a, _b, _c;
+      this.modal.setTitle(`${salla.lang.get('pages.rating.rate_order')} <span class="unicode">${!!this.order ? `(#${this.order.id})` : ''}</span>`);
+      this.stepsCount = [(_a = this.order) === null || _a === void 0 ? void 0 : _a.testimonials_enabled, (_b = this.order) === null || _b === void 0 ? void 0 : _b.products_enabled, (_c = this.order) === null || _c === void 0 ? void 0 : _c.shipping_enabled].filter(enabled => enabled).length;
+      setTimeout(() => this.handleWizard(), 100);
+      setTimeout(() => {
+        this.modal.stopLoading();
+      }, 1000);
+    }));
   }
   /**
    * Show the rating modal
@@ -59,7 +79,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.showActiveStep();
   }
   showActiveStep(current = null) {
-    var _a;
+    var _a, _b;
     this.currentTab = current || this.steps[this.currentIndex];
     Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
       .toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
@@ -70,9 +90,9 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
-    this.nextBtn.setText(nextType ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
+    (_b = this.nextBtn) === null || _b === void 0 ? void 0 : _b.setText(nextType ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
       : salla.lang.get('pages.rating.send_ratings'));
-    setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
+    setTimeout(() => { var _a, _b; return (_a = this.body) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + ((_b = this.currentTab) === null || _b === void 0 ? void 0 : _b.scrollHeight) + 'px'); });
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
@@ -147,8 +167,9 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.showActiveStep(this.thanksTab);
   }
   render() {
-    return (h(Host, { class: "s-rating" }, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
-      ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
+    var _a;
+    return (h(Host, { class: "s-rating-modal" }, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: 'loading' }, h("div", { class: "s-rating-modal-skeleton" }, h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { height: '15px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("div", { class: "s-rating-modal-skeleton-stars" }, [...Array(5)].map(() => h("div", { innerHTML: Star }))), h("salla-skeleton", { height: '100px', width: '100%' }), h("div", { class: "s-rating-modal-skeleton-footer" }, h("salla-skeleton", { height: '40px', width: '30%' })))), !this.hasError && this.order
+      ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, ((_a = this.order) === null || _a === void 0 ? void 0 : _a.testimonials_enabled) ?
           h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))
           : '', this.order.products_enabled
           ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, h("div", { class: "s-rating-modal-product-img-wrap" }, h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })), h("div", { class: "s-rating-modal-product-details" }, h("h3", { class: "s-rating-modal-product-title" }, " ", item.product.name), h("div", { class: "s-rating-modal-stars-product" }, h("salla-rating-stars", { size: "small", name: `products[${index}][rating]` })), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index}][comment]`, class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" })))))
@@ -167,6 +188,8 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
 }, [0, "salla-rating-modal", {
     "orderId": [2, "order-id"],
     "order": [32],
+    "hasError": [32],
+    "errorMessage": [32],
     "translationLoaded": [32],
     "open": [64],
     "close": [64]
@@ -175,7 +198,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-rating-modal", "salla-button", "salla-loading", "salla-modal", "salla-rating-stars"];
+  const components = ["salla-rating-modal", "salla-button", "salla-loading", "salla-modal", "salla-rating-stars", "salla-skeleton"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-rating-modal":
       if (!customElements.get(tagName)) {
@@ -184,20 +207,25 @@ function defineCustomElement$1() {
       break;
     case "salla-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "salla-loading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "salla-modal":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "salla-rating-stars":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-skeleton":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/salla-scopes.js

@@ -34,6 +34,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.scopes = [];
     this.originalScopesList = [];
     this.isOpenedBefore = salla.storage.get("branch-choosed-before");
+    this.hasError = false;
     /**
      * Optionally open the modal or enforce the pop-up to the viewer
      */
@@ -75,9 +76,8 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     else {
       this.mode = ModeType.DEFAULT;
     }
-    this.modal.loading();
     this.modal.open();
-    return await (mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get())
+    return await salla.api.withoutNotifier((mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get())
       .then((resp) => {
       if (mode == ModeType.AVAILABILITY) {
         this.setScopeValues(resp.data);
@@ -85,10 +85,13 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       else {
         this.setScopeValues(resp.data.scopes);
       }
-    }).catch(e => console.log(e))
+    }).catch(e => {
+      console.log(e);
+      this.hasError = true;
+    })
       .finally(() => {
       this.modal.stopLoading();
-    });
+    }));
   }
   /**
    * Submit form to change exsiting scope.
@@ -153,8 +156,8 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     return (h(Host, null, h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true, "has-skeleton": true }, h("div", { slot: "loading" }, h("div", { class: "s-scopes-skeleton" }, h("salla-list-tile", { class: "s-scopes-header" }, h("div", { slot: "icon", class: "s-scopes-header-icon" }, h("salla-skeleton", { type: "circle" })), h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-scopes-skeleton-search" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '30px', width: '100%' })), h("div", { class: "s-scopes-skeleton-scopes" }, h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-scopes-skeleton-btn" }, h("salla-skeleton", { height: '40px', width: '100%' })))), h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, salla.lang.get('blocks.scope.you_are_browse_store_from')), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
-      h("div", { class: "s-scopes-search-wrapper" }, h("div", { class: "s-scopes-search-icon", innerHTML: Search }), h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: salla.lang.get('blocks.scope.searching_for_a_branch') }))
-      : "", this.scopes.length < 2 ?
+      h("div", { class: "s-scopes-search-wrapper" }, h("div", { class: "s-scopes-search-icon", innerHTML: Search }), 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.scopes.length < 2 ?
       this.placeholderContent()
       : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent()))));
   }
@@ -174,6 +177,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "originalScopesList": [32],
     "selected_scope": [32],
     "isOpenedBefore": [32],
+    "hasError": [32],
     "close": [64],
     "open": [64],
     "handleSubmit": [64]

package/dist/components/salla-search.js

@@ -100,7 +100,7 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     var _a;
-    const searchContent = h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, h("input", { type: "text", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: e => this.debounceSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }), h("span", { class: "s-search-icon-wrap" }, h("span", { class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"></i>' : Search })), h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
+    const searchContent = h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, h("input", { type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: e => this.debounceSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }), h("span", { class: "s-search-icon-wrap" }, h("span", { class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"></i>' : Search })), h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
       _a.data.map(item => h("a", { href: item.url, class: { "s-search-product": true, 's-search-product-not-available': !item.is_available }, innerHTML: this.productSlot
           .replace(/\{name\}/g, item.name)
           .replace(/\{price\}/g, salla.money(item.price))

package/dist/components/salla-select.d.ts

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

package/dist/components/salla-select.js

@@ -0,0 +1,199 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaSelectCss = ".s-select-label{display:block;margin-bottom:0.5rem;color:#111827;font-size:0.875rem;line-height:1.25rem;font-weight:500}.s-select-underline{display:block;padding-left:0;padding-right:0;padding-top:0.625rem;padding-bottom:0.625rem;background-color:transparent;color:#6B7280;font-size:0.875rem;line-height:1.25rem;width:100%;border-width:0;border-bottom-width:2px;border-color:#E5E7EB;appearance:none}.s-select-outlined{display:block;padding:0.625rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;background-color:#F9FAFB;color:#111827;font-size:0.875rem;line-height:1.25rem;width:100%;border-radius:0.5rem;border-width:1px;border-color:#D1D5DB}.s-select-x-large{height:5rem}.s-select-large{height:4rem}.s-select-normal{height:3rem}.s-select-small{height:3rem}.s-select-x-small{height:2.5rem}.s-select-field{padding-top:0.25rem;padding-bottom:0.25rem;padding-right:0.5rem;padding-left:0.5rem;margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:400;line-height:1.75rem;width:100%;border-radius:0.375rem;border-color:#9CA3AF;box-shadow:none}.s-select-hint{margin-top:0.25rem;color:#374151;font-size:0.875rem;line-height:1.25rem;line-height:1.25rem}";
+
+const SallaSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Sets label
+     */
+    this.label = undefined;
+    /**
+     * Can be an array of objects or array of strings.
+     * When using objects, will look for a text, value and disabled keys.
+     */
+    this.items = [];
+    /**
+     * Set property of items’s text value
+     */
+    this.itemText = "text";
+    /**
+     * Set property of items’s value - must be primitive.
+     * Dot notation is supported.
+     */
+    this.itemValue = "value";
+    /**
+     * Set property of items’s disabled value
+     */
+    this.itemDisabled = 'disabled';
+    /**
+    * Sizing options
+    */
+    this.size = 'normal';
+    /**
+     * The selected value
+     */
+    this.value = undefined;
+    /**
+     * Enable autofocus
+     */
+    this.autofocus = false;
+    /**
+     * Add input clear functionality, default icon is `sicon-cancel`
+     */
+    this.clearable = false;
+    /**
+     * Applied when using clearable and the input is dirty
+     */
+    this.clearIcon = 'sicon-cancel';
+    /**
+     * Applies specified color to the control.
+     */
+    this.color = 'primary';
+    /**
+     * Remove elevation or box shadow.
+     */
+    this.flat = undefined;
+    /**
+     * Disable the input
+     */
+    this.disabled = false;
+    /**
+     * Displays linear progress bar.
+     */
+    this.loading = false;
+    /**
+     * Specifies which color is applied to the progress bar.
+     */
+    this.loadingColor = 'primary';
+    /**
+     * Hint text
+     */
+    this.hint = undefined;
+    /**
+     * Forces hint to always be visible.
+     */
+    this.persistHint = false;
+    /**
+     * Sets the input’s placeholder text.
+     */
+    this.placeholder = undefined;
+    /**
+     * Enable multiple item selection
+     */
+    this.multiple = false;
+    /**
+     * Enable multiple item selection
+     */
+    this.autocomplete = false;
+    /**
+     * Enable multiple item selection
+     */
+    this.required = false;
+    /**
+     * Changes display of selections to chips
+     */
+    this.chips = false;
+    /**
+     * Define appearance of the component
+     */
+    this.shape = 'outlined';
+    /**
+     * Changes the selection behavior to return the object directly
+     * rather than the value specified with item-value
+     */
+    this.returnObject = false;
+    /**
+     * Hides hint if any
+     */
+    this.hideDetail = false;
+  }
+  selectClass() {
+    return `s-select-field s-select-${this.shape} ${this.color} ${this.size}`;
+  }
+  onSelectedItemChange(event) {
+    let selectedIndex = event.target.selectedIndex;
+    if (selectedIndex < 0) {
+      this.value = undefined;
+      return;
+    }
+    let selectedItem = this.items[!!this.placeholder ? selectedIndex - 1 : selectedIndex];
+    this.value = this.returnObject ? selectedItem : selectedItem[this.itemValue];
+    console.log("🚀 ~ file: salla-select.tsx ~ line 153 ~ SallaSelect ~ onSelectedItemChange ~ this.value", this.value);
+  }
+  generateHint() {
+    if (!this.persistHint && !this.value) {
+      return "";
+    }
+    return h("div", { class: "s-select-hint" }, this.hint);
+  }
+  checkForSelected(item) {
+    if (this.returnObject && !!this.value) {
+      return item[this.itemValue] = this.value[this.itemValue];
+    }
+    return item[this.itemValue] == this.value;
+  }
+  render() {
+    return (h(Host, null, !!this.label ?
+      h("label", { htmlFor: "s-select", class: "s-select-label" }, this.label)
+      : "", h("select", { multiple: this.multiple, autocomplete: this.autocomplete ? 'on' : 'off', disabled: this.disabled, autoFocus: this.autofocus, id: "s-select", class: this.selectClass(), onChange: this.onSelectedItemChange.bind(this) }, !!this.placeholder ?
+      h("option", { selected: !this.value }, this.placeholder)
+      : "", this.items.map((item) => 
+    // item instanceof Object ?
+    h("option", { label: item[this.itemText], value: item[this.itemValue], selected: this.checkForSelected(item), disabled: item[this.itemDisabled] })
+    // :
+    // <option label={item} value={item} selected={item == this.value} disabled={item == this.itemDisabled}></option>
+    )), h("div", { class: { "s-hidden": this.hideDetail } }, this.generateHint())));
+  }
+  static get style() { return sallaSelectCss; }
+}, [0, "salla-select", {
+    "label": [1],
+    "items": [16],
+    "itemText": [1, "item-text"],
+    "itemValue": [1, "item-value"],
+    "itemDisabled": [1, "item-disabled"],
+    "size": [1],
+    "value": [1032],
+    "autofocus": [4],
+    "clearable": [4],
+    "clearIcon": [1, "clear-icon"],
+    "color": [1],
+    "flat": [4],
+    "disabled": [4],
+    "loading": [4],
+    "loadingColor": [1, "loading-color"],
+    "hint": [1],
+    "persistHint": [4, "persist-hint"],
+    "placeholder": [1],
+    "multiple": [4],
+    "autocomplete": [4],
+    "required": [4],
+    "chips": [4],
+    "shape": [1],
+    "returnObject": [4, "return-object"],
+    "hideDetail": [4, "hide-detail"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-select"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaSelect$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaSelect = SallaSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaSelect, defineCustomElement };