@salla.sa/twilight-components 2.11.54 → 2.11.55

package/dist/cjs/salla-add-product-button.cjs.entry.js

@@ -91,10 +91,10 @@ const SallaAddProductButton = class {
       return '';
     }
     if (this.hasSubscribedOptions) {
-      return index.h(index.Host, null, index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true })));
+      return index.h(index.Host, null, index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true }), index.h("span", { class: "s-hidden" }, index.h("slot", null))));
     }
     if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
-      return index.h(index.Host, null, index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes())));
+      return index.h(index.Host, null, index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), index.h("span", { class: "s-hidden" }, index.h("slot", null))));
     }
     return index.h(index.Host, null, index.h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center" }), index.h("slot", null)));
   }
@@ -103,19 +103,20 @@ const SallaAddProductButton = class {
       return;
     }
     salla.event.on('product-options::change', async (data) => {
-      var _a;
+      var _a, _b;
       if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
         return;
       }
-      this.hasOutOfStockOption = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.hasOutOfStockOption());
+      this.hasSubscribedOptions = false;
       this.hasLabel = false;
-      if (!this.subscribedOptions || this.subscribedOptions === 'null') {
+      this.selectedOptions = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.getSelectedOptions());
+      this.hasOutOfStockOption = await ((_b = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _b === void 0 ? void 0 : _b.hasOutOfStockOption());
+      let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);
+      if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {
         return;
       }
-      //check if subscribedOptions are the selected now
-      this.hasSubscribedOptions = JSON.parse(this.subscribedOptions)
-        .filter(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)))
-        .length > 0;
+      const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];
+      this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)));
     });
   }
   componentDidRender() {

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

@@ -23249,12 +23249,34 @@ const SallaProductAvailability = class {
      * is current user already subscribed
      */
     this.isSubscribed = false;
+    this.handleSubmitOptions = async () => {
+      let payload = { id: this.productId };
+      if (!this.notifyOptionsAvailability) {
+        return payload;
+      }
+      let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+      let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
+      //if all options not selected, show message && throw exception
+      if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
+        let errorMessage = salla.lang.get('common.messages.required_fields');
+        salla.error(errorMessage);
+        throw errorMessage;
+      }
+      payload.options = [];
+      options.forEach(option => {
+        //inject numbers only, without zeros
+        if (option && !isNaN(option)) {
+          payload.options.push(Number(option));
+        }
+      });
+      return payload;
+    };
     // helpers
-    this.typing = (e, submitMethod) => {
+    this.typing = (e) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
-      e.key == 'Enter' && submitMethod();
+      e.keyCode === 13 && this.submit();
     };
     salla.lang.onLoaded(() => {
       var _a;
@@ -23276,28 +23298,6 @@ const SallaProductAvailability = class {
   channelsWatcher(newValue) {
     this.channels_ = !!newValue ? newValue.split(',') : [];
   }
-  async handleSubmitOptions() {
-    let payload = { id: this.productId };
-    if (!this.notifyOptionsAvailability) {
-      return payload;
-    }
-    let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
-    let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
-    //if all options not selected, show message && throw exception
-    if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
-      let errorMessage = salla.lang.get('common.messages.required_fields');
-      salla.error(errorMessage);
-      throw errorMessage;
-    }
-    payload.options = [];
-    options.forEach(option => {
-      //inject numbers only, without zeros
-      if (option && !isNaN(option)) {
-        payload.options.push(Number(option));
-      }
-    });
-    return payload;
-  }
   openModel() {
     this.handleSubmitOptions().then(isSuccess => isSuccess ? this.modal.open() : null);
   }
@@ -23320,9 +23320,23 @@ const SallaProductAvailability = class {
       .then(() => this.btn.disable())
       .then(() => salla.api.product.availabilitySubscribe(payload))
       .then(() => {
+      if (!this.notifyOptionsAvailability) {
+        salla.storage.set(`product-${this.productId}-subscribed`, true);
+        return;
+      }
+      if (payload.options.length) {
+        let options = salla.storage.get(`product-${this.productId}-subscribed-options`) || [];
+        let selectedOptionsString = payload.options.join(',');
+        if (!options.includes(selectedOptionsString)) {
+          options.push(selectedOptionsString);
+          salla.storage.set(`product-${this.productId}-subscribed-options`, options);
+        }
+        else {
+          salla.log('already subscribed to this options');
+        }
+      }
       this.isSubscribed = true;
-      salla.storage.set(`product-${this.productId}-subscribed`, true);
-    }) //no need to wait until finishing alert animation
+    })
       .then(() => this.btn.stop())
       .then(() => this.modal.close())
       .catch(() => this.btn.stop() && this.btn.enable());
@@ -23358,11 +23372,11 @@ const SallaProductAvailability = class {
   renderModal() {
     return (index.h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, index.h("span", { slot: 'icon', class: "s-product-availability-header-icon", innerHTML: BellRing }), index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
       index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
-      index.h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
+      index.h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
       index.h("span", { class: "s-product-availability-error-msg" })
     ] : '', this.channels_.includes('sms') ? [
       index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
-      index.h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+      index.h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e) })
     ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), index.h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
   }
   get host() { return index.getElement(this); }

