@salla.sa/twilight-components 1.0.73 → 1.0.75

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

@@ -16,9 +16,9 @@ const SallaAddProductButton = class {
     this.success = index.createEvent(this, "success", 7);
     this.failed = index.createEvent(this, "failed", 7);
     this.hostAttributes = {};
-    this.hasNotText = false;
+    this.hasLabel = false;
     this.channels = null;
-    this.quantity = 1;
+    this.quantity = 0;
     this.donatingAmount = 0;
     this.productStatus = 'sale';
     this.productType = 'product';
@@ -31,29 +31,29 @@ const SallaAddProductButton = class {
     if (this.productStatus === 'sale') {
       return salla.lang.get('pages.cart.add_to_cart');
     }
-    if (this.productType === 'product') {
+    if (this.productType !== 'donating') {
       return salla.lang.get('pages.products.out_of_stock');
     }
     // donating
     return salla.lang.get('pages.products.donation_exceed');
   }
-  componentWillLoad() {
-    this.hasNotText = !this.host.innerHTML || this.host.innerHTML === "" || this.host.innerHTML.trim().replace(/\s/g, '').localeCompare("<!---->") === 0;
-  }
-  componentDidRender() {
-    if (this.buttonLabel && this.hasNotText) {
-      salla.event.once('languages::translations.loaded', () => {
-        this.buttonLabel.innerHTML = this.getLabel() || 'اضافة للسلة';
-      });
-    }
-  }
   addProductToCart(event) {
+    // we want to ignore the click action when the type of button is submit a form
+    if (this.hostAttributes['type'] === 'submit') {
+      return false;
+    }
     event.preventDefault();
-    return salla.cart.addItem({
+    /**
+     * by default the quick add is just an alias for add item function
+     * but its work only when the id is the only value is passed via the object
+     * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
+     */
+    return salla.cart.quickAdd(Object.entries({
       id: this.productId,
       donating_amount: this.donatingAmount,
       quantity: this.quantity
-    }).then((response) => this.success.emit(response))
+    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {}))
+      .then((response) => this.success.emit(response))
       .catch((error) => this.failed.emit(error));
   }
   getBtnAttributes() {
@@ -64,10 +64,17 @@ const SallaAddProductButton = class {
     }
     return this.hostAttributes;
   }
+  componentWillLoad() {
+    this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
+  }
   render() {
     return (index.h(index.Host, null, this.productStatus === 'out-and-notify' && this.channels ?
       index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), index.h("slot", null)) :
-      index.h("salla-button", Object.assign({ onClick: (event) => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus === 'out' }), index.h("slot", null), index.h("span", { ref: (el) => this.buttonLabel = el }))));
+      index.h("salla-button", Object.assign({ ref: btn => this.btn = btn, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), index.h("slot", null))));
+  }
+  componentDidRender() {
+    //if label not passed, get label
+    this.hasLabel || salla.lang.onLoaded(() => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
   }
   get host() { return index.getElement(this); }
 };
@@ -350,9 +357,15 @@ const SallaProductAvailability = class {
         return salla.api.product.availabilitySubscribe(this.productId)
           .then(() => this.isSubscribed = true);
       }
-      let { mobile, countryCode } = await this.mobileInput.getValues(), data = { id: this.productId, country_code: countryCode };
-      mobile !== '' && (data['mobile'] = mobile);
-      this.email.value !== '' && (data['email'] = this.email.value);
+      let data = { id: this.productId };
+      if (this.channels_.includes('sms')) {
+        let { mobile, countryCode } = await this.mobileInput.getValues();
+        data['country_code'] = countryCode;
+        data['mobile'] = mobile;
+      }
+      if (this.channels_.includes('email')) {
+        this.email.value !== '' && (data['email'] = this.email.value);
+      }
       await this.validateform();
       return this.btn.load()
         .then(() => this.btn.disable())
