@salla.sa/twilight-components 1.0.35 → 1.0.37

package/dist/collection/components/salla-localization/salla-localization.js

@@ -9,10 +9,11 @@ import Helper from "../../Helpers/Helper";
 export class SallaLocalization {
   constructor() {
     var _a, _b;
-    this.language = salla.config.get('language', {});
-    this.currency = salla.config.get('currency', {});
+    this.language = salla.config.get('user.language_code');
+    this.currency = salla.config.get('user.currency_code');
     this.languages = [];
     this.currencies = [];
+    this.isLoading = true;
     Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
     salla.event.on('languages::translations.loaded', () => {
@@ -37,9 +38,10 @@ export class SallaLocalization {
    * Show the component
    */
   async show() {
-    return this.getLanguages()
+    return this.modal.show()
+      .then(() => this.getLanguages())
       .then(() => this.getCurrencies())
-      .then(() => this.modal.show());
+      .then(() => this.isLoading = false);
   }
   /**
    * Hide the component
@@ -54,52 +56,49 @@ export class SallaLocalization {
     return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = data);
   }
   onChangeCurrency(event) {
-    this.currency = salla.config.get('currencies.' + event.target.value);
+    this.currency = event.target.value;
   }
   onChangeLanguage(event) {
-    this.language = salla.config.get('languages.' + event.target.value);
+    this.language = event.target.value;
   }
   async submit() {
     let url;
-    console.log('this.currency.code::::', this.currency, this.currency.code); //todo:: remove it
     this.btn.load()
-      .then(() => this.currency.code === salla.config.get('user.currency_code', 'SAR') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
-      .then(() => this.language.code === salla.config.get('user.language_code', 'ar') || (url = this.language.url))
+      .then(() => this.currency === salla.config.get('user.currency_code', 'SAR') || ((url = window.location.href) && salla.currency.api.change(this.currency)))
+      .then(() => this.language === salla.config.get('user.language_code', 'ar') || (url = salla.helpers.addParamsToUrl('lang', this.language)))
       .then(() => this.btn.stop())
       .then(() => this.hide())
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (h("salla-modal", { id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" },
-      h("div", { slot: "header" },
-        h("slot", { name: "header" })),
+    return (h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
       h("div", { class: "s-localization-inner" },
         this.languages.length > 1 ?
           h("div", { class: "s-localization-section" },
             h("label", { class: "s-localization-title" }, this.languagesTitle),
             h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
               this.languages.map(lang => h("div", { class: "s-localization-item" },
-                h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }),
+                h("input", { class: "s-localization-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", { 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-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
+              h("select", { class: "s-localization-select", name: "currency", 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-section" },
             h("label", { class: "s-localization-title" }, this.currenciesTitle),
             h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
               this.currencies.map(currency => h("div", { class: "s-localization-item" },
-                h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }),
+                h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }),
                 h("div", { 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-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
-          : ''),
-      h("slot", { name: "footer" },
-        h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))));
+              h("select", { class: "s-localization-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", { wide: true, 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
@@ -113,22 +112,20 @@ export class SallaLocalization {
     "languages": {},
     "currencies": {},
     "languagesTitle": {},
-    "currenciesTitle": {}
+    "currenciesTitle": {},
+    "isLoading": {}
   }; }
   static get methods() { return {
     "show": {
       "complexType": {
-        "signature": "() => Promise<HTMLElement>",
+        "signature": "() => Promise<boolean>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
           }
         },
-        "return": "Promise<HTMLElement>"
+        "return": "Promise<boolean>"
       },
       "docs": {
         "text": "Show the component",

package/dist/collection/components/salla-login/salla-login.css

@@ -9,8 +9,4 @@
  */
 salla-verify {
   display: block;
-}
-
-#salla-login .s-modal-body {
-  overflow: inherit;
 }

package/dist/collection/components/salla-login/salla-login.js

@@ -84,14 +84,13 @@ export class SallaLogin {
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');
     salla.event.on('languages::translations.loaded', () => {
-      var _a;
+      var _a, _b, _c, _d;
       this.title = salla.lang.get('blocks.header.login');
       this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
       this.loginText = salla.lang.get('blocks.header.login');
       this.smsLabel = salla.lang.get('blocks.header.sms');
       this.mobileLabel = salla.lang.get('common.elements.mobile');
       this.emailLabel = salla.lang.get('common.elements.email');
-      this.enterText = salla.lang.get('blocks.header.enter');
       this.bySMSText = salla.lang.get('blocks.header.login_by_sms');
       this.byEmailText = salla.lang.get('blocks.header.login_by_email');
       this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
@@ -100,6 +99,9 @@ export class SallaLogin {
       this.firstNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.firstNameLabel });
       this.lastNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.lastNameLabel });
       (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
+      (_b = this.smsBtn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('blocks.header.enter'));
+      (_c = this.emailBtn) === null || _c === void 0 ? void 0 : _c.setText(salla.lang.get('blocks.header.enter'));
+      (_d = this.regBtn) === null || _d === void 0 ? void 0 : _d.setText(salla.lang.get('blocks.header.register'));
     });
     salla.auth.event.onVerificationFailed(() => {
       //
@@ -199,7 +201,7 @@ export class SallaLogin {
             h("slot", { name: "before-login-mobile" }),
             h("label", { class: "s-login-label" }, this.mobileLabel),
             h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }),
-            h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, this.enterText),
+            h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')),
             this.isEmailAllowed ?
               h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : '',
             h("slot", { name: "after-login-mobile" })) : '',
@@ -209,7 +211,7 @@ export class SallaLogin {
             h("label", { class: "s-login-label" }, this.emailLabel),
             h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-input s-ltr" }),
             h("span", { class: "s-login-error-message" }),
-            h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, this.enterText),
+            h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')),
             this.isMobileAllowed ?
               h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '',
             h("slot", { name: "after-login-email" })) : '',

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

@@ -90,7 +90,8 @@ export class SallaModal {
     return this.host;
   }
   toggleModal(isOpen) {
-    Helper.toggleElement(this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
+    const body = this.host.querySelector('.s-modal-body');
+    Helper.toggleElement(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       //todo:: use united class names
       .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
@@ -126,14 +127,15 @@ export class SallaModal {
   render() {
     this.host.id = this.host.id || 'salla-modal';
     return (h(Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" },
+      h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
       h("div", { class: "s-modal-wrapper" },
-        h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
         h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"),
-        h("div", { class: 's-modal-body s-modal-scroll-y ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading
-          ? h("div", { class: "s-modal-loader-wrap" },
+        h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
+          h("div", { class: "s-modal-loader-wrap" },
             h("span", { class: "s-modal-loader" }))
           :
-            [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } },
+            [
+              h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } },
                 this.isClosable ?
                   h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" },
                     h("span", { class: "sicon-cancel" }))

package/dist/collection/components/salla-offer/salla-offer.css

@@ -0,0 +1,23 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+.s-offer-body {
+  -webkit-overflow-scrolling: touch;
+}
+.s-offer-body::-webkit-scrollbar {
+  display: none;
+}
+
+.s-offer-next-btn {
+  background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
+}
+
+.s-offer-prev-btn {
+  background: linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
+}

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

@@ -7,12 +7,17 @@ import Helper from "../../Helpers/Helper";
  */
 export class SallaOffer {
   constructor() {
-    var _a, _b, _c;
+    var _a, _b;
     this.offer = null;
+    this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
+    this.remember_my_choice = salla.lang.get('commone.remember_my_choice');
     Helper.setHost(this.host);
-    this.headerSlot = ((_a = Helper.getElement('[slot="header"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<b class="s-offer-title">{name}</b><h3 class="s-offer-subtitle">{message}</h3>';
-    this.categorySlot = ((_b = Helper.getElement('[slot="category"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>';
-    this.productSlot = ((_c = Helper.getElement('[slot="product"]')) === null || _c === void 0 ? void 0 : _c.innerHTML) || this.defaultProductSlot();
+    salla.event.on('languages::translations.loaded', () => {
+      this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
+      this.remember_my_choice = salla.lang.get('common.remember_my_choice');
+    });
+    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>';
+    this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
     salla.offer.event.onExisted(data => {
       //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
       if (salla.localData.get('remember-offer-' + data.offer.offer_id)) {
@@ -28,7 +33,8 @@ export class SallaOffer {
    */
   async show(product_id) {
     //TODO:: make sure there is only one offer
-    return salla.api.offer.details(product_id).then(response => this.offer = response.data[0]);
+    return salla.api.offer.details(product_id)
+      .then(response => this.showOffer(response.data[0]));
   }
   /**
    * Show offer details
@@ -36,6 +42,8 @@ export class SallaOffer {
    */
   async showOffer(offer) {
     this.offer = offer;
+    this.offer_name = offer.name;
+    this.offer_message = offer.message;
     return this.modal.show();
   }
   rememberMe(event) {
@@ -49,7 +57,7 @@ export class SallaOffer {
       .finally(() => this['stop']());
   }
   defaultProductSlot() {
-    return '<a href={url} class="s-offer-product-image"><img class="s-offer-product-img" src="{image}" /></a>' +
+    return '<a href={url} class="s-offer-product-image-wrap"><img class="s-offer-product-image" src="{image}" /></a>' +
       '<div class="s-offer-product-info">' +
       '   <a href={url} class="s-offer-product-name">{name}</a>' +
       '   <div class="s-offer-product-price">{price}</div>' +
@@ -57,43 +65,98 @@ export class SallaOffer {
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
-      ? [h("div", { class: "s-offer-header", innerHTML: this.headerSlot
-            .replace(/\{name\}/g, this.offer.name)
-            .replace(/\{message\}/g, this.offer.message) }),
-        h("div", { class: "s-offer-body" }, ((_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-badge", innerHTML: this.categorySlot
-              .replace(/\{name\}/g, category.name)
-              .replace(/\{url\}/g, category.urls.customer) }))
-          : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-product", id: 'product_' + product.id, innerHTML: this.productSlot
-              .replace(/\{name\}/g, product.name)
-              .replace(/\{url\}/g, product.url)
-              .replace(/\{image\}/g, product.thumbnail)
-              .replace(/\{price\}/g, product.has_special_price
-              ? salla.money(product.price) + '<span class="s-offer-product-old-price">' + salla.money(product.regular_price) + '</span>'
-              : salla.money(product.price)) },
-            h("salla-button", { "btn-style": 'outline-primary', "data-id": product.id, onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart'))))),
+    return h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+      ? [h("div", { class: "s-offer-scrolled-slider-wrap" },
+          h("div", { class: "s-offer-body s-offer-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-badge s-offer-slider-item", innerHTML: this.categorySlot
+                .replace(/\{name\}/g, category.name)
+                .replace(/\{url\}/g, category.urls.customer) }))
+            : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-product s-offer-slider-item", id: 'product_' + product.id, innerHTML: this.productSlot
+                .replace(/\{name\}/g, product.name)
+                .replace(/\{url\}/g, product.url)
+                .replace(/\{image\}/g, product.thumbnail)
+                .replace(/\{price\}/g, product.has_special_price
+                ? salla.money(product.price) + '<span class="s-offer-product-old-price">' + salla.money(product.regular_price) + '</span>'
+                : salla.money({ amount: product.price, currency: salla.config.get('user').currency_code })) },
+              h("div", { class: "s-offer-btn-wrap" },
+                h("salla-button", { wide: true, "btn-style": 'outline-primary', "data-id": product.id, "loader-position": "center", onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart')))))),
+          h("div", { class: "s-offer-slider-nav" },
+            h("button", { class: "s-offer-nav-btn s-offer-prev-btn" },
+              h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_right" })),
+            h("button", { class: "s-offer-nav-btn s-offer-next-btn" },
+              h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_left" })))),
         h("div", { class: "s-offer-footer", slot: "footer" },
           this.offer.expiry_date ?
             h("p", { class: "s-offer-expiry" },
-              salla.lang.get('pages.products.offer_expires_in'),
+              this.offer_expires_in,
               " ",
               this.offer.expiry_date)
             : '',
           h("label", { class: "s-offer-remember-label" },
             h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }),
             "\u00A0 ",
-            salla.lang.get('common.remember_my_choice'))),
+            this.remember_my_choice)),
       ] : '');
   }
   componentDidRender() {
     //todo:: know from where there is hidden attributes to the doms🤔
     //todo:: add animation
     this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
+    // Sooo mini Slider
+    if (this.offer && window.screen.width > 639) {
+      let sliderWrap = this.host.querySelector('.s-offer-scrolled-slider-wrap'), slider = this.host.querySelector('.s-offer-scrolled-slider'), navButtons = this.host.querySelectorAll('.s-offer-nav-btn'), nexBtn = this.host.querySelector('.s-offer-next-btn'), prevBtn = this.host.querySelector('.s-offer-prev-btn'), items = this.host.querySelectorAll('.s-offer-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      current = 0, // current slide
+      slidesToScroll = 3, itemsLength = items.length, itemSize = items[0].offsetWidth, sliderSize = itemsLength * itemSize, sliderWrapperSize = sliderWrap.offsetWidth, sliderInvisibleSize = sliderSize - sliderWrapperSize, isRTL = document.body.classList.contains('rtl') ? true : false;
+      if (sliderInvisibleSize > sliderNavMargin)
+        nexBtn.classList.add('s-offer-btn-is-active');
+      window.onresize = function () {
+        sliderWrapperSize = sliderWrap.offsetWidth;
+        sliderInvisibleSize = sliderSize - sliderWrapperSize;
+      };
+      slider.addEventListener('scroll', function () {
+        let sliderPosition = Math.abs(slider.scrollLeft);
+        let sliderEndOffset = sliderInvisibleSize - sliderNavMargin;
+        // show & hide the navigation btns depending on scroll position
+        if (sliderPosition <= sliderNavMargin) {
+          nexBtn.classList.add('s-offer-btn-is-active');
+          prevBtn.classList.remove('s-offer-btn-is-active');
+        }
+        else if (sliderPosition < sliderEndOffset) {
+          // show both btns in the middle
+          nexBtn.classList.add('s-offer-btn-is-active');
+          prevBtn.classList.add('s-offer-btn-is-active');
+        }
+        else if (sliderPosition >= sliderEndOffset) {
+          nexBtn.classList.remove('s-offer-btn-is-active');
+          prevBtn.classList.add('s-offer-btn-is-active');
+        }
+      });
+      // Navigation
+      navButtons.forEach(btn => {
+        btn.addEventListener('click', function () {
+          btn.classList.contains('s-offer-next-btn') ? current++ : current--;
+          slider.scrollTo({
+            top: 0,
+            left: itemSize * slidesToScroll * current * (isRTL ? -1 : 1),
+            behavior: 'smooth'
+          });
+        });
+      });
+    }
   }
   static get is() { return "salla-offer"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-offer.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-offer.css"]
+  }; }
   static get states() { return {
-    "offer": {}
+    "offer": {},
+    "offer_name": {},
+    "offer_message": {},
+    "offer_expires_in": {},
+    "remember_my_choice": {}
   }; }
   static get methods() { return {
     "show": {

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

@@ -24,7 +24,10 @@ export class SallaProductAvailability {
       return this.btn.load()
         .then(() => this.btn.disable())
         .then(() => salla.api.product.availabilitySubscribe(data))
-        .then(() => this.isSubscribed = true) //no need to wait until finishing alert animation
+        .then(() => {
+        this.isSubscribed = true;
+        salla.localData.set(`product-${this.productId}-subscribed`, true);
+      }) //no need to wait until finishing alert animation
         .then(() => this.btn.stop())
         .then(() => this.modal.hide())
         .catch(() => this.btn.stop() && this.btn.enable());
@@ -36,26 +39,27 @@ export class SallaProductAvailability {
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
-    if (this.isUser) {
-      return;
-    }
-    this.channelsWatcher(this.channels);
-    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
-    this.host.removeAttribute('title');
     salla.event.on('languages::translations.loaded', () => {
       var _a, _b, _c, _d;
+      // console.log('translations:', salla.lang);
+      this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
       this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
       this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
       this.mobileLabel = salla.lang.get('common.elements.mobile');
       this.emailLabel = salla.lang.get('common.elements.email');
       this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
-      this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
       this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
       (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title_);
       (_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('common.elements.submit'));
       (_c = this.cancelBtn) === null || _c === void 0 ? void 0 : _c.setText(salla.lang.get('common.elements.cancel'));
       (_d = this.inlineBtn) === null || _d === void 0 ? void 0 : _d.setText(salla.lang.get('pages.products.notify_availability'));
     });
+    if (this.isUser)
+      return;
+    this.channelsWatcher(this.channels);
+    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+    this.host.removeAttribute('title');
+    this.isVisitorSubscribed = salla.localData.get(`product-${this.productId}-subscribed`);
   }
   channelsWatcher(newValue) {
     this.channels_ = newValue.split(',');
@@ -80,14 +84,14 @@ export class SallaProductAvailability {
   }
   render() {
     return (h(Host, null,
-      this.isSubscribed
+      this.isSubscribed || this.isVisitorSubscribed
         ? h("div", { class: "s-product-availability-subscribed" },
           h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }),
           " ",
           this.subscribedMessage)
         : h("slot", null,
           h("salla-button", { onClick: () => this.isUser ? this.submit() : this.modal.show(), wide: true, ref: btn => this.inlineBtn = btn }, salla.lang.get('pages.products.notify_availability'))),
-      this.isUser || this.isSubscribed ? '' : this.renderModal()));
+      this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
   }
   renderModal() {
     return (h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "sm" },
@@ -168,7 +172,8 @@ export class SallaProductAvailability {
     "emailPlaceholder": {},
     "subscribedMessage": {},
     "title_": {},
-    "emailErrorMsg": {}
+    "emailErrorMsg": {},
+    "isVisitorSubscribed": {}
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{

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

@@ -56,7 +56,7 @@ export class SallaRating {
       // Prevent form from submitting
       event.preventDefault();
       // Get the selected star - activeElement is not supported in safari
-      let activeStars = event.target.querySelectorAll('.s-rating-btn-star.hovered');
+      let activeStars = event.target.querySelectorAll('.s-rating-btn-star.s-rating-hovered');
       let selected = activeStars[activeStars.length - 1];
       if (!selected)
         return;
@@ -66,7 +66,7 @@ export class SallaRating {
       // Loop through each star, and add or remove the `.selected` class to toggle highlighting
       event.target
         .querySelectorAll('.s-rating-btn-star')
-        .forEach((star, index) => Helper.toggleElement(star, 'selected', 'un-selected', () => index < selectedIndex));
+        .forEach((star, index) => Helper.toggleElement(star, 's-rating-selected', 's-rating-un-selected', () => index < selectedIndex));
       // Remove aria-pressed from any previously selected star
       event.target.querySelectorAll('.s-rating-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
       // Add aria-pressed role to the selected button
@@ -91,13 +91,12 @@ export class SallaRating {
     }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
-    this.nextBtn.querySelector('.s-button-text').innerHTML = nextType
-      ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
-      : salla.lang.get('pages.rating.send_ratings');
+    this.nextBtn.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'); });
   }
   highlightSelectedStars() {
-    let hover = ['hovered'];
+    let hover = ['s-rating-hovered'];
     Helper.all('.s-rating-stars-element', el => {
       let starElements = el.querySelectorAll('.s-rating-btn-star');
       // remove hovered state from stars ---
@@ -151,12 +150,12 @@ export class SallaRating {
     let comment = rating.querySelector('.s-rating-comment');
     let validationMessage = rating.querySelector('.s-rating-validation-msg');
     if (stars && comment.value && comment.value.length > 3) {
-      comment.classList.remove('s-rating-has-error');
+      comment.classList.remove('s-has-error');
       validationMessage.innerHTML = '';
       return;
     }
     type = type || rating['dataset'].type;
-    Helper.toggleElement(comment, 'save', 's-rating-has-error', el => el.value.length > 3);
+    Helper.toggleElement(comment, 'save', 's-has-error', el => el.value.length > 3);
     throw validationMessage.innerHTML = stars
       ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
       : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');

package/dist/collection/components/salla-search/salla-search.js

@@ -27,7 +27,7 @@ export class SallaSearch {
       '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
       '</div>' +
       '<div class="s-search-product-details">' +
-      '  <div class="s-search-product-name">{name}</div> <div class="s-search-product-price">{price}</div>' +
+      '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price}</div>' +
       '</div>';
   }
   //todo:: reset data when closing

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { S as SallaLogin, a as SallaSearch } from './salla-search-90231876.js';
+export { S as SallaLogin, a as SallaSearch } from './salla-search-8bb6a0da.js';
 import './index-a1bf769d.js';
 import './Helper-7162a06c.js';

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["salla-button_7",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]],[4,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32]}]]],["salla-branches",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-offer",[[0,"salla-offer",{"offer":[32],"show":[64],"showOffer":[64]}]]],["salla-rating",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
+  return bootstrapLazy([["salla-button_7",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]],[0,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-branches",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-offer",[[0,"salla-offer",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
   });
 };