@salla.sa/twilight-components 1.0.21 → 1.0.22

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

@@ -0,0 +1,331 @@
+import { Component, Host, h, Prop, Watch, Element, Method } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaProductAvailability {
+  constructor() {
+    this.isUser = Helper.isUser();
+    this.buttonText = salla.lang.get('pages.products.notify_availability');
+    this.countryCode = salla.config.country_code || 'SA';
+    this.subscribeText = salla.lang.get('common.elements.submit');
+    this.cancelText = salla.lang.get('common.elements.cancel');
+    this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
+    this.mobileLabel = salla.lang.get('common.elements.mobile');
+    this.emailLabel = salla.lang.get('common.elements.email');
+    this.mobilePlaceholder = salla.lang.get('common.elements.mobile_placeholder');
+    this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
+    this.productId = salla.config.page.id;
+    this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
+    this.isSubscribed = false;
+    if (this.isUser) {
+      return;
+    }
+    this.channelsWatcher(this.channels);
+    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+    this.host.removeAttribute('title');
+  }
+  channelsWatcher(newValue) {
+    this.channels_ = newValue.split(',');
+  }
+  async submit() {
+    if (this.isUser) {
+      return salla.api.product.availabilitySubscribe(this.productId)
+        .then(() => this.isSubscribed = true);
+    }
+    let data = { id: this.productId, country_code: this.countryCode };
+    if (this.mobile.value !== '') {
+      data['mobile'] = this.mobile.value;
+    }
+    if (this.email.value !== '') {
+      data['email'] = this.email.value;
+    }
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => salla.api.product.availabilitySubscribe(data))
+      .then(() => this.isSubscribed = true) //no need to wait until finishing alert animation
+      .then(() => this.btn.stop())
+      .then(() => this.modal.hide())
+      .catch(() => this.btn.stop() && this.btn.enable());
+  }
+  render() {
+    return (h(Host, null,
+      this.isSubscribed
+        ? h("div", { class: "s-product-availability-subscribed" }, this.subscribedMessage)
+        : h("slot", null,
+          h("salla-button", { wide: true, onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)),
+      this.isUser || this.isSubscribed ? '' : this.renderModal()));
+  }
+  renderModal() {
+    return (h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "md" },
+      h("div", { class: "s-product-availability-body" },
+        this.channels_.includes('email') ? [
+          h("label", { class: "s-product-availability-label" }, this.emailLabel),
+          h("input", { class: "s-product-availability-input", placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" })
+        ] : '',
+        this.channels_.includes('sms') ? [
+          h("label", { class: "s-product-availability-label" }, this.mobileLabel),
+          h("input", { class: "s-product-availability-input", placeholder: this.mobilePlaceholder, ref: el => this.mobile = el, type: "text" }),
+          h("input", { type: "hidden", value: this.countryCode }),
+        ] : ''),
+      h("div", { slot: "footer", class: "s-product-availability-footer" },
+        h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.subscribeText),
+        h("salla-button", { wide: true, "btn-style": "outline" }, this.cancelText))));
+  }
+  static get is() { return "salla-product-availability"; }
+  static get properties() { return {
+    "channels": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "channels",
+      "reflect": false
+    },
+    "buttonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "button-text",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('pages.products.notify_availability')"
+    },
+    "countryCode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "country-code",
+      "reflect": false,
+      "defaultValue": "salla.config.country_code || 'SA'"
+    },
+    "subscribeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "subscribe-text",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.elements.submit')"
+    },
+    "cancelText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cancel-text",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.elements.cancel')"
+    },
+    "subTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sub-title",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('pages.products.notify_availability_subtitle')"
+    },
+    "mobileLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "mobile-label",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.elements.mobile')"
+    },
+    "emailLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-label",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.elements.email')"
+    },
+    "mobilePlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "mobile-placeholder",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.elements.mobile_placeholder')"
+    },
+    "emailPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "email-placeholder",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.elements.email_placeholder')"
+    },
+    "productId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-id",
+      "reflect": false,
+      "defaultValue": "salla.config.page.id"
+    },
+    "subscribedMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "subscribed-message",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('pages.products.notify_availability_success')"
+    },
+    "isSubscribed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-subscribed",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get methods() { return {
+    "submit": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "channels",
+      "methodName": "channelsWatcher"
+    }]; }
+}

package/dist/collection/components/salla-rating/order-feedback-response.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+.unicode{
+  unicode-bidi: plaintext;
+}

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