package/dist/cjs/salla-product-options.cjs.entry.js

@@ -114,7 +114,7 @@ const SallaProductOptions = class {
     return selectedOptions;
   }
   /**
-   * Get the id's of the selected options.
+   * Report options form validity.
    * */
   async reportValidity() {
     let requiredElements = this.host.querySelectorAll('[required]');

package/dist/collection/components/salla-add-product-button/salla-add-product-button.js

@@ -82,11 +82,15 @@ export class SallaAddProductButton {
     }
     if (this.hasSubscribedOptions) {
       return h(Host, null,
-        h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true })));
+        h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true }),
+          h("span", { class: "s-hidden" },
+            h("slot", null))));
     }
     if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
       return h(Host, null,
-        h("salla-product-availability", Object.assign({}, this.getBtnAttributes())));
+        h("salla-product-availability", Object.assign({}, this.getBtnAttributes()),
+          h("span", { class: "s-hidden" },
+            h("slot", null))));
     }
     return h(Host, null,
       h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center" }),
@@ -97,19 +101,20 @@ export class SallaAddProductButton {
       return;
     }
     salla.event.on('product-options::change', async (data) => {
-      var _a;
+      var _a, _b;
       if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
         return;
       }
-      this.hasOutOfStockOption = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.hasOutOfStockOption());
+      this.hasSubscribedOptions = false;
       this.hasLabel = false;
-      if (!this.subscribedOptions || this.subscribedOptions === 'null') {
+      this.selectedOptions = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.getSelectedOptions());
+      this.hasOutOfStockOption = await ((_b = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _b === void 0 ? void 0 : _b.hasOutOfStockOption());
+      let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);
+      if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {
         return;
       }
-      //check if subscribedOptions are the selected now
-      this.hasSubscribedOptions = JSON.parse(this.subscribedOptions)
-        .filter(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)))
-        .length > 0;
+      const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];
+      this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)));
     });
   }
   componentDidRender() {

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

@@ -16,12 +16,34 @@ export class SallaProductAvailability {
      * is current user already subscribed
      */
     this.isSubscribed = false;
+    this.handleSubmitOptions = async () => {
+      let payload = { id: this.productId };
+      if (!this.notifyOptionsAvailability) {
+        return payload;
+      }
+      let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+      let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
+      //if all options not selected, show message && throw exception
+      if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
+        let errorMessage = salla.lang.get('common.messages.required_fields');
+        salla.error(errorMessage);
+        throw errorMessage;
+      }
+      payload.options = [];
+      options.forEach(option => {
+        //inject numbers only, without zeros
+        if (option && !isNaN(option)) {
+          payload.options.push(Number(option));
+        }
+      });
+      return payload;
+    };
     // helpers
-    this.typing = (e, submitMethod) => {
+    this.typing = (e) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
-      e.key == 'Enter' && submitMethod();
+      e.keyCode === 13 && this.submit();
     };
     salla.lang.onLoaded(() => {
       var _a;
@@ -43,28 +65,6 @@ export class SallaProductAvailability {
   channelsWatcher(newValue) {
     this.channels_ = !!newValue ? newValue.split(',') : [];
   }
-  async handleSubmitOptions() {
-    let payload = { id: this.productId };
-    if (!this.notifyOptionsAvailability) {
-      return payload;
-    }
-    let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
-    let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
-    //if all options not selected, show message && throw exception
-    if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
-      let errorMessage = salla.lang.get('common.messages.required_fields');
-      salla.error(errorMessage);
-      throw errorMessage;
-    }
-    payload.options = [];
-    options.forEach(option => {
-      //inject numbers only, without zeros
-      if (option && !isNaN(option)) {
-        payload.options.push(Number(option));
-      }
-    });
-    return payload;
-  }
   openModel() {
     this.handleSubmitOptions().then(isSuccess => isSuccess ? this.modal.open() : null);
   }
@@ -87,9 +87,23 @@ export class SallaProductAvailability {
       .then(() => this.btn.disable())
       .then(() => salla.api.product.availabilitySubscribe(payload))
       .then(() => {
+      if (!this.notifyOptionsAvailability) {
+        salla.storage.set(`product-${this.productId}-subscribed`, true);
+        return;
+      }
+      if (payload.options.length) {
+        let options = salla.storage.get(`product-${this.productId}-subscribed-options`) || [];
+        let selectedOptionsString = payload.options.join(',');
+        if (!options.includes(selectedOptionsString)) {
+          options.push(selectedOptionsString);
+          salla.storage.set(`product-${this.productId}-subscribed-options`, options);
+        }
+        else {
+          salla.log('already subscribed to this options');
+        }
+      }
       this.isSubscribed = true;
-      salla.storage.set(`product-${this.productId}-subscribed`, true);
-    }) //no need to wait until finishing alert animation
+    })
       .then(() => this.btn.stop())
       .then(() => this.modal.close())
       .catch(() => this.btn.stop() && this.btn.enable());
@@ -132,12 +146,12 @@ export class SallaProductAvailability {
       h("div", { class: "s-product-availability-body" },
         this.channels_.includes('email') ? [
           h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
-          h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
+          h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
           h("span", { class: "s-product-availability-error-msg" })
         ] : '',
         this.channels_.includes('sms') ? [
           h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
-          h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+          h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e) })
         ] : ''),
       h("div", { slot: "footer", class: "s-product-availability-footer" },
         h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')),

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

@@ -68,7 +68,7 @@ export class SallaProductOptions {
     return selectedOptions;
   }
   /**
-   * Get the id's of the selected options.
+   * Report options form validity.
    * */
   async reportValidity() {
     let requiredElements = this.host.querySelectorAll('[required]');
@@ -441,7 +441,7 @@ export class SallaProductOptions {
         "return": "Promise<boolean>"
       },
       "docs": {
-        "text": "Get the id's of the selected options.",
+        "text": "Report options form validity.",
         "tags": []
       }
     },

package/dist/components/salla-add-product-button.js

@@ -93,10 +93,10 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
       return '';
     }
     if (this.hasSubscribedOptions) {
-      return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true })));
+      return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true }), h("span", { class: "s-hidden" }, h("slot", null))));
     }
     if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
