@salla.sa/twilight-components 1.0.7 → 1.0.9

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-localization.cjs",[[4,"salla-localization",{"show":[64],"hide":[64]}]]],["order-rating.cjs",[[0,"order-rating",{"order":[8]}]]],["salla-search.cjs",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]],["salla-button.cjs",[[4,"salla-button",{"kind":[513],"loading":[516],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["multi-warehouse_3.cjs",[[4,"multi-warehouse",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}],[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[1,"modal-width"],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1],"show":[64],"hide":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-localization.cjs",[[4,"salla-localization",{"show":[64],"hide":[64]}]]],["salla-verify.cjs",[[0,"salla-verify"]]],["order-rating.cjs",[[0,"order-rating",{"order":[8]}]]],["salla-search.cjs",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]],["salla-button.cjs",[[4,"salla-button",{"kind":[513],"loading":[516],"disabled":[516],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["multi-warehouse_3.cjs",[[4,"multi-warehouse",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}],[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[1,"modal-width"],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1],"show":[64],"hide":[64],"setTitle":[64]}]]]], options);
   });
 };
 

package/dist/cjs/multi-warehouse_3.cjs.entry.js

@@ -97,6 +97,8 @@ const SallaModal = class {
     this.icon = 'sicon-cancel';
     salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
     salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
+    this.title = this.host.title;
+    this.host.removeAttribute('title');
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -116,6 +118,10 @@ const SallaModal = class {
     this.host.removeAttribute('visible');
     return this.host;
   }
+  async setTitle(title) {
+    this.title = title;
+    return this.host;
+  }
   toggleModal(isOpen) {
     Helper.Helper.toggleElement(this.host.querySelector('.s-modal-overlay'), 'ease-out duration-300 opacity-100', 'opacity-0', () => isOpen)
       .toggleElement(this.host.querySelector('.s-modal-body'), 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100', //add these classes
@@ -142,7 +148,7 @@ const SallaModal = class {
           's-modal-text-error': this.error,
           's-modal-text-success': this.success
         } }))
-      : '', index.h("div", { class: "s-modal-title", innerHTML: this.host.title }), index.h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle }))), index.h("slot", null), index.h("slot", { name: "footer" })))));
+      : '', index.h("div", { class: "s-modal-title", innerHTML: this.title }), index.h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle }))), index.h("slot", null), index.h("slot", { name: "footer" })))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/order-rating.cjs.entry.js

@@ -62,37 +62,62 @@ const OrderRating = class {
         isShippingRating: true,
       }
     };
