@salla.sa/twilight-components 2.11.45 → 2.11.47

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

@@ -1,23 +1,10 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import { Component, Element, State, Event, Host, Prop, h } from '@stencil/core';
 export class SallaAddProductButton {
   constructor() {
     this.hostAttributes = {};
-    this.hasLabel = false;
-    /**
-     * Channels.
-     */
-    this.channels = null;
-    /**
-     * Product Quantity
-     */
-    this.quantity = 0;
-    /**
-     * Donating amount.
-     */
-    this.donatingAmount = 0;
     /**
      *  Product Status.Defaults to `sale`
      */
@@ -26,6 +13,7 @@ export class SallaAddProductButton {
      * Product type. Defaults to `product`
      */
     this.productType = 'product';
+    this.selectedOptions = [];
   }
   getLabel() {
     if (this.productStatus === 'sale') {
@@ -59,7 +47,10 @@ export class SallaAddProductButton {
       endpoint: 'quickAdd'
     }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {});
     return salla.cart.addItem(data)
-      .then(response => this.success.emit(response))
+      .then(response => {
+      this.selectedOptions = [];
+      this.success.emit(response);
+    })
       .catch(error => this.failed.emit(error));
   }
   addBookingProduct() {
@@ -80,29 +71,64 @@ export class SallaAddProductButton {
     }
     return this.hostAttributes;
   }
+  pushSelectedOption(data) {
+    const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);
+    if (index > -1) {
+      this.selectedOptions[index] = Object.assign(Object.assign({}, data.detail), { option_id: data.option.id });
+    }
+    else {
+      this.selectedOptions.push(Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }));
+    }
+    this.hasOutOfStockOption = this.selectedOptions.some(option => option.is_out);
+  }
   componentWillLoad() {
     this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
   }
   render() {
     var _a;
     //TODO:: find a better fix, this is a patch for issue that duplicates the buttons more than twice @see the screenshot inside this folder
-    return ((_a = this.host.closest('.swiper-slide')) === null || _a === void 0 ? void 0 : _a.classList.contains('swiper-slide-duplicate'))
-      ? ''
-      : (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({ ref: el => this.btn = el, 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))));
+    if ((_a = this.host.closest('.swiper-slide')) === null || _a === void 0 ? void 0 : _a.classList.contains('swiper-slide-duplicate')) {
+      return '';
+    }
+    if (this.hasSubscribedOptions) {
+      return h(Host, null,
+        h("salla-product-availability", Object.assign({}, this.getBtnAttributes(), { "is-subscribed": true })));
+    }
+    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-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', 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", type: "button" }),
+        h("slot", null)));
+  }
+  componentDidLoad() {
+    if (!this.notifyOptionsAvailability) {
+      return;
+    }
+    salla.event.on('product-options::change', data => {
+      if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
+        return;
+      }
+      this.pushSelectedOption(data);
+      this.hasLabel = false;
+      if (!this.subscribedOptions) {
+        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;
+    });
   }
   componentDidRender() {
+    var _a;
     //if label not passed, get label
     if (this.hasLabel) {
       return;
     }
-    this.btn.setText(this.getLabel() || 'اضافة للسلة');
-    salla.lang.onLoaded(() => {
-      this.btn.setText(this.getLabel() || 'اضافة للسلة');
-    });
+    (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(this.getLabel());
+    salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(this.getLabel()); });
   }
   static get is() { return "salla-add-product-button"; }
   static get originalStyleUrls() { return {
@@ -127,8 +153,24 @@ export class SallaAddProductButton {
         "text": "Channels."
       },
       "attribute": "channels",
-      "reflect": true,
-      "defaultValue": "null"
+      "reflect": true
+    },
+    "subscribedOptions": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Subscribed Options ex: \"[[139487,2394739],[1212,1544]]\""
+      },
+      "attribute": "subscribed-options",
+      "reflect": false
     },
     "quantity": {
       "type": "number",
@@ -145,8 +187,7 @@ export class SallaAddProductButton {
         "text": "Product Quantity"
       },
       "attribute": "quantity",
-      "reflect": true,
-      "defaultValue": "0"
+      "reflect": true
     },
     "donatingAmount": {
       "type": "number",
@@ -163,8 +204,24 @@ export class SallaAddProductButton {
         "text": "Donating amount."
       },
       "attribute": "donating-amount",
-      "reflect": true,
-      "defaultValue": "0"
+      "reflect": true
+    },
+    "notifyOptionsAvailability": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Listen to product options availability."
+      },
+      "attribute": "notify-options-availability",
+      "reflect": true
     },
     "productId": {
       "type": "any",
@@ -220,6 +277,11 @@ export class SallaAddProductButton {
       "defaultValue": "'product'"
     }
   }; }
+  static get states() { return {
+    "hasOutOfStockOption": {},
+    "hasSubscribedOptions": {},
+    "selectedOptions": {}
+  }; }
   static get events() { return [{
       "method": "success",
       "name": "success",

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

@@ -46,6 +46,11 @@ export class SallaLocalizationModal {
     this.modal.open();
     return await salla.api.withoutNotifier(() => this.getLanguages())
       .then(() => this.getCurrencies())
+      .then(() => {
+      if (this.languages.length < 2 && this.currencies.length < 2) {
+        this.modal.close();
+      }
+    })
       .catch(e => {
       var _a, _b, _c, _d;
       console.log(e);

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

@@ -18,18 +18,6 @@ export class SallaLoyalty {
     this.askConfirmation = false;
     this.is_loggedin = false;
     this.hasError = false;
-    /**
-     * The exchanged prize point
-     */
-    this.prizePoints = undefined;
-    /**
-     * Available customer points with which they can exchange.
-     */
-    this.customerPoints = undefined;
-    /**
-     * The exchangable prize title
-     */
-    this.prizeTitle = undefined;
     /**
      * Does the merchant allow to login using email
      */
@@ -54,6 +42,7 @@ export class SallaLoyalty {
       var _a, _b;
       this.prizePoints = (_a = cart.loyalty.prize) === null || _a === void 0 ? void 0 : _a.points;
       this.prizeTitle = (_b = cart.loyalty.prize) === null || _b === void 0 ? void 0 : _b.title;
+      this.customerPoints = cart.loyalty.customer_points || this.customerPoints;
     });
   }
   setSelectedPrizeItem(item) {
@@ -151,13 +140,7 @@ export class SallaLoyalty {
    * Cancel Exchanged prizes
    */
   async resetExchange() {
-    return await salla.loyalty.reset()
-      .then((response) => {
-      var _a;
-      this.customerPoints = this.customerPoints || ((_a = response.data) === null || _a === void 0 ? void 0 : _a.customer_points);
-      this.prizePoints = undefined;
-      this.prizeTitle = undefined;
-    }).catch(e => console.log(e));
+    return await salla.loyalty.reset();
   }
   /**
    * Open Confirmation modal
@@ -184,15 +167,7 @@ export class SallaLoyalty {
     var _a;
     this.buttonLoading = true;
     return await salla.loyalty.exchange((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id)
-      .then((response) => {
-      var _a, _b, _c, _d;
-      this.prizePoints = (_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.prize) === null || _b === void 0 ? void 0 : _b.points;
-      this.prizeTitle = (_d = (_c = response.data) === null || _c === void 0 ? void 0 : _c.prize) === null || _d === void 0 ? void 0 : _d.title;
-      if (this.selectedItem.key == "FREE_PRODUCT" && salla.url.is_page('cart')) {
-        window.location.reload();
-      }
-    })
-      .catch(e => console.log(e))
+      .then(() => this.selectedItem.key == "FREE_PRODUCT" && salla.url.is_page('cart') && window.location.reload())
       .finally(() => {
       this.buttonLoading = false;
       this.cancelProcess();
@@ -265,7 +240,7 @@ export class SallaLoyalty {
   static get properties() { return {
     "prizePoints": {
       "type": "any",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string | number",
         "resolved": "number | string",
@@ -278,12 +253,11 @@ export class SallaLoyalty {
         "text": "The exchanged prize point"
       },
       "attribute": "prize-points",
-      "reflect": false,
-      "defaultValue": "undefined"
+      "reflect": true
     },
     "customerPoints": {
       "type": "number",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -296,12 +270,11 @@ export class SallaLoyalty {
         "text": "Available customer points with which they can exchange."
       },
       "attribute": "customer-points",
-      "reflect": false,
-      "defaultValue": "undefined"
+      "reflect": true
     },
     "prizeTitle": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -311,11 +284,10 @@ export class SallaLoyalty {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The exchangable prize title"
+        "text": "The prize title"
       },
       "attribute": "prize-title",
-      "reflect": false,
-      "defaultValue": "undefined"
+      "reflect": true
     },
     "allowEmail": {
       "type": "boolean",

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

@@ -9,40 +9,13 @@ export class SallaProductAvailability {
     this.isUser = salla.config.isUser();
     this.translationLoaded = false;
     /**
-     * product id that can visitor subscribe to its availability notification
+     * Listen to product options availability.
      */
-    this.productId = salla.config.get('page.id');
+    this.notifyOptionsAvailability = false;
     /**
      * is current user already subscribed
      */
     this.isSubscribed = false;
-    // @Method()
-    this.submit = async () => {
-      if (this.isUser) {
-        return salla.api.product.availabilitySubscribe(this.productId)
-          .then(() => this.isSubscribed = true);
-      }
-      let data = { id: this.productId };
-      if (this.channels_.includes('sms')) {
-        let { phone, countryCode } = await this.mobileInput.getValues();
-        data['country_code'] = countryCode;
-        data['phone'] = phone;
-      }
-      if (this.channels_.includes('email')) {
-        this.email.value !== '' && (data['email'] = this.email.value);
-      }
-      await this.validateform();
-      return this.btn.load()
-        .then(() => this.btn.disable())
-        .then(() => salla.api.product.availabilitySubscribe(data))
-        .then(() => {
-        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());
-    };
     // helpers
     this.typing = (e, submitMethod) => {
       const error = e.target.nextElementSibling;
@@ -56,6 +29,9 @@ export class SallaProductAvailability {
       this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
       (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title_);
     });
+    if (!this.productId) {
+      this.productId = salla.config.get('page.id');
+    }
     if (this.isUser)
       return;
     this.channelsWatcher(this.channels);
@@ -66,6 +42,44 @@ export class SallaProductAvailability {
   channelsWatcher(newValue) {
     this.channels_ = !!newValue ? newValue.split(',') : [];
   }
+  // @Method()
+  async submit() {
+    var _a;
+    let payload = { id: this.productId };
+    if (this.notifyOptionsAvailability) {
+      payload.options = [];
+      let options = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.getSelectedOptionsData());
+      Object.values(options).forEach(option => {
+        //inject numbers only, without zeros
+        if (option && !isNaN(option)) {
+          payload.options.push(Number(option));
+        }
+      });
+    }
+    if (this.isUser) {
+      return salla.api.product.availabilitySubscribe(payload)
+        .then(() => this.isSubscribed = true);
+    }
+    if (this.channels_.includes('sms')) {
+      let { phone, countryCode } = await this.mobileInput.getValues();
+      payload['country_code'] = countryCode;
+      payload['phone'] = phone;
+    }
+    if (this.channels_.includes('email')) {
+      this.email.value !== '' && (payload['email'] = this.email.value);
+    }
+    await this.validateform();
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => salla.api.product.availabilitySubscribe(payload))
+      .then(() => {
+      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());
+  }
   async validateform() {
     try {
       if (this.channels_.includes('email')) {
@@ -141,6 +155,24 @@ export class SallaProductAvailability {
       "attribute": "channels",
       "reflect": false
     },
+    "notifyOptionsAvailability": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Listen to product options availability."
+      },
+      "attribute": "notify-options-availability",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "productId": {
       "type": "number",
       "mutable": false,
@@ -156,8 +188,7 @@ export class SallaProductAvailability {
         "text": "product id that can visitor subscribe to its availability notification"
       },
       "attribute": "product-id",
-      "reflect": false,
-      "defaultValue": "salla.config.get('page.id')"
+      "reflect": false
     },
     "isSubscribed": {
       "type": "boolean",

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Prop, h, State, Element, Host, Event } from '@stencil/core';
+import { Component, Prop, h, State, Element, Host, Event, Method } from '@stencil/core';
 import { DisplayType } from './interfaces';
 import CheckCircleIcon from '../../assets/svg/check.svg';
 import CameraIcon from '../../assets/svg/camera.svg';
@@ -18,6 +18,7 @@ export class SallaProductOptions {
     };
     this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
     this.donationAmount = salla.lang.get('pages.products.donation_amount');
+    this.selectedOptions = [];
     /**
      * The id of the product to which the options are going to be fetched for.
      */
@@ -45,6 +46,29 @@ export class SallaProductOptions {
       });
     }
   }
+  /**
+   * Get the id's of the selected options.
+   * */
+  async getSelectedOptionsData() {
+    let selectedOptions = {};
+    let formData = this.host.getElementSallaData();
+    formData.forEach(function (value, key) {
+      key.startsWith('options[') && (selectedOptions[key.replace('options[', '').replace(']', '')] = value);
+    });
+    return selectedOptions;
+  }
+  /**
+   * Get selected options.
+   * */
+  async getSelectedOptions() {
+    return this.selectedOptions;
+  }
+  /**
+   * Get a specific option by its id.
+   * */
+  async getOption(option_id) {
+    return this.optionsData.find(option => option.id === option_id);
+  }
   changedHandler(event, option) {
     let data = { event: event, option: option, detail: null };
     if (option.details) {
@@ -53,6 +77,8 @@ export class SallaProductOptions {
       });
       data.detail = detail;
     }
+    const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);
+    index > -1 ? this.selectedOptions[index] = Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }) : this.selectedOptions.push(Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }));
     this.handleRequiredMultipleOptions(option);
     this.changed.emit(data);
     salla.event.emit('product-options::change', data);
@@ -202,7 +228,7 @@ export class SallaProductOptions {
       h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control", onChange: e => this.changedHandler(e, option) },
         h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
         option.details.map((detail) => {
-          return h("option", { value: detail.id, disabled: detail.is_out, selected: detail.is_selected }, this.getOptionDetailName(detail));
+          return h("option", { value: detail.id, selected: detail.is_selected }, this.getOptionDetailName(detail));
         })));
   }
   multipleOptions(option) {
@@ -215,7 +241,7 @@ export class SallaProductOptions {
   //@ts-ignore
   colorOption(option) {
     return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => h("div", null,
-      h("input", { type: "radio", value: detail.id, disabled: detail.is_out, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, id: `color-${this.productId}-${option.id}-${detail.id}`, onChange: e => this.changedHandler(e, option) }),
+      h("input", { type: "radio", value: detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, id: `color-${this.productId}-${option.id}-${detail.id}`, onChange: e => this.changedHandler(e, option) }),
       h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` },
         h("span", { style: { "background-color": detail.color } }),
         h("p", null, this.getOptionDetailName(detail))))));
@@ -224,16 +250,16 @@ export class SallaProductOptions {
   thumbnailOption(option) {
     return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
       return h("div", null,
-        h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, disabled: detail.is_out, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, id: `option_${this.productId}-${option.id}_${detail.id}`, onChange: (e) => this.changedHandler(e, option) }),
+        h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, id: `option_${this.productId}-${option.id}_${detail.id}`, onChange: (e) => this.changedHandler(e, option) }),
         h("label", { htmlFor: `option_${this.productId}-${option.id}_${detail.id}`, "data-img-id": detail.option_value, class: "go-to-slide" },
           h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }),
-          h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" })),
+          h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }),
+          detail.is_out ?
+            h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText)
+            : ''),
         h("p", null,
           this.getOptionDetailName(detail, false),
-          " "),
-        detail.is_out ?
-          [h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText), h("div", { class: "s-product-options-thumbnails-badge-overlay" })]
-          : '');
+          " "));
     }));
   }
   static get is() { return "salla-product-options"; }
@@ -283,7 +309,8 @@ export class SallaProductOptions {
   static get states() { return {
     "optionsData": {},
     "outOfStockText": {},
-    "donationAmount": {}
+    "donationAmount": {},
+    "selectedOptions": {}
   }; }
   static get events() { return [{
       "method": "changed",
@@ -301,5 +328,62 @@ export class SallaProductOptions {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "getSelectedOptionsData": {
+      "complexType": {
+        "signature": "() => Promise<{}>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<{}>"
+      },
+      "docs": {
+        "text": "Get the id's of the selected options.",
+        "tags": []
+      }
+    },
+    "getSelectedOptions": {
+      "complexType": {
+        "signature": "() => Promise<any[]>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any[]>"
+      },
+      "docs": {
+        "text": "Get selected options.",
+        "tags": []
+      }
+    },
+    "getOption": {
+      "complexType": {
+        "signature": "(option_id: any) => Promise<Option>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Option": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        },
+        "return": "Promise<Option>"
+      },
+      "docs": {
+        "text": "Get a specific option by its id.",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
 }