@@ -372,7 +385,7 @@ const SallaProductAvailability = class {
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a, _b, _c, _d;
       // console.log('translations:', salla.lang);
       this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
@@ -451,7 +464,7 @@ const SallaSearch = class {
     Helper.Helper.setHost(this.host);
     this.productSlot = ((_a = Helper.Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
     salla.event.on('search::show', () => this.modal.show());
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.placeholder = salla.lang.get('blocks.header.search_placeholder');
       this.noResultsText = salla.lang.get('common.elements.no_options');
     });
@@ -1913,7 +1926,7 @@ const SallaTelInput = class {
     this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
     this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
     Helper.Helper.setHost(this.host);
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.mobileLabel = salla.lang.get('common.elements.mobile');
       this.countryCodeLabel = salla.lang.get('common.country_code');
       this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });

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

@@ -42,7 +42,7 @@ const SallaBranches = class {
         : 'التسوق من فرع آخر';
     };
     salla.event.on('branches::show', btn => btn.dataset.target == this.host.id && this.show());
-    salla.event.on('languages::translations.loaded', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
+    salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
   }
   //todo:: add description for all @methods
   async show() {

package/dist/cjs/salla-infinite-scroll.cjs.entry.js

@@ -41,7 +41,7 @@ const SallaInfiniteScroll = class {
         <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
     this.btnLoader = this.status.querySelector('.s-button-loader');
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
       this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
       this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');

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

@@ -21,7 +21,7 @@ const SallaLocalizationModal = class {
     this.currency = salla.config.get('user.currency_code');
     Helper.Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a;
       this.languagesTitle = salla.lang.get('common.titles.language');
       this.currenciesTitle = salla.lang.get('common.titles.currency');

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

@@ -81,7 +81,7 @@ const SallaLoginModal = class {
     };
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a, _b, _c, _d;
       this.title = salla.lang.get('blocks.header.login');
       this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');

package/dist/cjs/salla-offer-modal.cjs.entry.js

@@ -20,7 +20,7 @@ const SallaOfferModal = class {
     this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
     this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
     Helper.Helper.setHost(this.host);
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
       this.remember_my_choice = salla.lang.get('common.remember_my_choice');
       this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');

package/dist/cjs/salla-rating-modal.cjs.entry.js

@@ -31,7 +31,7 @@ const SallaRatingModal = class {
     this.next = salla.lang.get('common.elements.next');
     Helper.Helper.setHost(this.host);
     salla.event.on('rating::show', () => this.show());
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
       this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
       this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');

package/dist/cjs/salla-verify-modal.cjs.entry.js

@@ -33,7 +33,7 @@ const SallaVerifyModal = class {
         this.show(data);
       });
     }
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a;
       this.title = salla.lang.get('pages.profile.verify_title');
       (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));

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

@@ -5,9 +5,9 @@ import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 export class SallaAddProductButton {
   constructor() {
     this.hostAttributes = {};
-    this.hasNotText = false;
+    this.hasLabel = false;
     this.channels = null;
-    this.quantity = 1;
+    this.quantity = 0;
     this.donatingAmount = 0;
     this.productStatus = 'sale';
     this.productType = 'product';
@@ -20,29 +20,29 @@ export class SallaAddProductButton {
     if (this.productStatus === 'sale') {
       return salla.lang.get('pages.cart.add_to_cart');
     }
-    if (this.productType === 'product') {
+    if (this.productType !== 'donating') {
       return salla.lang.get('pages.products.out_of_stock');
     }
     // donating
     return salla.lang.get('pages.products.donation_exceed');
   }
-  componentWillLoad() {
-    this.hasNotText = !this.host.innerHTML || this.host.innerHTML === "" || this.host.innerHTML.trim().replace(/\s/g, '').localeCompare("<!---->") === 0;
-  }
-  componentDidRender() {
-    if (this.buttonLabel && this.hasNotText) {
-      salla.event.once('languages::translations.loaded', () => {
-        this.buttonLabel.innerHTML = this.getLabel() || 'اضافة للسلة';
-      });
-    }
-  }
   addProductToCart(event) {
+    // we want to ignore the click action when the type of button is submit a form
+    if (this.hostAttributes['type'] === 'submit') {
+      return false;
+    }
     event.preventDefault();
-    return salla.cart.addItem({
+    /**
+     * by default the quick add is just an alias for add item function
+     * but its work only when the id is the only value is passed via the object
+     * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
+     */
+    return salla.cart.quickAdd(Object.entries({
       id: this.productId,
       donating_amount: this.donatingAmount,
       quantity: this.quantity
-    }).then((response) => this.success.emit(response))
+    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {}))
+      .then((response) => this.success.emit(response))
       .catch((error) => this.failed.emit(error));
   }
   getBtnAttributes() {
@@ -53,13 +53,19 @@ export class SallaAddProductButton {
     }
     return this.hostAttributes;
   }
+  componentWillLoad() {
+    this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
+  }
   render() {
     return (h(Host, null, this.productStatus === 'out-and-notify' && this.channels ?
       h("salla-product-availability", Object.assign({}, this.getBtnAttributes()),
         h("slot", null)) :
-      h("salla-button", Object.assign({ onClick: (event) => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus === 'out' }),
-        h("slot", null),
-        h("span", { ref: (el) => this.buttonLabel = el }))));
+      h("salla-button", Object.assign({ ref: btn => this.btn = btn, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }),
+        h("slot", null))));
+  }
+  componentDidRender() {
+    //if label not passed, get label
+    this.hasLabel || salla.lang.onLoaded(() => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
   }
   static get is() { return "salla-add-product-button"; }
   static get originalStyleUrls() { return {
@@ -103,7 +109,7 @@ export class SallaAddProductButton {
       },
       "attribute": "quantity",
       "reflect": true,
-      "defaultValue": "1"
+      "defaultValue": "0"
     },
     "donatingAmount": {
       "type": "number",

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

@@ -34,7 +34,7 @@ export class SallaBranches {
         : 'التسوق من فرع آخر';
     };
     salla.event.on('branches::show', btn => btn.dataset.target == this.host.id && this.show());
-    salla.event.on('languages::translations.loaded', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
+    salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
   }
   //todo:: add description for all @methods
   async show() {

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.js

@@ -35,7 +35,7 @@ export class SallaInfiniteScroll {
         <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
     this.btnLoader = this.status.querySelector('.s-button-loader');
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
       this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
       this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');

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

@@ -19,7 +19,7 @@ export class SallaLocalizationModal {
     this.currency = salla.config.get('user.currency_code');
     Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a;
       this.languagesTitle = salla.lang.get('common.titles.language');
       this.currenciesTitle = salla.lang.get('common.titles.currency');

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

@@ -84,7 +84,7 @@ export class SallaLoginModal {
     };
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a, _b, _c, _d;
       this.title = salla.lang.get('blocks.header.login');
       this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');

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

@@ -17,7 +17,7 @@ export class SallaOfferModal {
     this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
     this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
     Helper.setHost(this.host);
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
       this.remember_my_choice = salla.lang.get('common.remember_my_choice');
       this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');

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

@@ -1,8 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Host, h, Prop, Watch, Element, State } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import Helper from '../../Helpers/Helper';
 export class SallaProductAvailability {
   constructor() {
     this.isUser = Helper.isUser();
@@ -22,9 +22,15 @@ export class SallaProductAvailability {
         return salla.api.product.availabilitySubscribe(this.productId)
           .then(() => this.isSubscribed = true);
       }
-      let { mobile, countryCode } = await this.mobileInput.getValues(), data = { id: this.productId, country_code: countryCode };
-      mobile !== '' && (data['mobile'] = mobile);
-      this.email.value !== '' && (data['email'] = this.email.value);
+      let data = { id: this.productId };
+      if (this.channels_.includes('sms')) {
+        let { mobile, countryCode } = await this.mobileInput.getValues();
+        data['country_code'] = countryCode;
+        data['mobile'] = mobile;
+      }
+      if (this.channels_.includes('email')) {
+        this.email.value !== '' && (data['email'] = this.email.value);
+      }
       await this.validateform();
       return this.btn.load()
         .then(() => this.btn.disable())
@@ -44,7 +50,7 @@ export class SallaProductAvailability {
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a, _b, _c, _d;
       // console.log('translations:', salla.lang);
       this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');

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

@@ -23,7 +23,7 @@ export class SallaRatingModal {
     this.next = salla.lang.get('common.elements.next');
     Helper.setHost(this.host);
     salla.event.on('rating::show', () => this.show());
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
       this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
       this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');

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

@@ -16,7 +16,7 @@ export class SallaSearch {
     Helper.setHost(this.host);
     this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
     salla.event.on('search::show', () => this.modal.show());
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.placeholder = salla.lang.get('blocks.header.search_placeholder');
       this.noResultsText = salla.lang.get('common.elements.no_options');
     });

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -18,7 +18,7 @@ export class SallaTelInput {
     this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
     this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
     Helper.setHost(this.host);
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.mobileLabel = salla.lang.get('common.elements.mobile');
       this.countryCodeLabel = salla.lang.get('common.country_code');
       this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });

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

@@ -28,7 +28,7 @@ export class SallaVerifyModal {
         this.show(data);
       });
     }
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a;
       this.title = salla.lang.get('pages.profile.verify_title');
       (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));

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

@@ -16,9 +16,9 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.success = createEvent(this, "success", 7);
     this.failed = createEvent(this, "failed", 7);
     this.hostAttributes = {};
-    this.hasNotText = false;
+    this.hasLabel = false;
     this.channels = null;
-    this.quantity = 1;
+    this.quantity = 0;
     this.donatingAmount = 0;
     this.productStatus = 'sale';
     this.productType = 'product';
@@ -31,29 +31,29 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     if (this.productStatus === 'sale') {
       return salla.lang.get('pages.cart.add_to_cart');
     }
-    if (this.productType === 'product') {
+    if (this.productType !== 'donating') {
       return salla.lang.get('pages.products.out_of_stock');
     }
     // donating
     return salla.lang.get('pages.products.donation_exceed');
   }
-  componentWillLoad() {
-    this.hasNotText = !this.host.innerHTML || this.host.innerHTML === "" || this.host.innerHTML.trim().replace(/\s/g, '').localeCompare("<!---->") === 0;
-  }
-  componentDidRender() {
-    if (this.buttonLabel && this.hasNotText) {
-      salla.event.once('languages::translations.loaded', () => {
-        this.buttonLabel.innerHTML = this.getLabel() || 'اضافة للسلة';
-      });
-    }
-  }
   addProductToCart(event) {
+    // we want to ignore the click action when the type of button is submit a form
+    if (this.hostAttributes['type'] === 'submit') {
+      return false;
+    }
     event.preventDefault();
-    return salla.cart.addItem({
+    /**
+     * by default the quick add is just an alias for add item function
+     * but its work only when the id is the only value is passed via the object
+     * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
+     */
+    return salla.cart.quickAdd(Object.entries({
       id: this.productId,
       donating_amount: this.donatingAmount,
       quantity: this.quantity
-    }).then((response) => this.success.emit(response))
+    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {}))
+      .then((response) => this.success.emit(response))
       .catch((error) => this.failed.emit(error));
   }
   getBtnAttributes() {
@@ -64,10 +64,17 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     }
     return this.hostAttributes;
   }
+  componentWillLoad() {
+    this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
+  }
   render() {
     return (h(Host, null, this.productStatus === 'out-and-notify' && this.channels ?
       h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), h("slot", null)) :
-      h("salla-button", Object.assign({ onClick: (event) => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus === 'out' }), h("slot", null), h("span", { ref: (el) => this.buttonLabel = el }))));
+      h("salla-button", Object.assign({ ref: btn => this.btn = btn, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), h("slot", null))));
+  }
+  componentDidRender() {
+    //if label not passed, get label
+    this.hasLabel || salla.lang.onLoaded(() => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
   }
   get host() { return this; }
   static get style() { return sallaAddProductButtonCss; }

package/dist/components/salla-branches.js

@@ -41,7 +41,7 @@ const SallaBranches$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         : 'التسوق من فرع آخر';
     };
     salla.event.on('branches::show', btn => btn.dataset.target == this.host.id && this.show());
-    salla.event.on('languages::translations.loaded', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
+    salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
   }
   //todo:: add description for all @methods
   async show() {

package/dist/components/salla-infinite-scroll.js

@@ -38,7 +38,7 @@ const SallaInfiniteScroll$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
     this.btnLoader = this.status.querySelector('.s-button-loader');
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
       this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
       this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');

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

@@ -20,7 +20,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.currency = salla.config.get('user.currency_code');
     Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a;
       this.languagesTitle = salla.lang.get('common.titles.language');
       this.currenciesTitle = salla.lang.get('common.titles.currency');

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

@@ -82,7 +82,7 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     };
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a, _b, _c, _d;
       this.title = salla.lang.get('blocks.header.login');
       this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');

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

@@ -19,7 +19,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
     this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
     Helper.setHost(this.host);
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
       this.remember_my_choice = salla.lang.get('common.remember_my_choice');
       this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');

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

@@ -30,9 +30,15 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
         return salla.api.product.availabilitySubscribe(this.productId)
           .then(() => this.isSubscribed = true);
       }
-      let { mobile, countryCode } = await this.mobileInput.getValues(), data = { id: this.productId, country_code: countryCode };
-      mobile !== '' && (data['mobile'] = mobile);
-      this.email.value !== '' && (data['email'] = this.email.value);
+      let data = { id: this.productId };
+      if (this.channels_.includes('sms')) {
+        let { mobile, countryCode } = await this.mobileInput.getValues();
+        data['country_code'] = countryCode;
+        data['mobile'] = mobile;
+      }
+      if (this.channels_.includes('email')) {
+        this.email.value !== '' && (data['email'] = this.email.value);
+      }
       await this.validateform();
       return this.btn.load()
         .then(() => this.btn.disable())
@@ -52,7 +58,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a, _b, _c, _d;
       // console.log('translations:', salla.lang);
       this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');

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

@@ -31,7 +31,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.next = salla.lang.get('common.elements.next');
     Helper.setHost(this.host);
     salla.event.on('rating::show', () => this.show());
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
       this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
       this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');

package/dist/components/salla-search.js

@@ -19,7 +19,7 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     Helper.setHost(this.host);
     this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
     salla.event.on('search::show', () => this.modal.show());
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.placeholder = salla.lang.get('blocks.header.search_placeholder');
       this.noResultsText = salla.lang.get('common.elements.no_options');
     });

package/dist/components/salla-tel-input2.js

@@ -1396,7 +1396,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
     this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
     Helper.setHost(this.host);
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       this.mobileLabel = salla.lang.get('common.elements.mobile');
       this.countryCodeLabel = salla.lang.get('common.country_code');
       this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });

package/dist/components/salla-verify-modal2.js

@@ -32,7 +32,7 @@ const SallaVerifyModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
         this.show(data);
       });
     }
-    salla.event.on('languages::translations.loaded', () => {
+    salla.lang.onLoaded(() => {
       var _a;
       this.title = salla.lang.get('pages.profile.verify_title');
       (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));