@salla.sa/twilight-components 1.0.15 → 1.0.17

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

@@ -2,7 +2,6 @@ import { Component, h, Prop, Method, Element, Host } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 export class SallaRating {
   constructor() {
-    this.stars = [1, 2, 3, 4, 5];
     this.order = {
       shipping: { id: 5622 },
       products: [
@@ -17,17 +16,17 @@ export class SallaRating {
           "id": "2314513454",
           "getOptimusRouteKey": "7351233357"
         },
-        // {
-        //   "title": "وحدة تحكم لمشغل العاب",
-        //   "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/NOa4kHvOkd1hBWHk3JIgAo1602oVACfuWGFz3vXv.jpg",
-        //   "price": "‏10,978.00 ر.س",
-        //   "qty": "‏2",
-        //   "totalBefore": "‏1120 ر.س",
-        //   "discount": "-5%",
-        //   "total": "‏1064 ر.س",
-        //   "id": "9842833",
-        //   "getOptimusRouteKey": "735152357"
-        // },
+        {
+          "title": "ميكروفون عالى الجودة",
+          "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/pMdEEyMVpZFj4L1Hrdm2g48AuiSx0TrKULBiOnPo.jpg",
+          "price": "‏10,978.00 ر.س",
+          "qty": "‏2",
+          "totalBefore": "‏1120 ر.س",
+          "discount": "-5%",
+          "total": "‏1064 ر.س",
+          "id": "2314513454",
+          "getOptimusRouteKey": "7351233357"
+        },
         {
           "title": "ساعة ذكية بنظام اندرويد",
           "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/T4kTqYNuPAZmPMLw1bx92RnjVMZyFszVXOUZQsFJ.jpg",
@@ -40,8 +39,21 @@ export class SallaRating {
           "getOptimusRouteKey": "73233357"
         }
       ],
+      storeLogo: "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/X3NKcY7nhaFQlR7kBBHvfDpMY48cerunKrmDA1gi.png",
+      shippingLogo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScPt4R6KaKDldrXb-9pUljFwL3m6A72BhN6p1qZJKprwC6VbCWC_8ASZgiJAoL_l7DepM&usqp=CAU"
     };
+    /**
+     * Set to true to display store rating step
+    */
+    this.isStoreRating = false;
+    /**
+     * Set to true to display products rating step
+    */
     this.isProductsRating = false;
+    /**
+     * Set to true to display shipping rating step
+    */
+    this.isShippingRating = false;
     this.ratingChain = Promise.resolve();
     this.stepsCount = 0;
     Helper.setHost(this.host);
@@ -54,90 +66,149 @@ export class SallaRating {
   }
   componentWillLoad() {
     this.stepsCount = [this.isStoreRating, this.isProductsRating, this.isShippingRating].filter(item => item).length;
-    this.getData();
+    // this.getData();
   }
   componentDidRender() {
     this.show();
     this.initiateRating();
   }
   initiateRating() {
-    this.highlightSelectedStars();
-    this.starsRating();
     this.handleWizard();
-    const step = this.host.querySelector('.step:first-child');
-    this.setModalHeight(step);
-    salla.event.on('submit::order-rating', () => this.sendRating().then(() => {
-      let seconds = 10;
-      let timeToClose = setInterval(() => {
-        seconds--;
-        this.host.querySelector('.close-time').innerHTML = `00:0${seconds}`;
-        if (seconds == 0) {
-          this.hide();
-          clearInterval(timeToClose);
-        }
-      }, 1000);
-      this.host.querySelector('.wizard-footer').classList.add('opacity-0', 'pointer-events-0');
-      Helper.toggle('.step', 'hidden', 'block', () => true);
-      Helper.toggle('.thankyou-view', 'is-opened', 'hidden', () => true);
-      const thankYouView = this.host.querySelector('.thankyou-view');
-      this.setModalHeight(thankYouView);
-      setTimeout(() => {
-        Helper.toggleElement(thankYouView, ['opacity-1', 'translate-x-0'], ['opacity-0', 'translate-x-3'], () => true);
-      }, 200);
-    }));
+    this.handleSubmitRating();
+    this.starsRating();
+    this.highlightSelectedStars();
   }
+  // getdata
+  // private getData() {
+  //   salla.api.order.endpointsMethods.details = 'get'
+  //   salla.order.api.details(salla.config.page.id).then(data => console.log(''));
+  // }
   // handle wizard
   handleWizard() {
-    var _a;
-    let index = 0, steps = this.host.querySelectorAll(".step"), dots = this.host.querySelectorAll(".step-dot"), nextBtnText = this.host.querySelector('#next-btn .btn-text');
-    // show first step
-    this.showActiveStep(steps, dots, index);
-    // handle btn text
-    nextBtnText.innerHTML = ((_a = steps[index + 1]) === null || _a === void 0 ? void 0 : _a.dataset.stepName) || 'إرسال التقييم';
+    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", () => {
-      var _a;
       index > 0 && index--;
-      this.showActiveStep(steps, dots, index);
-      nextBtnText.innerHTML = ((_a = steps[index + 1]) === null || _a === void 0 ? void 0 : _a.dataset.stepName) || 'إرسال التقييم';
-      index == 0 && Helper.toggle('#prev-btn', ['pointer-events-none', 'opacity-0'], 'block', () => true);
+      this.showActiveStep(steps, dots, index, nextBtnText);
+      index == 0 && Helper.toggle('#prev-btn', 's-rating-unvisiable', 'block', () => true);
     });
     Helper.onClick("#next-btn", () => {
-      var _a;
       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.innerHTML = ((_a = steps[index + 1]) === null || _a === void 0 ? void 0 : _a.dataset.stepName) || 'إرسال التقييم';
-        Helper.toggle('#prev-btn', 'block', ['pointer-events-none', 'opacity-0'], () => true);
+        this.showActiveStep(steps, dots, index, nextBtnText);
+        Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true);
       }
     });
   }