+    this.ratingChain = Promise.resolve();
+    this.wizardInex = 0;
+  }
+  componentDidRender() {
+    this.initiateRating();
   }
   render() {
-    return (index.h(index.Host, null, this.order.settings.isProductsRating && this.renderProductsRating(), this.order.settings.isStoreRating && this.renderStoreRating(), this.order.settings.isShippingRating && this.renderShippingRating()));
+    return (index.h(index.Host, null, index.h("div", { class: "pannel__body" }, this.order.settings.isStoreRating && this.renderStoreRating(), this.order.settings.isProductsRating && this.renderProductsRating(), this.order.settings.isShippingRating && this.renderShippingRating()), index.h("div", { class: "pannel__footer relative flex justify-between items-center" }, index.h("button", { id: "prev-btn", class: "font-bold text-sm text-primary hidden" }, "\u0627\u0644\u0633\u0627\u0628\u0642"), index.h("ul", { class: "flex justify-center text-center space-s-1.5 py-8 flex-1" }, index.h("li", { class: "cursor-pointer w-2.5 h-2.5 bg-primary rounded-full transition-colors duration-300" }), index.h("li", { class: "cursor-pointer w-2.5 h-2.5 bg-gray-200 rounded-full transition-colors duration-300" }), index.h("li", { class: "cursor-pointer w-2.5 h-2.5 bg-gray-200 rounded-full transition-colors duration-300" })), index.h("button", { id: "next-btn", class: "btn btn-primary h-10 px-8 flex-none" }, "\u0627\u0644\u062A\u0627\u0644\u064A"))));
   }
   renderProductsRating() {
-    return (index.h("section", { class: "rating-section products-section", "data-type": "product" }, index.h("div", { class: "bg-white mb-5 p-5 rounded-md overflow-hidden mb-10" }, this.order.products.map((item, index$1) => {
+    return (index.h("section", { class: "step rating-section products-section hidden", "data-type": "product" }, index.h("div", { class: "bg-white mb-5 p-5 rounded-md overflow-hidden mb-10" }, this.order.products.map((item, index$1) => {
       var _a;
       return index.h("div", { class: "rating-outer-form", "data-stars-error": `يرجى تقييم (${item.title}) بواسطة النجمات` }, index.h("div", { class: "product-item mb-4" }, index.h("div", { class: "mb-5" }, index.h("div", { class: "flex space-s-5 mb-8" }, index.h("img", { src: item.image, alt: item.title, class: "w-18 h-14 object-cover rounded-md" }), index.h("div", { class: "flex-1" }, index.h("h3", { class: "section-title leading-5 mb-1.5 md:text-base" }, " ", item.title), index.h("div", { class: "rw-product-entry__rate" }, index.h("div", { class: "rating-wrap flex items-center space-s-4" }, index.h("form", { class: "rate-element rate-element--has-label" }, this.getStarsRating()), index.h("p", { class: "rate-label fix-align font-xsm my-0" })), index.h("input", { type: "hidden", name: "order_id", value: (_a = this.order) === null || _a === void 0 ? void 0 : _a.order_id }), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.getOptimusRouteKey }), index.h("input", { type: "hidden", name: "type", value: "products" }), index.h("textarea", { "data-product-id": item.id, name: `products[${index$1}][comment]`, id: `productReview_${item.id}`, class: "comment form-input h-20 product-review", placeholder: `اضف رأيك عن المنتج (${item.title})` }), index.h("small", { class: "text-red-400 validation-message" })))))));
     }))));
   }
   renderStoreRating() {
-    return (index.h("section", { class: "rating-section bg-white my-10 p-5 rounded-md mb-5", "data-type": "store" }, index.h("div", { class: "rating-outer-form", "data-stars-error": "\u064A\u0631\u062C\u0649 \u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u062A\u062C\u0631 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0646\u062C\u0645\u0627\u062A" }, index.h("input", { type: "hidden", name: "order_id", value: this.order.order_id }), index.h("input", { type: "hidden", name: "type", value: "store" }), index.h("h2", { class: "section-title text-lg font-bold mb-5" }, "\u0643\u064A\u0641 \u0643\u0627\u0646\u062A \u062A\u062C\u0631\u0628\u062A\u0643 \u0645\u0639 \u0627\u0644\u0645\u062A\u062C\u0631 \u0647\u0630\u0647 \u0627\u0644\u0645\u0631\u0629"), index.h("div", { class: "mb-2" }, index.h("textarea", { id: "storeReview", name: "comment", class: "form-input comment h-20", placeholder: "\u0627\u0636\u0641 \u0631\u0623\u064A\u0643 \u0639\u0646 \u0627\u0644\u0645\u062A\u062C\u0631.." })), index.h("div", { class: "rating-wrap flex items-center space-s-4" }, index.h("form", { class: "rate-element rate-element--has-label" }, this.getStarsRating()), index.h("p", { class: "rate-label fix-align font-sm center mb-0" })), index.h("small", { class: "text-red-400 validation-message" }))));
+    return (index.h("section", { class: "step rating-section bg-white my-10 p-5 rounded-md mb-5 active", "data-type": "store" }, index.h("div", { class: "rating-outer-form", "data-stars-error": "\u064A\u0631\u062C\u0649 \u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u062A\u062C\u0631 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0646\u062C\u0645\u0627\u062A" }, index.h("input", { type: "hidden", name: "order_id", value: this.order.order_id }), index.h("input", { type: "hidden", name: "type", value: "store" }), index.h("h2", { class: "section-title text-lg font-bold mb-5" }, "\u0643\u064A\u0641 \u0643\u0627\u0646\u062A \u062A\u062C\u0631\u0628\u062A\u0643 \u0645\u0639 \u0627\u0644\u0645\u062A\u062C\u0631 \u0647\u0630\u0647 \u0627\u0644\u0645\u0631\u0629"), index.h("div", { class: "mb-2" }, index.h("textarea", { id: "storeReview", name: "comment", class: "form-input comment h-20", placeholder: "\u0627\u0636\u0641 \u0631\u0623\u064A\u0643 \u0639\u0646 \u0627\u0644\u0645\u062A\u062C\u0631.." })), index.h("div", { class: "rating-wrap flex items-center space-s-4" }, index.h("form", { class: "rate-element rate-element--has-label" }, this.getStarsRating()), index.h("p", { class: "rate-label fix-align font-sm center mb-0" })), index.h("small", { class: "text-red-400 validation-message" }))));
   }
   renderShippingRating() {
-    return (index.h("section", { class: "rating-section bg-white my-10 p-5 rounded-md mb-5", "data-type": "shipping" }, index.h("div", { class: "rating-outer-form", "data-stars-error": "\u064A\u0631\u062C\u0649 \u062A\u0642\u064A\u064A\u0645 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0646\u062C\u0645\u0627\u062A" }, index.h("input", { type: "hidden", name: "order_id", value: this.order.order_id }), index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.id }), index.h("input", { type: "hidden", name: "type", value: "shipping" }), index.h("h2", { class: "section-title text-lg font-bold mb-5" }, "\u062E\u0628\u0631\u0646\u0627 \u0639\u0646 \u062A\u062C\u0631\u0628\u062A\u0643 \u0645\u0639 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646"), index.h("div", { class: "mb-2" }, index.h("textarea", { id: "shippingReview", name: "comment", class: "form-input comment h-20 mb-2", placeholder: "\u0627\u0636\u0641 \u0631\u0623\u064A\u0643 \u0639\u0646 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646" })), index.h("div", { class: "rating-wrap flex items-center space-s-4" }, index.h("form", { class: "rate-element ratFeedbackPresentere-element--has-label" }, this.getStarsRating()), index.h("p", { class: "rate-label fix-align font-sm center mb-0" })), index.h("small", { class: "text-red-400 validation-message" }))));
+    return (index.h("section", { class: "step rating-section bg-white my-10 p-5 rounded-md mb-5 hidden", "data-type": "shipping" }, index.h("div", { class: "rating-outer-form", "data-stars-error": "\u064A\u0631\u062C\u0649 \u062A\u0642\u064A\u064A\u0645 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0646\u062C\u0645\u0627\u062A" }, index.h("input", { type: "hidden", name: "order_id", value: this.order.order_id }), index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.id }), index.h("input", { type: "hidden", name: "type", value: "shipping" }), index.h("h2", { class: "section-title text-lg font-bold mb-5" }, "\u062E\u0628\u0631\u0646\u0627 \u0639\u0646 \u062A\u062C\u0631\u0628\u062A\u0643 \u0645\u0639 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646"), index.h("div", { class: "mb-2" }, index.h("textarea", { id: "shippingReview", name: "comment", class: "form-input comment h-20 mb-2", placeholder: "\u0627\u0636\u0641 \u0631\u0623\u064A\u0643 \u0639\u0646 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646" })), index.h("div", { class: "rating-wrap flex items-center space-s-4" }, index.h("form", { class: "rate-element ratFeedbackPresentere-element--has-label" }, this.getStarsRating()), index.h("p", { class: "rate-label fix-align font-sm center mb-0" })), index.h("small", { class: "text-red-400 validation-message" }))));
   }
   getStarsRating() {
     return (index.h("div", { class: "mb-1" }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }), this.stars.map((star) => index.h("button", { type: "submit", class: "btn btn--transparent px-1 text-lg text-gray-400 btn--star", "data-star": star, "data-text": this.order.ratingMessage[`${star}`] }, index.h("i", { class: "sicon-star2" })))));
   }
