@salla.sa/twilight-components 1.0.20 → 1.0.21

package/dist/twilight-components/salla-rating.entry.js

@@ -18,8 +18,8 @@ const SallaRating = class {
      * Set to true to display shipping rating step
      */
     this.isShippingRating = false;
-    this.ratingChain = Promise.resolve();
     this.stepsCount = 0;
+    this.currentIndex = 0;
     Helper.setHost(this.host);
     salla.event.on('rating::show', () => this.show());
   }
@@ -37,69 +37,34 @@ const SallaRating = class {
   }
   initiateRating() {
     this.handleWizard();
-    this.handleSubmitRating();
     this.starsRating();
     this.highlightSelectedStars();
   }
   // handle wizard
   handleWizard() {
-    let index = 0, steps = this.host.querySelectorAll(".s-rating-step"), dots = this.host.querySelectorAll(".s-rating-step-dot"), nextBtnText = this.host.querySelector('#next-btn .s-button-text');
-    this.setModalHeight(steps[0]);
-    this.showActiveStep(steps, dots, index, nextBtnText);
-    Helper.onClick("#prev-btn", () => {
-      index > 0 && index--;
-      this.showActiveStep(steps, dots, index, nextBtnText);
-      index == 0 && Helper.toggle('#prev-btn', 's-rating-unvisiable', 'block', () => true);
-    });
-    Helper.onClick("#next-btn", () => {
-      this.ratingValidation();
-      if (index == this.stepsCount - 1) {
-        salla.event.dispatch("submit::order-rating");
-      }
-      else {
-        index < this.stepsCount - 1 && index++;
-        this.showActiveStep(steps, dots, index, nextBtnText);
-        Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true);
-      }
+    this.steps = this.host.querySelectorAll(".s-rating-step");
+    this.dots = this.host.querySelectorAll(".s-rating-step-dot");
+    this.showActiveStep();
+    Helper.onClick("#prev-btn", event => {
+      Helper.toggleElement(event.target, 's-rating-unvisiable', 'block', () => this.currentIndex == 0);
+      this.currentIndex > 0 && this.currentIndex--;
+      this.showActiveStep();
     });
   }
-  showActiveStep(steps, dots, index, nextBtnText) {
+  showActiveStep(current = null) {
     var _a;
-    // Active step
-    Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
-    Helper.toggleElement(steps[index], 's-rating-unactive', 's-rating-hidden', () => true);
-    setTimeout(() => Helper.toggleElement(steps[index], 's-rating-active', 's-rating-unactive', () => true), 200);
-    // Hanle dots
-    Helper.toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', () => true);
-    this.stepsCount > 1 && Helper.toggleElement(dots[index], 's-rating-bg-primary', 's-rating-bg-gray', () => true);
+    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
-    nextBtnText.innerHTML = ((_a = steps[index + 1]) === null || _a === void 0 ? void 0 : _a.dataset.stepName) || salla.lang.get('pages.rating.send_ratings');
-    this.setModalHeight(steps[index]);
-  }
-  setModalHeight(current) {
-    const wrapper = this.host.querySelector('.s-rating-wrapper');
-    setTimeout(() => wrapper === null || wrapper === void 0 ? void 0 : wrapper.setAttribute('style', 'height:' + (current === null || current === void 0 ? void 0 : current.scrollHeight) + 'px'));
-  }
-  // Listen to submit::order-rating event used in handleWizard()
-  handleSubmitRating() {
-    salla.event.on('submit::order-rating', () => this.sendRating().then(() => {
-      // Handle timer
-      let thankYouView = this.host.querySelector('.s-rating-thanks'), seconds = 10;
-      let timeToClose = setInterval(() => {
-        seconds--;
-        this.host.querySelector('.s-rating-thanks-time').innerHTML = `00:0${seconds}`;
-        if (seconds == 0) {
-          this.hide();
-          clearInterval(timeToClose);
-        }
-      }, 1000);
-      // Hide steps and show thanks msg
-      Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
-      this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
-      Helper.toggleElement(thankYouView, 's-rating-unactive', 's-rating-hidden', () => true);
-      setTimeout(() => Helper.toggleElement(thankYouView, 's-rating-active', 's-rating-unactive', () => true), 200);
-      this.setModalHeight(thankYouView);
-    }));
+    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'); });
   }
   // handle star rating
   starsRating() {
@@ -109,11 +74,11 @@ const SallaRating = class {
       // Prevent form from submitting
       event.preventDefault();
       // Get the selected star - activeElement is not supported in safari
-      var activeStars = event.target.querySelectorAll('.s-rating-btn-star.hovered');
-      var selected = activeStars[activeStars.length - 1];
+      let activeStars = event.target.querySelectorAll('.s-rating-btn-star.hovered');
+      let selected = activeStars[activeStars.length - 1];
       if (!selected)
         return;
-      var selectedIndex = parseInt(selected.dataset.star, 10);
+      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
@@ -155,85 +120,92 @@ const SallaRating = class {
             }
           }
         });
-        starElement.addEventListener('mouseout', () => {
-          starElement.classList.contains(...hover) ? starElement.classList.remove(...hover) : null;
-        });
+        starElement.addEventListener('mouseout', () => starElement.classList.remove(...hover));
       });
     });
   }