-  showActiveStep(steps, dots, currentIndex) {
-    Helper.toggle('.step-dot', 'bg-gray-200', 'bg-primay', () => true);
-    this.stepsCount > 1 && Helper.toggleElement(dots[currentIndex], 'bg-primary', 'bg-gray-200', () => true);
-    // hide all steps
-    Helper.toggle('.step', ['hidden', 'opacity-0', 'translate-x-3'], ['active', 'opacity-1', 'translate-x-0'], () => true);
-    Helper.toggleElement(steps[currentIndex], 'active', 'hidden', () => true);
-    this.setModalHeight(steps[currentIndex]);
-    setTimeout(() => {
-      Helper.toggleElement(steps[currentIndex], ['opacity-1', 'translate-x-0'], ['opacity-0', 'translate-x-3',], () => true);
-    }, 200);
+  showActiveStep(steps, dots, index, nextBtnText) {
+    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);
+    // 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-order-rating-steps-wrapper');
-    setTimeout(() => {
-      wrapper === null || wrapper === void 0 ? void 0 : wrapper.setAttribute('style', 'height:' + (current === null || current === void 0 ? void 0 : current.scrollHeight) + 'px');
+    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);
+    }));
+  }
+  // handle star rating 
+  starsRating() {
+    let selectedClasses = ['selected'];
+    // Listen for form submissions
+    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
+      var activeStars = event.target.querySelectorAll('.s-rating-btn-star.hovered');
+      var selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      var 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(function (star, index) {
+        if (index < selectedIndex) {
+          // Selected star or before it, Add highlighting
+          star.classList.add(...selectedClasses);
+          return;
+        }
+        // After selected star, Remove highlight
+        star.classList.remove(...selectedClasses);
+      });
+      // Remove aria-pressed from any previously selected star
+      var previousRating = event.target.querySelector('.s-rating-btn-star[aria-pressed="true"]');
+      if (previousRating) {
+        previousRating.removeAttribute('aria-pressed');
+      }
+      // Add aria-pressed role to the selected button
+      selected.setAttribute('aria-pressed', true);
+    });
+  }
+  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.contains(...hover) ? starElement.classList.remove(...hover) : null;
+        });
+      });
     });
   }
   // send feedback rating and validation
   sendRating() {
-    Helper.all('.rating-section', ratingSection => {
-      let type = ratingSection.dataset.type;
+    Helper.all('.s-rating-step', ratingStep => {
+      let type = ratingStep.dataset.type;
       let formsData = [];
-      ratingSection.querySelectorAll('.rating-outer-form')
+      ratingStep.querySelectorAll('.rating-outer-form')
         .forEach((form) => {
         let formData = {};
         form.querySelectorAll('[name]')
@@ -165,188 +236,110 @@ export class SallaRating {
   }
   ratingValidation() {
     let errorMsg = '';
-    document.querySelectorAll('.rating-section.active')
+    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('.comment');
-        // let sectionTitle = rating.querySelector('.section-title');
-        let validationMessage = rating.querySelector('.validation-message');
+        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('has-error');
-          // sectionTitle?.classList.remove('has-error', 'text-red-400');
+          commentInput.classList.remove('s-rating-has-error');
           validationMessage.innerHTML = '';
           return;
         }
         else if (commentInput.value && commentInput.value.length > 3) {
-          commentInput.classList.remove('has-error');
+          commentInput.classList.remove('s-rating-has-error');
         }
         else {
-          commentInput.classList.add('has-error');
+          commentInput.classList.add('s-rating-has-error');
         }
-        // sectionTitle?.classList.add('has-error', 'text-red-400');
         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 sending rating
+    //Fire error to prevent going to next step
     if (errorMsg) {
-      // scroll to first error
-      let ratingErrors = document.querySelectorAll('.has-error');
-      if (ratingErrors.length) {
-        let firstError = ratingErrors[0].offsetTop;
-        window.scrollTo({ top: firstError - 80 }); // 80 = fixed nav height
-      }
       throw new Error(errorMsg);
     }
   }
-  // getdata
-  getData() {
-    salla.api.order.endpointsMethods.details = 'get';
-    salla.order.api.details(salla.config.page.id).then(data => console.log(data));
-  }
-  // handle star rating
-  starsRating() {
-    let selectedClasses = ['selected', 'text-theme-yellow'];
-    // Listen for form submissions
-    salla.document.event.onSubmit('.rate-element', function (event) {
-      // Prevent form from submitting
-      event.preventDefault();
-      // Get the selected star - activeElement is not supported in safari
-      var activeStars = event.target.querySelectorAll('.btn--star.hovered');
-      var selected = activeStars[activeStars.length - 1];
-      if (!selected)
-        return;
-      var 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('.btn--star')
-        .forEach(function (star, index) {
-        if (index < selectedIndex) {
-          // Selected star or before it, Add highlighting
-          star.classList.add(...selectedClasses);
-          return;
-        }
-        // After selected star, Remove highlight
-        star.classList.remove(...selectedClasses);
-      });
-      // Remove aria-pressed from any previously selected star
-      var previousRating = event.target.querySelector('.star[aria-pressed="true"]');
-      if (previousRating) {
-        previousRating.removeAttribute('aria-pressed');
-      }
-      // Add aria-pressed role to the selected button
-      selected.setAttribute('aria-pressed', true);
-    });
-  }
-  highlightSelectedStars() {
-    let hover = ['hovered', 'text-theme-yellow'];
-    Helper.all('.rate-element', el => {
-      let starElements = el.querySelectorAll('.btn--star');
-      // remove hovered state from stars ---
-      el.addEventListener('mouseout', () => el.querySelectorAll('.btn--star').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.contains(...hover) ? starElement.classList.remove(...hover) : null;
-        });
-      });
-    });
-  }
   // render
   render() {
     return (h(Host, null,
       h("salla-modal", { class: "hidden", "modal-width": "w-[800px]", ref: modal => this.modal = modal, title: salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.orderId + ')</span>' },
-        h("div", { class: "s-order-rating-steps-wrapper mt-12 mb-10 transition-all duration-300 ease-elastic" },
+        h("div", { class: "s-rating-wrapper " },
           this.isStoreRating && this.renderStoreRating(),
           this.isProductsRating && this.renderProductsRating(),
           this.isShippingRating && this.renderShippingRating(),
           this.renderThanksView()),
-        h("div", { class: "wizard-footer relative flex justify-between items-center" },
-          h("button", { id: "prev-btn", class: "font-bold text-sm w-28 h-10 px-4 text-primary hover:text-primary-d opacity-0 pointer-events-none duration-300 transition-all" }, "\u0627\u0644\u0633\u0627\u0628\u0642"),
+        h("div", { class: "s-rating-footer" },
+          h("button", { id: "prev-btn", class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('pages.order.rating_prev')),
           this.stepsCount > 1 ?
-            h("ul", { class: "flex justify-center text-center space-s-1.5 flex-1" }, [0, 1, 2].slice(0, this.stepsCount).map(index => h("li", { class: `${index == 0 ? 'bg-primary' : 'bg-gray-200'} step-dot w-2.5 h-2.5 rounded-full transition-colors duration-300` }))) : '',
-          h("salla-button", { id: "next-btn", class: "w-28", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")))));
+            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")))));
   }
   renderStoreRating() {
-    return (h("section", { class: "step rating-section active transition-all duration-500 opacity-0 translate-x-3 hidden", "data-type": "store", "data-step-name": "\u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u062A\u062C\u0631" },
-      h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_store_stars') },
+    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.orderId }),
         h("input", { type: "hidden", name: "type", value: "store" }),
-        h("div", { class: "flex flex-col items-center " },
-          h("div", { class: "w-28 h-28 border border-gray-200 rounded-full flex items-center justify-center mb-4" },
-            h("img", { src: "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/X3NKcY7nhaFQlR7kBBHvfDpMY48cerunKrmDA1gi.png", alt: "store name", class: "w-12 object-contain" })),
-          h("h2", { class: "section-title text-lg font-bold mb-4" }, salla.lang.get('pages.rating.rate_the_store'))),
-        h("div", { class: "rating-wrap flex items-center flex justify-center mb-4" },
-          h("form", { class: "rate-element rate-element--has-label" }, this.getStarsRating())),
-        h("textarea", { id: "storeReview", name: "comment", class: "form-input comment h-20", placeholder: salla.lang.get('pages.rating.write_store_rate') }),
-        h("small", { class: "text-red-400 validation-message" }))));
-  }
-  renderProductsRating() {
-    return (h("section", { class: "step rating-section products-section transition-all duration-500 opacity-0 translate-x-3 hidden", "data-type": "product", "data-step-name": "\u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u0646\u062A\u062C\u0627\u062A" },
-      h("div", { class: "overflow-hidden" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form mb-8 last:mb-0", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars', { "item": item.title }) },
-        h("div", { class: "product-item" },
-          h("div", { class: "flex space-s-5" },
-            h("img", { src: item.image, alt: item.title, class: "w-18 h-14 object-cover rounded-md" }),
-            h("div", { class: "flex-1" },
-              h("h3", { class: "section-title leading-5 mb-1.5 font-bold  md:text-sm" },
-                " ",
-                item.title),
-              h("div", { class: "rw-product-entry__rate" },
-                h("div", { class: "rating-wrap flex items-center space-s-4" },
-                  h("form", { class: "rate-element rate-element--has-label" }, this.getStarsRating())),
-                h("input", { type: "hidden", name: "order_id", value: this.orderId }),
-                h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.getOptimusRouteKey }),
-                h("input", { type: "hidden", name: "type", value: "products" }),
-                h("textarea", { "data-product-id": item.id, name: `products[${index}][comment]`, id: `productReview_${item.id}`, class: "comment form-input h-20 product-review", placeholder: salla.lang.get('pages.rating.write_product_rate') }),
-                h("small", { class: "text-red-400 validation-message" }))))))))));
+        h("div", { class: "s-rating-rounded-icon" },
+          h("img", { src: this.order.storeLogo, 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: "step rating-section py-5 rounded-md transition-all duration-500 opacity-0 translate-x-3 hidden", "data-type": "shipping", "data-step-name": "\u062A\u0642\u064A\u064A\u0645 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646" },
-      h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_shipping_stars') },
+    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.orderId }),
         h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.id }),
         h("input", { type: "hidden", name: "type", value: "shipping" }),
-        h("div", { class: "flex flex-col items-center " },
-          h("div", { class: "w-28 h-28 overflow-hidden border border-gray-200 rounded-full flex items-center justify-center mb-4" },
-            h("img", { src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScPt4R6KaKDldrXb-9pUljFwL3m6A72BhN6p1qZJKprwC6VbCWC_8ASZgiJAoL_l7DepM&usqp=CAU", alt: "company name", class: "w-full h-full object-contain" })),
-          h("h2", { class: "section-title text-lg font-bold mb-4" },
-            " ",
-            salla.lang.get('pages.rating.rate_shipping'),
-            " \u0627\u0631\u0627\u0645\u0643\u0633")),
-        h("div", { class: "rating-wrap flex flex justify-center mb-4" },
-          h("form", { class: "rate-element ratFeedbackPresentere-element--has-label" }, this.getStarsRating())),
-        h("textarea", { id: "shippingReview", name: "comment", class: "form-input comment h-20 mb-2", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }),
-        h("small", { class: "text-red-400 validation-message" }))));
+        h("div", { class: "s-rating-rounded-icon" },
+          h("img", { src: this.order.shippingLogo, alt: "company name", class: "s-rating-shipping-logo" })),
+        h("h2", { class: "s-rating-title" },
+          " ",
+          salla.lang.get('pages.rating.rate_shipping'),
+          " \u0627\u0631\u0627\u0645\u0643\u0633"),
+        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" }))));
+  }
+  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.order.rate_product_stars') },
+      h("img", { src: item.image, alt: item.title, class: "s-rating-product-img" }),
+      h("div", { class: "s-rating-product-details" },
+        h("h3", { class: "s-rating-product-title" },
+          " ",
+          item.title),
+        h("div", { class: "s-rating-stars-product" },
+          " ",
+          this.getStarsRating('small')),
+        h("input", { type: "hidden", name: "order_id", value: this.orderId }),
+        h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.getOptimusRouteKey }),
+        h("input", { type: "hidden", name: "type", value: "products" }),
+        h("textarea", { "data-product-id": item.id, name: `products[${index}][comment]`, id: `productReview_${item.id}`, class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_product_rate') }),
+        h("small", { class: "s-rating-validation-msg" }))))));
   }
   renderThanksView() {
-    return (h("div", { class: "thankyou-view px-8 text-center transition-all duration-500 opacity-0 translate-x-3 hidden" },
-      h("span", { class: "w-20 h-20 text-4xl inline-flex justify-center items-center bg-gray-50 rounded-full text-primary sicon-check-circle2" }),
-      h("div", { class: "mt-4 mb-6" },
-        h("h3", { class: "font-bold" }, salla.lang.get('pages.rating.thanks')),
-        h("div", { class: "text-gray-400 text-sm", innerHTML: this.thanksMsg })),
-      h("a", { href: "#!", onClick: () => this.hide(), class: "btn btn-primary h-10 flex-none px-8" }, "\u0639\u0648\u062F\u0629 \u0625\u0644\u064A \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0637\u0644\u0628"),
-      h("time", { class: "close-time text-gray-400 block h-6 mt-3 text-sm" })));
+    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" })));
   }