-      return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes())));
+      return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), h("span", { class: "s-hidden" }, h("slot", null))));
     }
     return h(Host, null, h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center" }), h("slot", null)));
   }
@@ -105,19 +105,20 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
       return;
     }
     salla.event.on('product-options::change', async (data) => {
-      var _a;
+      var _a, _b;
       if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
         return;
       }
-      this.hasOutOfStockOption = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.hasOutOfStockOption());
+      this.hasSubscribedOptions = false;
       this.hasLabel = false;
-      if (!this.subscribedOptions || this.subscribedOptions === 'null') {
+      this.selectedOptions = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.getSelectedOptions());
+      this.hasOutOfStockOption = await ((_b = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _b === void 0 ? void 0 : _b.hasOutOfStockOption());
+      let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);
+      if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {
         return;
       }
-      //check if subscribedOptions are the selected now
-      this.hasSubscribedOptions = JSON.parse(this.subscribedOptions)
-        .filter(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)))
-        .length > 0;
+      const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];
+      this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)));
     });
   }
   componentDidRender() {

package/dist/components/salla-product-availability2.js

@@ -25,12 +25,34 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
      * is current user already subscribed
      */
     this.isSubscribed = false;
+    this.handleSubmitOptions = async () => {
+      let payload = { id: this.productId };
+      if (!this.notifyOptionsAvailability) {
+        return payload;
+      }
+      let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+      let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
+      //if all options not selected, show message && throw exception
+      if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
+        let errorMessage = salla.lang.get('common.messages.required_fields');
+        salla.error(errorMessage);
+        throw errorMessage;
+      }
+      payload.options = [];
+      options.forEach(option => {
+        //inject numbers only, without zeros
+        if (option && !isNaN(option)) {
+          payload.options.push(Number(option));
+        }
+      });
+      return payload;
+    };
     // helpers