@@ -0,0 +1,277 @@
+import { Component, h, Method, Element, Host, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaRating {
+  constructor() {
+    this.stepsCount = 0;
+    this.currentIndex = 0;
+    this.submitted = [];
+    Helper.setHost(this.host);
+    salla.event.on('rating::show', () => this.show());
+  }
+  async show() {
+    return this.modal.show()
+      .then(() => salla.feedback.api.order(salla.get('page.id')))
+      .then(res => this.order = res.data)
+      .then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
+      .then(() => this.modal.stopLoading())
+      .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
+      .then(() => setTimeout(() => this.initiateRating(), 100));
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  initiateRating() {
+    this.handleWizard();
+    this.highlightSelectedStars();
+    salla.document.event.onSubmit('.s-rating-stars-element', function (event) {
+      // Prevent form from submitting
+      event.preventDefault();
+      // Get the selected star - activeElement is not supported in safari
+      let activeStars = event.target.querySelectorAll('.s-rating-btn-star.hovered');
+      let selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      let selectedIndex = parseInt(selected.dataset.star, 10);
+      event.target.querySelector('.rating_hidden_input').value = selectedIndex;
+      // Get all stars in this form (only search in the form, not the whole document)
+      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
+      event.target
+        .querySelectorAll('.s-rating-btn-star')
+        .forEach((star, index) => Helper.toggleElement(star, 'selected', 'un-selected', () => index < selectedIndex));
+      // Remove aria-pressed from any previously selected star
+      event.target.querySelectorAll('.s-rating-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
+      // Add aria-pressed role to the selected button
+      selected.setAttribute('aria-pressed', '');
+    });
+  }
+  // handle wizard
+  handleWizard() {
+    this.steps = this.host.querySelectorAll(".s-rating-step");
+    this.dots = this.host.querySelectorAll(".s-rating-step-dot");
+    this.showActiveStep();
+  }
+  showActiveStep(current = null) {
+    var _a;
+    this.currentTab = current || this.steps[this.currentIndex];
+    Helper.toggle('.s-rating-step', 's-rating-active', 's-rating-hidden', tab => tab == this.currentTab)
+      .toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', dot => dot != this.dots[this.currentIndex]);
+    // the animation
+    Helper.toggleElement(this.currentTab, 's-rating-unactive', 's-rating-hidden', () => true);
+    setTimeout(() => Helper.toggleElement(this.currentTab, 's-rating-active', 's-rating-unactive', () => true), 300);
+    // Btn text
+    let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
+    this.nextBtn.querySelector('.s-button-text').innerHTML = nextType
+      ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
+      : salla.lang.get('pages.rating.send_ratings');
+    setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
+  }
+  highlightSelectedStars() {
+    let hover = ['hovered'];
+    Helper.all('.s-rating-stars-element', el => {
+      let starElements = el.querySelectorAll('.s-rating-btn-star');
+      // remove hovered state from stars ---
+      el.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
+      starElements.forEach((starElement, index) => {
+        starElement.addEventListener('mouseover', () => {
+          starElement.classList.add(...hover);
+          if (index <= 1) {
+            starElement.previousElementSibling.tagName === 'BUTTON' ? starElement.previousElementSibling.classList.add(...hover) : null;
+          }
+          else {
+            for (let i = 0; i < index; i++) {
+              starElements[i].classList.add(...hover);
+            }
+          }
+        });
+        starElement.addEventListener('mouseout', () => starElement.classList.remove(...hover));
+      });
+    });
+  }
+  previousTab() {
+    this.currentIndex > 0 && this.currentIndex--;
+    Helper.toggleElement(this.backBtn, 's-rating-unvisiable', 'block', () => this.currentIndex == 0);
+    this.showActiveStep();
+  }
+  submit() {
+    this.submittedBefore() || this.validate();
+    salla.config.canLeave = false;
+    this.nextBtn.load()
+      .then(() => this.submittedBefore() || this.sendFeedback())
+      .then(() => this.currentTab.querySelectorAll('[name],.s-rating-btn-star').forEach(el => el.setAttribute('disabled', '')))
+      .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
+      .then(() => this.showActiveStep())
+      .then(() => Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true))
+      .finally(() => {
+      this.nextBtn.stop();
+      salla.config.canLeave = true;
+      this.currentIndex == this.stepsCount && this.showThankYou();
+    });
+  }
+  submittedBefore() {
+    return this.submitted.includes(this.currentIndex);
+  }
+  validate(rating = null, type = null) {
+    if (!rating && this.currentTab.dataset.type == 'products') {
+      return this.currentTab.querySelectorAll('.rating-outer-form').forEach(rating => this.validate(rating, 'product'));
+    }
+    rating = rating || this.currentTab;
+    let stars = rating.querySelector('.rating_hidden_input').value;
+    let comment = rating.querySelector('.s-rating-comment');
+    let validationMessage = rating.querySelector('.s-rating-validation-msg');
+    if (stars && comment.value && comment.value.length > 3) {
+      comment.classList.remove('s-rating-has-error');
+      validationMessage.innerHTML = '';
+      return;
+    }
+    type = type || rating['dataset'].type;
+    Helper.toggleElement(comment, 'save', 's-rating-has-error', el => el.value.length > 3);
+    throw validationMessage.innerHTML = stars
+      ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
+      : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');
+  }
+  sendFeedback() {
+    let data = {};
+    this.currentTab.querySelectorAll('[name]').forEach((input) => {
+      //decode names like `<input name="jamal[inner]" value="hi">` to be name(jamal), value: {inner:"hi"}
+      let inputData = salla.helpers.inputData(input.name, input.value, data);
+      data[inputData.name] = inputData.value;
+    });
+    if (Object.keys(data).length == 0) {
+      return;
+    }
+    data['order_id'] = salla.get('page.id');
+    data['type'] = this.currentTab.dataset.type;
+    this.submitted.push(this.currentIndex);
+    return salla.feedback.api[this.currentTab.dataset.type](data);
+  }
+  showThankYou() {
+    let seconds = 10;
+    let timeToClose = setInterval(() => {
+      this.thanksTime.innerHTML = '00:0' + (seconds--);
+      if (seconds > 0) {
+        return;
+      }
+      clearInterval(timeToClose);
+      this.thanksTime.remove();
+      this.hide().then(() => window.location.reload());
+    }, 1000);
+    this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
+    this.showActiveStep(this.thanksTab);
+  }
+  renderRatingStars(size, name = 'rating') {
+    return (h("form", { class: "s-rating-stars-element" },
+      h("input", { type: "hidden", class: "rating_hidden_input", name: name, value: "" }),
+      [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-btn-star s-rating-btn-star-` + size, "data-star": star },
+        h("i", { class: "sicon-star2" })))));
+  }
+  // render
+  render() {
+    return (h(Host, null,
+      h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
+        ? [h("div", { class: "s-rating-wrapper", ref: el => this.body = el },
+            this.order.testimonials_enabled ?
+              h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step", "data-type": "store" },
+                h("div", { class: "s-rating-rounded-icon" },
+                  h("img", { src: salla.get('store.logo'), alt: "store name", class: "s-rating-store-logo" })),
+                h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')),
+                h("div", { class: "s-rating-stars-company" },
+                  " ",
+                  this.renderRatingStars('large')),
+                h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }),
+                h("small", { class: "s-rating-validation-msg" }))
+              : '',
+            this.order.products_enabled
+              ? h("section", { class: "s-rating-step", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') },
+                h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }),
+                h("div", { class: "s-rating-product-details" },
+                  h("h3", { class: "s-rating-product-title" },
+                    " ",
+                    item.product.name),
+                  h("div", { class: "s-rating-stars-product" },
+                    " ",
+                    this.renderRatingStars('small', `products[${index}][rating]`)),
+                  h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }),
+                  h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index}][comment]`, class: "s-rating-comment" }),
+                  h("small", { class: "s-rating-validation-msg" })))))
+              : '',
+            this.order.shipping_enabled
+              ? h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step", "data-type": "shipping" },
+                h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }),
+                this.order.shipping.company.logo
+                  ? h("div", { class: "s-rating-rounded-icon" },
+                    h("img", { src: this.order.shipping.company.logo, class: "s-rating-shipping-logo", alt: this.order.shipping.company.name }))
+                  : h("span", { class: "s-rating-icon sicon-shipping-fast" }),
+                h("div", { class: "s-rating-title" },
+                  " ",
+                  salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name),
+                h("div", { class: "s-rating-stars-company" }, this.renderRatingStars('large')),
+                h("textarea", { name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }),
+                h("small", { class: "s-rating-validation-msg" }))
+              : '',
+            h("div", { class: "s-rating-thanks s-rating-hidden", ref: el => this.thanksTab = el },
+              h("span", { class: "s-rating-icon sicon-check-circle2" }),
+              h("h3", { class: "s-rating-thanks-title" }, salla.lang.get('pages.rating.thanks')),
+              h("div", { class: "s-rating-thanks-msg", innerHTML: this.order.thanks_message }),
+              h("time", { class: "s-rating-thanks-time", ref: el => this.thanksTime = el }))),
+          h("div", { class: "s-rating-footer" },
+            h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('common.elements.back')),
+            this.stepsCount > 1 ? h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '',
+            h("salla-button", { ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
+        : '')));
+  }
+  componentDidRender() {
+    //todo:: know from where there is hidden attributes to the doms🤔
+    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
+  }
+  static get is() { return "salla-rating"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-rating.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-rating.css"]
+  }; }
+  static get states() { return {
+    "order": {}
+  }; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<NodeJS.Timeout>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "NodeJS": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<Timeout>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+#s-search-modal .s-modal-wrapper {
+  align-items: flex-start;
+  padding: 0;
+}
+#s-search-modal .s-modal-spacer {
+  display: inline;
+}
+#s-search-modal .s-modal-body {
+  padding: 0;
+  max-width: 90%;
+  margin-top: 3.2rem;
+}
+#s-search-modal .s-modal-close {
+  top: 1rem;
+}