-  getStarsRating() {
-    return (h("div", { class: "mb-1" },
+  getStarsRating(size) {
+    return (h("form", { class: "s-rating-stars-element" },
       h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }),
-      this.stars.map((star) => h("button", { type: "submit", class: "btn btn--transparent px-1 text-2xl text-gray-400 btn--star", "data-star": star },
+      [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" })))));
   }
   static get is() { return "salla-rating"; }
@@ -369,7 +362,7 @@ export class SallaRating {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Ratted order Id"
       },
       "attribute": "order-id",
       "reflect": false
@@ -386,7 +379,7 @@ export class SallaRating {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Display this message after sending user feedback"
       },
       "attribute": "thanks-msg",
       "reflect": false
@@ -403,10 +396,11 @@ export class SallaRating {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Set to true to display store rating step"
       },
       "attribute": "is-store-rating",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     },
     "isProductsRating": {
       "type": "boolean",
@@ -420,7 +414,7 @@ export class SallaRating {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Set to true to display products rating step"
       },
       "attribute": "is-products-rating",
       "reflect": false,
@@ -438,10 +432,11 @@ export class SallaRating {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Set to true to display shipping rating step"
       },
       "attribute": "is-shipping-rating",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get methods() { return {

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

@@ -13,7 +13,7 @@ export class SallaSearch {
      */
     this.noResultsText = salla.lang.get('common.elements.no_options');
     Helper.setHost(this.host);
-    this.buttonSlot = ((_a = Helper.getElement('[slot="button"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="sicon-search font-bold"></i>';
+    this.buttonSlot = ((_a = Helper.getElement('[slot="button"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="sicon-search"></i>';
     this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.getDefaultProductSlot();
   }
   onModalClose() {
@@ -56,7 +56,7 @@ export class SallaSearch {
   render() {
     var _a;
     return (h(Host, { class: "s-search" },
-      h("button", { onClick: () => this.modal.show(), class: "s-search-button-icon", innerHTML: this.buttonSlot }),
+      h("button", { onClick: () => this.modal.show(), class: "s-search-button", innerHTML: this.buttonSlot }),
       h("salla-modal", { ref: modal => this.modal = modal },
         h("div", { class: "s-search-container", slot: "body", ref: container => this.container = container },
           h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }),
@@ -123,7 +123,7 @@ export class SallaSearch {
   }; }
   static get elementRef() { return "host"; }
   static get listeners() { return [{
-      "name": "close",
+      "name": "modalClosed",
       "method": "onModalClose",
       "target": undefined,
       "capture": false,