-    this.typing = (e, submitMethod) => {
+    this.typing = (e) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
-      e.key == 'Enter' && submitMethod();
+      e.keyCode === 13 && this.submit();
     };
     salla.lang.onLoaded(() => {
       var _a;
@@ -52,28 +74,6 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
   channelsWatcher(newValue) {
     this.channels_ = !!newValue ? newValue.split(',') : [];
   }
-  async handleSubmitOptions() {
-    let payload = { id: this.productId };
-    if (!this.notifyOptionsAvailability) {
-      return payload;
-    }
-    let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
-    let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
-    //if all options not selected, show message && throw exception
-    if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
-      let errorMessage = salla.lang.get('common.messages.required_fields');
-      salla.error(errorMessage);
-      throw errorMessage;
-    }
-    payload.options = [];
-    options.forEach(option => {
-      //inject numbers only, without zeros
-      if (option && !isNaN(option)) {
-        payload.options.push(Number(option));
-      }
-    });
-    return payload;
-  }
   openModel() {
     this.handleSubmitOptions().then(isSuccess => isSuccess ? this.modal.open() : null);
   }
@@ -96,9 +96,23 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
       .then(() => this.btn.disable())
       .then(() => salla.api.product.availabilitySubscribe(payload))
       .then(() => {
+      if (!this.notifyOptionsAvailability) {
+        salla.storage.set(`product-${this.productId}-subscribed`, true);
+        return;
+      }
+      if (payload.options.length) {
+        let options = salla.storage.get(`product-${this.productId}-subscribed-options`) || [];
+        let selectedOptionsString = payload.options.join(',');
+        if (!options.includes(selectedOptionsString)) {
+          options.push(selectedOptionsString);
+          salla.storage.set(`product-${this.productId}-subscribed-options`, options);
+        }
+        else {
+          salla.log('already subscribed to this options');
+        }
+      }
       this.isSubscribed = true;
-      salla.storage.set(`product-${this.productId}-subscribed`, true);
-    }) //no need to wait until finishing alert animation
+    })
       .then(() => this.btn.stop())
       .then(() => this.modal.close())
       .catch(() => this.btn.stop() && this.btn.enable());
@@ -134,11 +148,11 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
   renderModal() {
     return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, h("span", { slot: 'icon', class: "s-product-availability-header-icon", innerHTML: BellRing }), h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
       h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
-      h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
+      h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
       h("span", { class: "s-product-availability-error-msg" })
     ] : '', this.channels_.includes('sms') ? [
       h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
-      h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+      h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e) })
     ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
   }
   get host() { return this; }

package/dist/components/salla-product-options.js

@@ -120,7 +120,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     return selectedOptions;
   }
   /**
-   * Get the id's of the selected options.
+   * Report options form validity.
    * */
   async reportValidity() {
     let requiredElements = this.host.querySelectorAll('[required]');

package/dist/esm/salla-add-product-button.entry.js

@@ -87,10 +87,10 @@ const SallaAddProductButton = class {
       return '';
     }
     if (this.hasSubscribedOptions) {
-      return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true })));
+      return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true }), h("span", { class: "s-hidden" }, h("slot", null))));
     }
     if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
-      return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes())));
+      return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), h("span", { class: "s-hidden" }, h("slot", null))));
     }
     return h(Host, null, h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center" }), h("slot", null)));
   }
@@ -99,19 +99,20 @@ const SallaAddProductButton = class {
       return;
     }
     salla.event.on('product-options::change', async (data) => {
-      var _a;
+      var _a, _b;
       if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
         return;
       }
-      this.hasOutOfStockOption = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.hasOutOfStockOption());
+      this.hasSubscribedOptions = false;
       this.hasLabel = false;