-  // send feedback rating and validation
-  sendRating() {
-    Helper.all('.s-rating-step', ratingStep => {
-      let type = ratingStep.dataset.type;
-      let formsData = [];
-      ratingStep.querySelectorAll('.rating-outer-form')
-        .forEach((form) => {
-        let formData = {};
-        form.querySelectorAll('[name]')
-          .forEach(function (input) {
-          let inputData = salla.helpers.inputData(input.name, input.value, formData);
-          formData[inputData.name] = inputData.value;
-        });
-        formsData = [];
-        formsData.push(formData);
-        this.sendFeedback(type, formsData);
-      });
+  sendFeedback(current = null, type = null) {
+    if (!current && this.currentTab.dataset.type === 'products') {
+      let forms = Array.from(this.currentTab.querySelectorAll('.rating-outer-form'));
+      let promise = this.sendFeedback(forms[0], 'product');
+      forms.slice(1).forEach(form => promise.then(() => this.sendFeedback(form, 'product')));
+      return promise;
+    }
+    type = type || this.currentTab.dataset.type;
+    current = current || this.currentTab;
+    let data = {};
+    current.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;
     });
-    return this.ratingChain;
-  }
-  sendFeedback(type, formsData) {
-    if (!formsData || formsData.length == 0) {
+    if (Object.keys(data).length == 0) {
+      return;
+    }
+    data['order_id'] = this.order.id;
+    data['type'] = this.currentTab.dataset.type;
+    return salla.feedback.api[type](data);
+  }
+  submit() {
+    this.validate();
+    if (this.currentIndex == this.stepsCount - 1) {
+      this.showThankYou();
       return;
     }
-    this.nextBtn.load();
     salla.config.canLeave = false;
-    this.ratingChain = salla.feedback.api[type](formsData[0])
-      .then(function () {
-      salla.config.canLeave = true;
-    }).catch(() => salla.config.canLeave = true);
-  }
-  ratingValidation() {
-    let errorMsg = '';
-    document.querySelectorAll('.s-rating-step.s-rating-active')
-      .forEach((ratingSection) => {
-      ratingSection.querySelectorAll('.rating-outer-form')
-        .forEach((rating) => {
-        let ratingInput = rating.querySelector('.rating_hidden_input');
-        let commentInput = rating.querySelector('.s-rating-comment');
-        let validationMessage = rating.querySelector('.s-rating-validation-msg');
-        if (ratingInput.value && commentInput.value && commentInput.value.length > 3) {
-          commentInput.classList.remove('s-rating-has-error');
-          validationMessage.innerHTML = '';
-          return;
-        }
-        else if (commentInput.value && commentInput.value.length > 3) {
-          commentInput.classList.remove('s-rating-has-error');
-        }
-        else {
-          commentInput.classList.add('s-rating-has-error');
-        }
-        errorMsg = ratingInput.value
-          ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + commentInput.getAttribute('placeholder'))
-          : (rating.dataset.starsError || salla.lang.get('pages.rating.rate_store_stars'));
-        validationMessage.innerHTML = errorMsg;
-      });
-    });
-    //Fire error to prevent going to next step
-    if (errorMsg) {
-      throw new Error(errorMsg);
+    this.nextBtn.load()
+      .then(() => this.sendFeedback())
+      .then(() => this.currentIndex < this.stepsCount - 1 && this.currentIndex++)
+      .then(() => this.showActiveStep())
+      .then(() => Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true))
+      .finally(() => this.nextBtn.stop() && (salla.config.canLeave = true));
+  }
+  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)', '');
+  }
+  showThankYou() {
+    let seconds = 10;
+    let timeToClose = setInterval(() => {
+      this.thanksTime.innerHTML = '00:0' + (seconds--);
+      seconds < 0 && this.hide() && clearInterval(timeToClose);
+    }, 1000);
+    this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
+    this.showActiveStep(this.thanksTab);
   }
   renderStoreRating() {
-    return (h("section", { class: "s-rating-step", "data-type": "store", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.store') }, h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_store_stars') }, h("input", { type: "hidden", name: "order_id", value: this.order.id }), h("input", { type: "hidden", name: "type", value: "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.getStarsRating('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" }))));
+    return 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.getStarsRating('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" }))
+      : '';
   }
   renderShippingRating() {
-    return (h("section", { class: "s-rating-step", "data-type": "shipping", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.shipping') }, h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_shipping_stars') }, h("input", { type: "hidden", name: "order_id", value: this.order.id }), h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), h("input", { type: "hidden", name: "type", value: "shipping" }), h("div", { class: "s-rating-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, alt: "company name", class: "s-rating-shipping-logo" })), h("h2", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name), h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), h("textarea", { id: "shippingReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-validation-msg" }))));
+    return 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 }), h("div", { class: "s-rating-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, alt: "company name", class: "s-rating-shipping-logo" })), h("h2", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name), h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('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" }))
+      : '';
   }
   renderProductsRating() {
-    return (h("section", { class: "s-rating-step", "data-type": "product", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.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.getStarsRating('small')), h("input", { type: "hidden", name: "order_id", value: this.order.id }), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("input", { type: "hidden", name: "type", value: "products" }), h("textarea", { "data-product-id": item.product.id, name: `products[${index}][comment]`, id: `productReview_${item.product.id}`, class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_product_rate') }), h("small", { class: "s-rating-validation-msg" }))))));
+    return 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.getStarsRating('small')), h("input", { type: "hidden", name: `products[${index}][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" })))))
+      : '';
   }
   renderThanksView() {
-    return (h("div", { class: "s-rating-thanks s-rating-hidden" }, h("span", { class: "s-rating-thanks-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.thanksMsg }), h("a", { href: "#!", onClick: () => this.hide(), class: "s-rating-thanks-btn" }, "\u0639\u0648\u062F\u0629 \u0625\u0644\u064A \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0637\u0644\u0628"), h("time", { class: "s-rating-thanks-time" })));
+    return (h("div", { class: "s-rating-thanks s-rating-hidden", ref: el => this.thanksTab = el }, h("span", { class: "s-rating-thanks-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.thanksMsg }), h("a", { href: "#!", onClick: () => this.hide(), class: "s-rating-thanks-btn" }, "\u0639\u0648\u062F\u0629 \u0625\u0644\u064A \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0637\u0644\u0628"), h("time", { class: "s-rating-thanks-time", ref: el => this.thanksTime = el })));
   }
   getStarsRating(size) {
     return (h("form", { class: "s-rating-stars-element" }, h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", 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" })))));
@@ -241,9 +213,8 @@ const SallaRating = class {
   // 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 " }, this.order.testimonials_enabled && this.renderStoreRating(), this.order.products_enabled && this.renderProductsRating(), this.order.shipping_enabled && this.renderShippingRating(), this.renderThanksView()),
-        h("div", { class: "s-rating-footer" }, h("button", { id: "prev-btn", 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(index => h("li", { class: `${index == 0 ? 's-rating-bg-primary' : 's-rating-bg-gray'} s-rating-step-dot` }))) : '', h("salla-button", { id: "next-btn", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")),]
+      ? [h("div", { class: "s-rating-wrapper", ref: el => this.body = el }, this.renderStoreRating(), this.renderProductsRating(), this.renderShippingRating(), this.renderThanksView()),
+        h("div", { class: "s-rating-footer" }, h("button", { id: "prev-btn", 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() {

package/dist/types/components/salla-rating/salla-rating.d.ts

@@ -19,23 +19,28 @@ export declare class SallaRating {
    * Set to true to display shipping rating step
    */
   isShippingRating: boolean;
-  private ratingChain;
   private stepsCount;
   private nextBtn;
   private modal;
+  private currentIndex;
+  private currentTab;
+  private thanksTab;
+  private body;
+  private thanksTime;
+  private steps;
+  private dots;
   host: HTMLElement;
   show(): Promise<NodeJS.Timeout>;
   hide(): Promise<HTMLElement>;
   protected initiateRating(): void;
   private handleWizard;
   private showActiveStep;
-  private setModalHeight;
-  private handleSubmitRating;
   private starsRating;
   private highlightSelectedStars;
-  private sendRating;
   private sendFeedback;
-  private ratingValidation;
+  private submit;
+  private validate;
+  private showThankYou;
   private renderStoreRating;
   private renderShippingRating;
   private renderProductsRating;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "license": "MIT",
   "keywords": [
     "twilight",