-  //========================= Start Rating Logic =========================//
   initiateRating() {
     this.highlightSelectedStars();
     this.starsRating();
+    this.handleWizard();
     //show submitRating Button Only When there is a comment field
-    Helper.Helper.app.toggle('#submitRating', 'btn', 'hidden', () => Helper.Helper.app.element('#shippingReview,#storeReview,.product-review'));
-    this.ratingChain = Promise.resolve();
-    Helper.Helper.app.onClick('#submitRating', () => this.sendRating().then(() => window.location.reload()));
+    // Helper.toggle('#submitRating', 'btn', 'hidden', () => Helper.element('#shippingReview,#storeReview,.product-review'))
+    // this.ratingChain = Promise.resolve();
+    // Helper.onClick('#submitRating', () => this.sendRating().then(() => window.location.reload()));
+    salla.event.on('submit::order-rating', () => this.sendRating().then(() => window.location.reload()));
+  }
+  handleWizard() {
+    let steps = document.querySelectorAll(".step"), stepsCount = document.querySelectorAll(".step").length;
+    Helper.Helper.onClick("#prev-btn", () => {
+      this.wizardInex > 0 && this.wizardInex--;
+      this.showActiveStep(steps);
+      this.wizardInex == 0 && Helper.Helper.toggle('#prev-btn', 'hidden', 'block', () => true);
+    });
+    Helper.Helper.onClick("#next-btn", () => {
+      this.ratingValidation();
+      this.wizardInex == stepsCount - 1 && salla.event.dispatch("submit::order-rating");
+      this.wizardInex < stepsCount - 1 && this.wizardInex++;
+      this.showActiveStep(steps);
+      Helper.Helper.toggle('#prev-btn', 'block', 'hidden', () => true);
+    });
+  }
+  showActiveStep(steps) {
+    Helper.Helper.toggle('.step', 'hidden', 'active', () => true);
+    Helper.Helper.toggleElement(steps[this.wizardInex], 'active', 'hidden', () => true);
   }
   sendRating() {
-    this.ratingValidation();
-    Helper.Helper.app.all('.rating-section', ratingSection => {
+    // this.ratingValidation()
+    Helper.Helper.all('.rating-section', ratingSection => {
       let type = ratingSection.dataset.type;
       let formsData = [];
       ratingSection.querySelectorAll('.rating-outer-form')
@@ -122,7 +147,7 @@ const OrderRating = class {
   }
   ratingValidation() {
     let errorMsg = '';
-    document.querySelectorAll('.rating-section')
+    document.querySelectorAll('.rating-section.active')
       .forEach((ratingSection) => {
       ratingSection.querySelectorAll('.rating-outer-form')
         .forEach((rating) => {
@@ -163,7 +188,7 @@ const OrderRating = class {
   // for hovered star ---
   highlightSelectedStars() {
     let hover = ['hovered', 'text-theme-yellow'];
-    Helper.Helper.app.all('.rate-element', el => {
+    Helper.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)));

package/dist/cjs/salla-button.cjs.entry.js

@@ -12,6 +12,7 @@ const SallaButton = class {
     index.registerInstance(this, hostRef);
     this.kind = 'primary';
     this.loading = false;
+    this.disabled = false;
     this.hostAttributes = {};
     for (let i = 0; i < this.host.attributes.length; i++) {
       this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
@@ -30,10 +31,10 @@ const SallaButton = class {
     return this.host;
   }
   async disable() {
-    this.btn.setAttribute('disabled', '');
+    this.host.setAttribute('disabled', '');
   }
   async enable() {
-    this.btn.removeAttribute('disabled');
+    this.host.removeAttribute('disabled');
   }
   handleVisible(newKind, oldKind) {
     this.btn.classList.remove('btn-' + oldKind);
@@ -43,7 +44,7 @@ const SallaButton = class {
     Helper.Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
   }
   render() {
-    return (index.h("button", Object.assign({ ref: el => this.btn = el }, this.hostAttributes), index.h("slot", null), this.loading ? index.h("span", { class: "loader loader--small s-button-loader" }) : ''));
+    return (index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("slot", null), this.loading ? index.h("span", { class: "loader loader--small s-button-loader" }) : ''));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/salla-localization.cjs.entry.js

@@ -11,6 +11,12 @@ const SallaLocalization = class {
     Helper.Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
   }
+  setCurrentLanguage(language) {
+    this.language = language;
+  }
+  setCurrentCurrency(currency) {
+    this.currency = currency;
+  }
   async show() {
     return this.modal.show();
   }
@@ -21,16 +27,13 @@ const SallaLocalization = class {
     let url;
     this.btn.load()
       .then(() => {
-      let code = Helper.Helper.val('[name=currency]:checked');
-      if (code !== salla.config.currency.code) {
+      if (this.currency && this.currency.code !== salla.config.currency.code) {
         url = window.location.href;
-        return salla.currency.api.change(code);
+        return salla.currency.api.change(this.currency.code);
       }
-      //binding
     }).then(() => {
-      let language = Helper.Helper.val('[name=lang]:checked');
-      if (language !== salla.config.language.code) {
-        url = salla.config.languages.filter(lang => lang.code === language)[0].url;
+      if (this.language && this.language.code !== salla.config.language.code) {
+        url = this.language.url;
       }
     }).then(() => this.btn.stop())
       .then(() => this.hide())
@@ -38,9 +41,9 @@ const SallaLocalization = class {
   }
   render() {
     return (index.h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal }, index.h("slot", { name: "header" }, index.h("div", { slot: "header" })), index.h("div", { class: "s-localization-inner" }, salla.config.languages
-      ? index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, salla.lang.get('common.titles.language')), index.h("fieldset", { class: "s-localization-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_language')), index.h("div", { class: "s-localization-section-inner" }, salla.config.languages.map(lang => index.h("div", { class: "flex items-center" }, index.h("input", { id: 'lang-' + lang.code.toLowerCase(), class: "s-localization-input", name: "lang", checked: salla.config.language.code == lang.code, type: "radio", value: lang.code }), index.h("label", { htmlFor: 'lang-' + lang.code.toLowerCase(), class: "s-localization-label" }, index.h("span", null, lang.name), index.h("div", { class: 's-localization-flag flag iti__flag iti__' + lang.country_code })))))))
+      ? index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, salla.lang.get('common.titles.language')), index.h("fieldset", { class: "s-localization-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_language')), index.h("div", { class: "s-localization-section-inner" }, salla.config.languages.map(lang => index.h("div", { class: "flex items-center" }, index.h("input", { class: "s-localization-input", checked: salla.config.language.code == lang.code, onChange: () => this.setCurrentLanguage(lang), id: 'lang-' + lang.code.toLowerCase(), name: "language", type: "radio", value: lang.code }), index.h("label", { htmlFor: 'lang-' + lang.code.toLowerCase(), class: "s-localization-label" }, index.h("span", null, lang.name), index.h("div", { class: 's-localization-flag flag iti__flag iti__' + lang.country_code })))))))
       : '', salla.config.currencies
-      ? index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, salla.lang.get('common.titles.currency')), index.h("fieldset", { class: "s-localization-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_currency')), index.h("div", { class: "s-localization-section-inner" }, salla.config.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", checked: salla.config.currency.code == currency.code, id: 'currency-' + currency.code, name: "currency", type: "radio", value: currency.code }), index.h("label", { class: "s-localization-label", htmlFor: 'currency-' + currency.code }, index.h("span", null, currency.name), index.h("small", { class: "s-localization-currency" }, currency.code)))))))
+      ? index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, salla.lang.get('common.titles.currency')), index.h("fieldset", { class: "s-localization-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_currency')), index.h("div", { class: "s-localization-section-inner" }, salla.config.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", checked: salla.config.currency.code == currency.code, onChange: () => this.setCurrentCurrency(currency), id: 'currency-' + currency.code, name: "currency", type: "radio", value: currency.code }), index.h("label", { class: "s-localization-label", htmlFor: 'currency-' + currency.code }, index.h("span", null, currency.name), index.h("small", { class: "s-localization-currency" }, currency.code)))))))
       : ''), index.h("p", { slot: "footer" }, index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.submit(), class: "w-full" }, salla.lang.get('common.elements.ok'))))));
   }
   get host() { return index.getElement(this); }

package/dist/cjs/salla-verify.cjs.entry.js

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-23da2c6b.js');
+const Helper = require('./Helper-8c75b6ac.js');
+
+const SallaVerify = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    Helper.Helper.setHost(this.host);
+    salla.event.on('profile::verify.mobile', data => this.show(data));
+  }
+  show({ international_mobile: mobile, _country_iso2: country_code }) {
+    this.mobile = mobile;
+    this.country_code = country_code;
+    this.resendTimer();
+    this.otpInputs = document.querySelectorAll('.s-verify-input');
+    this.otpInputs[0].focus();
+    Helper.Helper.onKeyUp('.s-verify-input', event => {
+      var _a, _b;
+      let key = event.keyCode || event.charCode;
+      salla.helpers.digitsOnly(event.target);
+      if (event.target.value) {
+        (_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+      else if ([8, 46].includes(key)) {
+        (_b = event.target.previousElementSibling) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+      this.toggleOTPSubmit();
+    });
+    Helper.Helper.on('paste', '.s-verify-input', event => {
+      let text = event.clipboardData.getData('text').toArabicDigits().replace(/[^0-9.]/g, '').replace('..', '.');
+      this.otpInputs.forEach((input, i) => input.value = text[i] || '');
+      this.toggleOTPSubmit();
+      setTimeout(() => this.otpInputs[3].focus(), 100);
+    });
+    return this.modal.show();
+  }
+  toggleOTPSubmit() {
+    let otp = [];
+    this.otpInputs.forEach(input => input.value && otp.push(input.value));
+    this.code.value = otp.join('');
+    if (otp.length === 4) {
+      this.btn.removeAttribute('disabled');
+      this.btn.click();
+      return;
+    }
+    this.btn.setAttribute('disabled', '');
+  }
+  resendTimer() {
+    Helper.Helper.showElement(this.resendMessage).hideElement(this.resend);
+    let resendAfter = 30;
+    let timerId = setInterval(() => {
+      if (resendAfter === -1) {
+        clearTimeout(timerId);
+        Helper.Helper.hideElement(this.resendMessage).showElement(this.resend);
+      }
+      else {
+        this.timer.innerHTML = `${resendAfter >= 10 ? resendAfter : '0' + resendAfter} : 00`;
+        resendAfter--;
+      }
+    }, 1000);
+  }
+  submit() {
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => salla.document.api.request('profile/verify-mobile', {
+      mobile: this.mobile,
+      country_code: this.country_code,
+      code: this.code.value
+    })).then(() => this.btn.stop() && this.btn.disable())
+      .then(() => this.modal.hide())
+      .then(() => window.location.reload())
+      .catch(() => this.btn.stop() && this.btn.enable());
+  }
+  resendCode() {
+    return this.btn.stop()
+      .then(() => this.btn.disable())
+      .then(() => {
+      this.otpInputs.forEach(input => input.value = '');
+      this.otpInputs[0].focus();
+    })
+      .then(() => salla.api.auth.resend({ phone: this.mobile, country_code: this.country_code }))
+      .then(() => this.resendTimer())
+      .catch(() => this.resendTimer());
+  }
+  render() {
+    return (index.h("salla-modal", { id: "s-verify", ref: modal => this.modal = modal, title: salla.lang.get('pages.profile.verify_title') }, index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("label", { class: "s-verify-label" }, salla.lang.get('pages.profile.verify_placeholder')), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-footer" }, index.h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')))));
+  }
+  get host() { return index.getElement(this); }
+};
+
+exports.salla_verify = SallaVerify;

package/dist/cjs/twilight-components.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-localization.cjs",[[4,"salla-localization",{"show":[64],"hide":[64]}]]],["order-rating.cjs",[[0,"order-rating",{"order":[8]}]]],["salla-search.cjs",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]],["salla-button.cjs",[[4,"salla-button",{"kind":[513],"loading":[516],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["multi-warehouse_3.cjs",[[4,"multi-warehouse",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}],[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[1,"modal-width"],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1],"show":[64],"hide":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-localization.cjs",[[4,"salla-localization",{"show":[64],"hide":[64]}]]],["salla-verify.cjs",[[0,"salla-verify"]]],["order-rating.cjs",[[0,"order-rating",{"order":[8]}]]],["salla-search.cjs",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]],["salla-button.cjs",[[4,"salla-button",{"kind":[513],"loading":[516],"disabled":[516],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["multi-warehouse_3.cjs",[[4,"multi-warehouse",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}],[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[1,"modal-width"],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1],"show":[64],"hide":[64],"setTitle":[64]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -6,7 +6,8 @@
     "./components/order-rating/order-rating.js",
     "./components/salla-button/salla-button.js",
     "./components/salla-localization/salla-localization.js",
-    "./components/salla-modal/salla-modal.js"
+    "./components/salla-modal/salla-modal.js",
+    "./components/salla-verify/salla-verify.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -54,15 +54,28 @@ export class OrderRating {
         isShippingRating: true,
       }
     };
+    this.ratingChain = Promise.resolve();
+    this.wizardInex = 0;
+  }
+  componentDidRender() {
+    this.initiateRating();
   }
   render() {
     return (h(Host, null,
-      this.order.settings.isProductsRating && this.renderProductsRating(),
-      this.order.settings.isStoreRating && this.renderStoreRating(),
-      this.order.settings.isShippingRating && this.renderShippingRating()));
+      h("div", { class: "pannel__body" },
+        this.order.settings.isStoreRating && this.renderStoreRating(),
+        this.order.settings.isProductsRating && this.renderProductsRating(),
+        this.order.settings.isShippingRating && this.renderShippingRating()),
+      h("div", { class: "pannel__footer relative flex justify-between items-center" },
+        h("button", { id: "prev-btn", class: "font-bold text-sm text-primary hidden" }, "\u0627\u0644\u0633\u0627\u0628\u0642"),
+        h("ul", { class: "flex justify-center text-center space-s-1.5 py-8 flex-1" },
+          h("li", { class: "cursor-pointer w-2.5 h-2.5 bg-primary rounded-full transition-colors duration-300" }),
+          h("li", { class: "cursor-pointer w-2.5 h-2.5 bg-gray-200 rounded-full transition-colors duration-300" }),
+          h("li", { class: "cursor-pointer w-2.5 h-2.5 bg-gray-200 rounded-full transition-colors duration-300" })),
+        h("button", { id: "next-btn", class: "btn btn-primary h-10 px-8 flex-none" }, "\u0627\u0644\u062A\u0627\u0644\u064A"))));
   }
   renderProductsRating() {
-    return (h("section", { class: "rating-section products-section", "data-type": "product" },
+    return (h("section", { class: "step rating-section products-section hidden", "data-type": "product" },
       h("div", { class: "bg-white mb-5 p-5 rounded-md overflow-hidden mb-10" }, this.order.products.map((item, index) => {
         var _a;
         return h("div", { class: "rating-outer-form", "data-stars-error": `يرجى تقييم (${item.title}) بواسطة النجمات` },
@@ -86,7 +99,7 @@ export class OrderRating {
       }))));
   }
   renderStoreRating() {
-    return (h("section", { class: "rating-section bg-white my-10 p-5 rounded-md mb-5", "data-type": "store" },
+    return (h("section", { class: "step rating-section bg-white my-10 p-5 rounded-md mb-5 active", "data-type": "store" },
       h("div", { class: "rating-outer-form", "data-stars-error": "\u064A\u0631\u062C\u0649 \u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u062A\u062C\u0631 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0646\u062C\u0645\u0627\u062A" },
         h("input", { type: "hidden", name: "order_id", value: this.order.order_id }),
         h("input", { type: "hidden", name: "type", value: "store" }),
@@ -99,7 +112,7 @@ export class OrderRating {
         h("small", { class: "text-red-400 validation-message" }))));
   }
   renderShippingRating() {
-    return (h("section", { class: "rating-section bg-white my-10 p-5 rounded-md mb-5", "data-type": "shipping" },
+    return (h("section", { class: "step rating-section bg-white my-10 p-5 rounded-md mb-5 hidden", "data-type": "shipping" },
       h("div", { class: "rating-outer-form", "data-stars-error": "\u064A\u0631\u062C\u0649 \u062A\u0642\u064A\u064A\u0645 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0646\u062C\u0645\u0627\u062A" },
         h("input", { type: "hidden", name: "order_id", value: this.order.order_id }),
         h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.id }),
@@ -118,18 +131,38 @@ export class OrderRating {
       this.stars.map((star) => h("button", { type: "submit", class: "btn btn--transparent px-1 text-lg text-gray-400 btn--star", "data-star": star, "data-text": this.order.ratingMessage[`${star}`] },
         h("i", { class: "sicon-star2" })))));
   }
-  //========================= Start Rating Logic =========================//
   initiateRating() {
     this.highlightSelectedStars();
     this.starsRating();
+    this.handleWizard();
     //show submitRating Button Only When there is a comment field
-    Helper.app.toggle('#submitRating', 'btn', 'hidden', () => Helper.app.element('#shippingReview,#storeReview,.product-review'));
-    this.ratingChain = Promise.resolve();
-    Helper.app.onClick('#submitRating', () => this.sendRating().then(() => window.location.reload()));
+    // Helper.toggle('#submitRating', 'btn', 'hidden', () => Helper.element('#shippingReview,#storeReview,.product-review'))
+    // this.ratingChain = Promise.resolve();
+    // Helper.onClick('#submitRating', () => this.sendRating().then(() => window.location.reload()));
+    salla.event.on('submit::order-rating', () => this.sendRating().then(() => window.location.reload()));
+  }
+  handleWizard() {
+    let steps = document.querySelectorAll(".step"), stepsCount = document.querySelectorAll(".step").length;
+    Helper.onClick("#prev-btn", () => {
+      this.wizardInex > 0 && this.wizardInex--;
+      this.showActiveStep(steps);
+      this.wizardInex == 0 && Helper.toggle('#prev-btn', 'hidden', 'block', () => true);
+    });
+    Helper.onClick("#next-btn", () => {
+      this.ratingValidation();
+      this.wizardInex == stepsCount - 1 && salla.event.dispatch("submit::order-rating");
+      this.wizardInex < stepsCount - 1 && this.wizardInex++;
+      this.showActiveStep(steps);
+      Helper.toggle('#prev-btn', 'block', 'hidden', () => true);
+    });
+  }
+  showActiveStep(steps) {
+    Helper.toggle('.step', 'hidden', 'active', () => true);
+    Helper.toggleElement(steps[this.wizardInex], 'active', 'hidden', () => true);
   }
   sendRating() {
-    this.ratingValidation();
-    Helper.app.all('.rating-section', ratingSection => {
+    // this.ratingValidation()
+    Helper.all('.rating-section', ratingSection => {
       let type = ratingSection.dataset.type;
       let formsData = [];
       ratingSection.querySelectorAll('.rating-outer-form')
@@ -159,7 +192,7 @@ export class OrderRating {
   }
   ratingValidation() {
     let errorMsg = '';
-    document.querySelectorAll('.rating-section')
+    document.querySelectorAll('.rating-section.active')
       .forEach((ratingSection) => {
       ratingSection.querySelectorAll('.rating-outer-form')
         .forEach((rating) => {
@@ -200,7 +233,7 @@ export class OrderRating {
   // for hovered star ---
   highlightSelectedStars() {
     let hover = ['hovered', 'text-theme-yellow'];
-    Helper.app.all('.rate-element', el => {
+    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)));

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

@@ -4,6 +4,7 @@ export class SallaButton {
   constructor() {
     this.kind = 'primary';
     this.loading = false;
+    this.disabled = false;
     this.hostAttributes = {};
     for (let i = 0; i < this.host.attributes.length; i++) {
       this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
@@ -22,10 +23,10 @@ export class SallaButton {
     return this.host;
   }
   async disable() {
-    this.btn.setAttribute('disabled', '');
+    this.host.setAttribute('disabled', '');
   }
   async enable() {
-    this.btn.removeAttribute('disabled');
+    this.host.removeAttribute('disabled');
   }
   handleVisible(newKind, oldKind) {
     this.btn.classList.remove('btn-' + oldKind);
@@ -35,7 +36,7 @@ export class SallaButton {
     Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
   }
   render() {
-    return (h("button", Object.assign({ ref: el => this.btn = el }, this.hostAttributes),
+    return (h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes),
       h("slot", null),
       this.loading ? h("span", { class: "loader loader--small s-button-loader" }) : ''));
   }
@@ -82,6 +83,24 @@ export class SallaButton {
       "attribute": "loading",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get methods() { return {

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

@@ -5,6 +5,12 @@ export class SallaLocalization {
     Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
   }
+  setCurrentLanguage(language) {
+    this.language = language;
+  }
+  setCurrentCurrency(currency) {
+    this.currency = currency;
+  }
   async show() {
     return this.modal.show();
   }
@@ -15,16 +21,13 @@ export class SallaLocalization {
     let url;
     this.btn.load()
       .then(() => {
-      let code = Helper.val('[name=currency]:checked');
-      if (code !== salla.config.currency.code) {
+      if (this.currency && this.currency.code !== salla.config.currency.code) {
         url = window.location.href;
-        return salla.currency.api.change(code);
+        return salla.currency.api.change(this.currency.code);
       }
-      //binding
     }).then(() => {
-      let language = Helper.val('[name=lang]:checked');
-      if (language !== salla.config.language.code) {
-        url = salla.config.languages.filter(lang => lang.code === language)[0].url;
+      if (this.language && this.language.code !== salla.config.language.code) {
+        url = this.language.url;
       }
     }).then(() => this.btn.stop())
       .then(() => this.hide())
@@ -41,7 +44,7 @@ export class SallaLocalization {
             h("fieldset", { class: "s-localization-fieldset" },
               h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_language')),
               h("div", { class: "s-localization-section-inner" }, salla.config.languages.map(lang => h("div", { class: "flex items-center" },
-                h("input", { id: 'lang-' + lang.code.toLowerCase(), class: "s-localization-input", name: "lang", checked: salla.config.language.code == lang.code, type: "radio", value: lang.code }),
+                h("input", { class: "s-localization-input", checked: salla.config.language.code == lang.code, onChange: () => this.setCurrentLanguage(lang), id: 'lang-' + lang.code.toLowerCase(), name: "language", type: "radio", value: lang.code }),
                 h("label", { htmlFor: 'lang-' + lang.code.toLowerCase(), class: "s-localization-label" },
                   h("span", null, lang.name),
                   h("div", { class: 's-localization-flag flag iti__flag iti__' + lang.country_code })))))))
@@ -52,7 +55,7 @@ export class SallaLocalization {
             h("fieldset", { class: "s-localization-fieldset" },
               h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_currency')),
               h("div", { class: "s-localization-section-inner" }, salla.config.currencies.map(currency => h("div", { class: "s-localization-item" },
-                h("input", { class: "s-localization-input", checked: salla.config.currency.code == currency.code, id: 'currency-' + currency.code, name: "currency", type: "radio", value: currency.code }),
+                h("input", { class: "s-localization-input", checked: salla.config.currency.code == currency.code, onChange: () => this.setCurrentCurrency(currency), id: 'currency-' + currency.code, name: "currency", type: "radio", value: currency.code }),
                 h("label", { class: "s-localization-label", htmlFor: 'currency-' + currency.code },
                   h("span", null, currency.name),
                   h("small", { class: "s-localization-currency" }, currency.code)))))))

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

@@ -12,6 +12,8 @@ export class SallaModal {
     this.icon = 'sicon-cancel';
     salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
     salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
+    this.title = this.host.title;
+    this.host.removeAttribute('title');
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -31,6 +33,10 @@ export class SallaModal {
     this.host.removeAttribute('visible');
     return this.host;
   }
+  async setTitle(title) {
+    this.title = title;
+    return this.host;
+  }
   toggleModal(isOpen) {
     Helper.toggleElement(this.host.querySelector('.s-modal-overlay'), 'ease-out duration-300 opacity-100', 'opacity-0', () => isOpen)
       .toggleElement(this.host.querySelector('.s-modal-body'), 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100', //add these classes
@@ -68,7 +74,7 @@ export class SallaModal {
                       's-modal-text-success': this.success
                     } }))
                 : '',
-              h("div", { class: "s-modal-title", innerHTML: this.host.title }),
+              h("div", { class: "s-modal-title", innerHTML: this.title }),
               h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle }))),
           h("slot", null),
           h("slot", { name: "footer" })))));
@@ -271,6 +277,28 @@ export class SallaModal {
         "text": "",
         "tags": []
       }
+    },
+    "setTitle": {
+      "complexType": {
+        "signature": "(title: any) => Promise<HTMLElement>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }