@salla.sa/twilight-components 2.10.2 → 2.10.3

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Host, h, Prop, Method, State, Event } from '@stencil/core';
+import { Component, Host, h, Prop, Method, State, Event, Element } from '@stencil/core';
 import Location from '../../assets/svg/location.svg';
 import Edit from '../../assets/svg/edit.svg';
 import CurrentLocation from '../../assets/svg/location-target.svg';
@@ -17,6 +17,7 @@ export class SallaMap {
     this.locateButtonTitle = 'Locate';
     this.locateButtonEdit = 'Edit';
     this.searchInputValue = null;
+    this.geolocationError = false;
     /**
      * Disable or enable actions
      */
@@ -125,8 +126,19 @@ export class SallaMap {
           address: this.searchInputValue ? this.searchInputValue : null,
         });
       });
-      // get current location
-      this.getCurrentLocation();
+      if (!this.host.hasAttribute('lat') && !this.host.hasAttribute('lng')) {
+        this.getCurrentLocation();
+        if (this.geolocationError) {
+          this.map.setCenter({
+            lat: this.lat,
+            lng: this.lng,
+          });
+          this.marker.setPosition({
+            lat: this.lat,
+            lng: this.lng,
+          });
+        }
+      }
     });
   }
   getCurrentLocation() {
@@ -146,7 +158,28 @@ export class SallaMap {
           lng: position.coords.longitude,
           address: this.searchInputValue ? this.searchInputValue : null,
         });
-      });
+      }, this.handleLocationError.bind(this));
+    }
+    else {
+      salla.log('Geolocation is not supported by this browser.');
+      this.geolocationError = true;
+    }
+  }
+  handleLocationError(error) {
+    this.geolocationError = true;
+    switch (error.code) {
+      case error.PERMISSION_DENIED:
+        salla.log('User denied the request for Geolocation.');
+        break;
+      case error.POSITION_UNAVAILABLE:
+        salla.log('Location information is unavailable.');
+        break;
+      case error.TIMEOUT:
+        salla.log('The request to get user location timed out.');
+        break;
+      case error.UNKNOWN_ERROR:
+        salla.log('An unknown error occurred.');
+        break;
     }
   }
   /**
@@ -347,6 +380,7 @@ export class SallaMap {
     "locateButtonTitle": {},
     "locateButtonEdit": {},
     "searchInputValue": {},
+    "geolocationError": {},
     "searchInput": {},
     "mapElement": {}
   }; }
@@ -417,4 +451,5 @@ export class SallaMap {
       }
     }
   }; }
+  static get elementRef() { return "host"; }
 }

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

@@ -0,0 +1,25 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export var DisplayType;
+(function (DisplayType) {
+  DisplayType["COLOR"] = "color";
+  DisplayType["DATE"] = "date";
+  DisplayType["DATETIME"] = "datetime";
+  DisplayType["DONATION"] = "donation";
+  DisplayType["IMAGE"] = "image";
+  DisplayType["MULTIPLE_OPTIONS"] = "multiple-options";
+  DisplayType["NUMBER"] = "number";
+  DisplayType["SINGLE_OPTION"] = "single-option";
+  DisplayType["SPLITTER"] = "splitter";
+  DisplayType["TEXT"] = "text";
+  DisplayType["TEXTAREA"] = "textarea";
+  DisplayType["THUMBNAIL"] = "thumbnail";
+  DisplayType["TIME"] = "time";
+  DisplayType["RADIO"] = "radio";
+  DisplayType["CHECKBOX"] = "checkbox";
+})(DisplayType || (DisplayType = {}));
+export var Currency;
+(function (Currency) {
+  Currency["Sar"] = "SAR";
+})(Currency || (Currency = {}));

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

@@ -0,0 +1,425 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, h, State, Host, Event } from '@stencil/core';
+import { DisplayType } from './interfaces';
+import CheckCircleIcon from '../../assets/svg/check.svg';
+import CameraIcon from '../../assets/svg/camera.svg';
+export class SallaProductOptions {
+  constructor() {
+    this.options = [];
+    this.uploadedImage = undefined;
+    this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
+    this.donationAmount = salla.lang.get('pages.products.donation_amount');
+    /**
+     * The id of the product to which the options are going to be fetched for.
+     */
+    this.productId = salla.config.get('page.id');
+    if (this.product) {
+      this.setProductDetail(JSON.parse(this.product));
+    }
+    else if (this.productId) {
+      this.fetchProductOptions();
+    }
+    salla.lang.onLoaded(() => {
+      this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
+      this.donationAmount = salla.lang.get('pages.products.donation_amount');
+    });
+  }
+  //todo:: typo here, but I think we will drop it anyway😌
+  handleMultiSelectFieldInput() {
+    var checkedBoxes = this.multipleOptionDom.querySelectorAll('input[type="checkbox"]:checked');
+    var multiSelectedItems = [];
+    for (let checkbox of checkedBoxes) {
+      multiSelectedItems.push(checkbox.value);
+    }
+    this.itemsSelected.emit(multiSelectedItems);
+  }
+  /**
+   * Image Selection
+   */
+  setProductDetail(detail) {
+    this.productDetail = detail;
+    this.options = detail.options;
+  }
+  fetchProductOptions() {
+    return salla.api.product.getDetail(this.productId, ['options']).then(resp => {
+      this.setProductDetail(resp.data);
+    });
+  }
+  getDisplayForType(option) {
+    if (this[`${option.type}Option`]) {
+      return this[`${option.type}Option`](option);
+    }
+    if (option.type === DisplayType.MULTIPLE_OPTIONS) {
+      return this.multipleOptions(option);
+    }
+    if (option.type === DisplayType.SINGLE_OPTION) {
+      return this.singleOption(option);
+    }
+    salla.log(`Couldn't find options type(${option.type})😢`);
+    return '';
+  }
+  render() {
+    if (this.options.length == 0) {
+      return;
+    }
+    return (h(Host, { class: "s-product-options-wrapper" },
+      h("salla-conditional-fields", null, this.options.map((option) => h("div", { class: "s-product-options-option-container" }, option.name == 'splitter' ?
+        this.splitterOption()
+        : h("div", { class: "s-product-options-option" },
+          h("label", { htmlFor: 'options[' + option.id + ']', class: "s-product-options-option-label" },
+            h("b", null,
+              option.name,
+              option.required && h("span", null, " * "),
+              " "),
+            h("small", null, option.placeholder)),
+          h("div", { class: "s-product-options-option-content" }, this.getDisplayForType(option))))))));
+  }
+  //@ts-ignore
+  colorOption(option) {
+    return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((value) => h("div", null,
+      h("input", { onChange: e => this.colorSelected.emit(e), name: `color-choice-${option.id}`, id: `color-choice-${option.id}-${value.id}`, required: true, type: "radio" }),
+      h("label", { htmlFor: `color-choice-${option.id}-${value.id}` },
+        h("span", { style: { "background-color": value.color } }),
+        h("p", null, value.name)))));
+  }
+  //@ts-ignore
+  dateOption(option) {
+    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
+    return h("div", { class: "s-product-options-date-element" },
+      h("salla-datetime-picker", { onPicked: e => this.dateSelected.emit(e), placeholder: option.name }));
+  }
+  //@ts-ignore
+  datetimeOption(option) {
+    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
+    return h("div", { class: "s-product-options-datetime-element" },
+      h("salla-datetime-picker", { mode: "range", dateFormat: "Y-m-d G:i:K", enableTime: true, minDate: option.from_date_time, maxDate: option.to_date_time, placeholder: option.name, onPicked: e => this.dateTimeSelected.emit(e) }));
+  }
+  //@ts-ignore
+  donationOption(option) {
+    var _a;
+    let donation = this.productDetail.donation;
+    if (!donation)
+      return '';
+    return h("div", { class: "s-product-options-donation-wrapper" },
+      h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.donationMoneyEntered.emit(e), value: salla.url.is_page('cart') ? (_a = this.productDetail) === null || _a === void 0 ? void 0 : _a.price : '' }),
+      h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol));
+  }
+  getFilepondPlaceholder() {
+    return `<div class="s-product-options-filepond-placeholder"><span class="s-product-options-filepond-placeholder-icon">${CameraIcon}</span><p class="s-product-options-filepond-placeholder-text">اسحب او افلت الصورة هنا</p> <span class="filepond--label-action">او تصفح من جهازك</span></div>`;
+  }
+  setUploaderHeight() {
+    setTimeout(() => {
+      this.uploader.querySelector('.filepond--root').style.height = '120px';
+    }, 1000);
+  }
+  //@ts-ignore
+  selectThumbnail(e, value) {
+    // salla.event.emit('product-options::goToSlide', value)
+    this.thumbnailSelected.emit(e);
+  }
+  //todo:: move it to another place, create component if there is no component
+  //@ts-ignore
+  getServerConfig(url, option_id) {
+    return {
+      process: async (_fieldName, file, _metadata, load, error, _progress, abort, _transfer, _options) => {
+        const formData = new FormData();
+        formData.append("image_url", file, file.name);
+        return await salla.product.uploadGiftImage(formData)
+          .then((resp) => {
+          this.uploadedImage = resp.data.url;
+          load('success');
+          file.metadata = `_${new Date().getTime()}`;
+        }).catch(e => {
+          console.log(e);
+          error('error');
+        })
+          .finally(() => {
+          return {
+            abort: () => {
+              abort();
+            },
+          };
+        });
+      }
+    };
+  }
+  //@ts-ignore
+  imageOption(option) {
+    return h("salla-file-upload", { "instant-upload": true, ref: element => this.uploader = element, "data-item-id": salla.url.is_page('cart') ? option.id : '', class: { "s-product-options-image-input": true, required: option.required }, labelIdle: this.getFilepondPlaceholder(), onRemove: () => this.setUploaderHeight(), serverConfig: this.getServerConfig(salla.cart.api.getUrl('cart/option-image'), salla.url.is_page('cart') ? option.id : null) });
+  }
+  multipleOptions(option) {
+    return h("div", { ref: element => this.multipleOptionDom = element, class: { "s-product-options-multiple-options-wrapper": true, 'required': option.required } }, option === null || option === void 0 ? void 0 : option.details.map((value) => {
+      return h("div", null,
+        h("input", { id: `field-${option.id}-${value.id}`, "aria-describedby": `options[${option.id}]-description`, name: `options[${option.id}]`, value: value.id, type: "checkbox", onChange: () => this.handleMultiSelectFieldInput() }),
+        h("label", { htmlFor: `field-${option.id}-${value.id}` }, value.name));
+    }));
+  }
+  //@ts-ignore
+  numberOption(option) {
+    return h("input", { placeholder: option.placeholder, name: `options[${option.id}]`, type: "text", onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.numberOptionEntered.emit(e), class: "s-form-control" });
+  }
+  singleOption(option) {
+    return h("div", null,
+      h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control" },
+        h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
+        option.details.map((op) => {
+          return h("option", { 
+            // selected={op.id == this.selectedSingleOption}
+            onChange: e => this.singleSelectOptionSelected.emit(e), value: op.id }, op.name);
+        })));
+  }
+  //@ts-ignore
+  splitterOption() {
+    return h("div", { class: "s-product-options-splitter" });
+  }
+  //@ts-ignore
+  textOption(option) {
+    return h("div", { class: "s-product-options-text" },
+      h("input", { placeholder: option.placeholder, name: `options[${option.id}]`, type: "text", onInput: e => this.textOptionEntered.emit(e), required: option.required, class: 's-form-control' }));
+  }
+  //@ts-ignore
+  textareaOption(option) {
+    return h("div", { class: "s-product-options-textarea" },
+      h("div", { class: "mt-1" },
+        h("textarea", { rows: 4, name: `options[${option.id}]`, required: option.required, id: `options[${option.id}]`, placeholder: option.placeholder, onInput: (e) => this.textareaOptionEntered.emit(e), class: "s-form-control" })));
+  }
+  //@ts-ignore
+  thumbnailOption(option) {
+    return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
+      return h("div", null,
+        h("input", { required: option.required, type: "radio", id: `option_${option.id}_${detail.id}`, disabled: detail.is_out, "data-itemid": detail.id, name: `options[${option.id}]`, "data-img-id": detail.option_value, value: detail.option_value, onChange: (e) => this.selectThumbnail(e, detail.option_value) }),
+        h("label", { htmlFor: `option_${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("p", null,
+          detail.name,
+          " "),
+        detail.is_out ?
+          [h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText), h("div", { class: "s-product-options-thumbnails-badge-overlay" })]
+          : '');
+    }));
+  }
+  //@ts-ignore
+  timeOption(option) {
+    return h("salla-datetime-picker", { class: "s-product-options-time-element", enableTime: true, placeholder: option.name, noCalendar: true, dateFormat: "h:i K", onPicked: e => this.timeSelected.emit(e) });
+  }
+  static get is() { return "salla-product-options"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-product-options.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-product-options.css"]
+  }; }
+  static get properties() { return {
+    "productId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The id of the product to which the options are going to be fetched for."
+      },
+      "attribute": "product-id",
+      "reflect": false,
+      "defaultValue": "salla.config.get('page.id')"
+    },
+    "product": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Product detail information."
+      },
+      "attribute": "product",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "productDetail": {},
+    "options": {},
+    "uploadedImage": {},
+    "outOfStockText": {},
+    "donationAmount": {}
+  }; }
+  static get events() { return [{
+      "method": "colorSelected",
+      "name": "colorSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Colors Option Event"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "thumbnailSelected",
+      "name": "thumbnailSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Thumbnails Option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "singleSelectOptionSelected",
+      "name": "singleSelectOptionSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Single Select Option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "donationMoneyEntered",
+      "name": "donationMoneyEntered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Donation Option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "textOptionEntered",
+      "name": "textOptionEntered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Text Option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "textareaOptionEntered",
+      "name": "textareaOptionEntered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Textarea Option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "numberOptionEntered",
+      "name": "numberOptionEntered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Number Option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "itemsSelected",
+      "name": "itemsSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Multi-Select Option"
+      },
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      }
+    }, {
+      "method": "dateTimeSelected",
+      "name": "dateTimeSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "DateTime Selection Option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "dateSelected",
+      "name": "dateSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Date Selection Option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "timeSelected",
+      "name": "timeSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Time Selection Option"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -14,6 +14,10 @@ export class SallaSwiper {
      * Show/hide slider block title
      */
     this.blockTitle = '';
+    /**
+     * Enable call a specific slide
+     */
+    // @Prop({reflect: true}) enableCallToSlide: boolean = false;
     /**
      * Show/hide slider block sub title
      */
@@ -245,6 +249,12 @@ export class SallaSwiper {
     salla.lang.onLoaded(() => {
       this.displayAllTitle = salla.lang.get('blocks.home.display_all');
     });
+    // if (this.enableCallToSlide) {     
+    //   salla.event.on('product-options::goToSlide', data => {
+    //     const slideIndex = this.sliderWrapper.querySelector(`[data-img-id="${data}"]`).getAttribute('data-slid-index');
+    //     this.slideTo(parseInt(slideIndex), 300, false);
+    //   });
+    // }
     return new Promise((resolve, reject) => {
       // @ts-ignore
       if (typeof Swiper !== 'undefined') {

package/dist/collection/components/salla-user-menu/salla-user-menu.js

@@ -37,6 +37,7 @@ export class SallaUserMenu {
     this.hello = salla.lang.get("pages.checkout.hello");
     this.first_name = salla.storage.get('user.first_name') || '';
     this.last_name = salla.storage.get('user.last_name') || '';
+    this.has_red_dot = salla.storage.get('user.notifications') || salla.storage.get('user.pending_orders');
     this.avatar = salla.storage.get('user.avatar') || salla.url.cdn('images/avatar.png');
     this.badges = {
       notifications: salla.helpers.number(salla.storage.get('user.notifications') || 0),
@@ -78,7 +79,7 @@ export class SallaUserMenu {
     }
     //we need it to be the last item
     this.items.logout = LogoutIcon;
-    this.triggerSlot = ((_a = this.host.querySelector('[slot="trigger"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<div class="s-user-menu-trigger"><img class="s-user-menu-trigger-avatar" src="{avatar}" alt="{first_name}{last_name}" /><div class="s-user-menu-trigger-content"><span class="s-user-menu-trigger-hello">{hello}</span><p class="s-user-menu-trigger-name">{first_name} {last_name}</p></div> <i class="s-user-menu-trigger-icon">{icon}</i></div>';
+    this.triggerSlot = ((_a = this.host.querySelector('[slot="trigger"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<div class="s-user-menu-trigger"><div class="s-user-menu-avatar-wrap"><img class="s-user-menu-trigger-avatar" src="{avatar}" alt="{first_name}{last_name}" /></div><div class="s-user-menu-trigger-content"><span class="s-user-menu-trigger-hello">{hello}</span><p class="s-user-menu-trigger-name">{first_name} {last_name}</p></div> <i class="s-user-menu-trigger-icon">{icon}</i></div>';
     if (salla.config.isGuest()) {
       return;
     }
@@ -121,7 +122,7 @@ export class SallaUserMenu {
     salla.auth.logout();
   }
   getTheHeader() {
-    return h("div", { class: { 's-user-menu-trigger-slot': true, 's-user-menu-trigger-avatar-only': this.avatarOnly }, id: 'trigger-slot', onClick: (e) => this.open(e), innerHTML: this.triggerSlot
+    return h("div", { class: { 's-user-menu-trigger-slot': true, 's-user-menu-red-dot': this.has_red_dot, 's-user-menu-trigger-avatar-only': this.avatarOnly }, id: 'trigger-slot', onClick: (e) => this.open(e), innerHTML: this.triggerSlot
         .replace(/\{hello\}/g, this.hello)
         .replace(/\{first_name\}/g, this.first_name)
         .replace(/\{last_name\}/g, this.last_name)
@@ -259,6 +260,7 @@ export class SallaUserMenu {
     "hello": {},
     "first_name": {},
     "last_name": {},
+    "has_red_dot": {},
     "avatar": {},
     "badges": {},
     "OrderUpdate": {}

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export { SallaModal as SallaModal } from '../types/components/salla-modal/salla-
 export { SallaOfferModal as SallaOfferModal } from '../types/components/salla-offer-modal/salla-offer-modal';
 export { SallaPlaceholder as SallaPlaceholder } from '../types/components/salla-placeholder/salla-placeholder';
 export { SallaProductAvailability as SallaProductAvailability } from '../types/components/salla-product-availability/salla-product-availability';
+export { SallaProductOptions as SallaProductOptions } from '../types/components/salla-product-options/salla-product-options';
 export { SallaProductSizeGuide as SallaProductSizeGuide } from '../types/components/salla-product-size-guide/salla-product-size-guide';
 export { SallaQuantityInput as SallaQuantityInput } from '../types/components/salla-quantity-input/salla-quantity-input';
 export { SallaQuickOrder as SallaQuickOrder } from '../types/components/salla-quick-order/salla-quick-order';