-      if (!this.subscribedOptions || this.subscribedOptions === 'null') {
+      this.selectedOptions = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.getSelectedOptions());
+      this.hasOutOfStockOption = await ((_b = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _b === void 0 ? void 0 : _b.hasOutOfStockOption());
+      let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);
+      if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {
         return;
       }
-      //check if subscribedOptions are the selected now
-      this.hasSubscribedOptions = JSON.parse(this.subscribedOptions)
-        .filter(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)))
-        .length > 0;
+      const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];
+      this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)));
     });
   }
   componentDidRender() {

package/dist/esm/salla-button_36.entry.js

@@ -23245,12 +23245,34 @@ const SallaProductAvailability = class {
      * is current user already subscribed
      */
     this.isSubscribed = false;
+    this.handleSubmitOptions = async () => {
+      let payload = { id: this.productId };
+      if (!this.notifyOptionsAvailability) {
+        return payload;
+      }
+      let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+      let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
+      //if all options not selected, show message && throw exception
+      if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
+        let errorMessage = salla.lang.get('common.messages.required_fields');
+        salla.error(errorMessage);
+        throw errorMessage;
+      }
+      payload.options = [];
+      options.forEach(option => {
+        //inject numbers only, without zeros
+        if (option && !isNaN(option)) {
+          payload.options.push(Number(option));
+        }
+      });
+      return payload;
+    };
     // helpers
-    this.typing = (e, submitMethod) => {
+    this.typing = (e) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
-      e.key == 'Enter' && submitMethod();
+      e.keyCode === 13 && this.submit();
     };
     salla.lang.onLoaded(() => {
       var _a;
@@ -23272,28 +23294,6 @@ const SallaProductAvailability = class {
   channelsWatcher(newValue) {
     this.channels_ = !!newValue ? newValue.split(',') : [];
   }
-  async handleSubmitOptions() {
-    let payload = { id: this.productId };
-    if (!this.notifyOptionsAvailability) {
-      return payload;
-    }
-    let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
-    let options = Object.values(await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.getSelectedOptionsData()) || {});
-    //if all options not selected, show message && throw exception
-    if (options.length && !await (optionsElement === null || optionsElement === void 0 ? void 0 : optionsElement.reportValidity())) {
-      let errorMessage = salla.lang.get('common.messages.required_fields');
-      salla.error(errorMessage);
-      throw errorMessage;
-    }
-    payload.options = [];
-    options.forEach(option => {
-      //inject numbers only, without zeros
-      if (option && !isNaN(option)) {
-        payload.options.push(Number(option));
-      }
-    });
-    return payload;
-  }
   openModel() {
     this.handleSubmitOptions().then(isSuccess => isSuccess ? this.modal.open() : null);
   }
@@ -23316,9 +23316,23 @@ const SallaProductAvailability = class {
       .then(() => this.btn.disable())
       .then(() => salla.api.product.availabilitySubscribe(payload))
       .then(() => {
+      if (!this.notifyOptionsAvailability) {
+        salla.storage.set(`product-${this.productId}-subscribed`, true);
+        return;
+      }
+      if (payload.options.length) {
+        let options = salla.storage.get(`product-${this.productId}-subscribed-options`) || [];
+        let selectedOptionsString = payload.options.join(',');
+        if (!options.includes(selectedOptionsString)) {
+          options.push(selectedOptionsString);
+          salla.storage.set(`product-${this.productId}-subscribed-options`, options);
+        }
+        else {
+          salla.log('already subscribed to this options');
+        }
+      }
       this.isSubscribed = true;
-      salla.storage.set(`product-${this.productId}-subscribed`, true);
-    }) //no need to wait until finishing alert animation
+    })
       .then(() => this.btn.stop())
       .then(() => this.modal.close())
       .catch(() => this.btn.stop() && this.btn.enable());
@@ -23354,11 +23368,11 @@ const SallaProductAvailability = class {
   renderModal() {
     return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, h("span", { slot: 'icon', class: "s-product-availability-header-icon", innerHTML: BellRing }), h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
       h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
-      h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
+      h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
       h("span", { class: "s-product-availability-error-msg" })
     ] : '', this.channels_.includes('sms') ? [
       h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
-      h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+      h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e) })
     ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
   }
   get host() { return getElement(this); }