@salla.sa/twilight-components 1.0.19 → 1.0.21

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

@@ -1,82 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-4b8b3ffe.js');
-const Helper = require('./Helper-fcea994c.js');
-
-const SallaLocalization = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    var _a, _b;
-    this.language = salla.config.get('language', {});
-    this.currency = salla.config.get('currency', {});
-    this.languagesTitle = salla.lang.get('common.titles.language');
-    this.currenciesTitle = salla.lang.get('common.titles.currency');
-    this.ok = salla.lang.get('common.elements.ok');
-    Helper.Helper.setHost(this.host);
-    salla.event.on('localization::show', () => this.show());
-    /**
-     * letting developer to insert his own slot like:
-     * <salla-localization>
-     *   <div slot="language">...{name}....</div>
-     *   <div slot="currency">...{name}....</div>
-     * </salla-localization>
-     * Because scoped templates not supported in stencil );
-     * we made a workaround to pass language & currency attributes, then replace names in rendering
-     */
-    this.languageSlot = ((_a = Helper.Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for="lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
-    this.currencySlot = ((_b = Helper.Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
-    this.languages = Object.values(salla.config.get('languages', {}));
-    this.currencies = Object.values(salla.config.get('currencies', {}));
-  }
-  async show() {
-    return this.modal.show();
-  }
-  async hide() {
-    return this.modal.hide();
-  }
-  onChangeCurrency(event) {
-    this.currency = salla.config.get('currencies.' + event.target.value);
-  }
-  onChangeLanguage(event) {
-    this.language = salla.config.get('languages.' + event.target.value);
-  }
-  async submit() {
-    let url;
-    console.log('this.currency.code::::', this.currency, this.currency.code);
-    this.btn.load()
-      .then(() => this.currency.code === salla.config.get('user.currency') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
-      .then(() => this.language.code === salla.config.get('user.language') || (url = this.language.url))
-      .then(() => this.btn.stop())
-      .then(() => this.hide())
-      .then(() => url && (window.location.href = url));
-  }
-  render() {
-    return (index.h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, "modal-width": "xs" }, index.h("div", { slot: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
-      index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.languagesTitle), index.h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
-        this.languages.map(lang => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), index.h("div", { id: "language-slot", innerHTML: this.languageSlot
-            .replace(/\{name\}/g, lang.name)
-            .replace(/\{code\}/g, lang.code)
-            .replace(/\{country_code\}/g, lang.country_code) }))) :
-        index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => index.h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
-      : '', this.currencies.length > 1 ?
-      index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.currenciesTitle), index.h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
-        this.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), index.h("div", { id: "currency-slot", innerHTML: this.currencySlot
-            .replace(/\{name\}/g, currency.name)
-            .replace(/\{code\}/g, currency.code)
-            .replace(/\{country_code\}/g, currency.country_code) }))) :
-        index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => index.h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
-      : ''), index.h("slot", { name: "footer" }, index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.ok))));
-  }
-  /**
-   * to reduce dom levels we will move slot data into the parent dom
-   */
-  componentDidRender() {
-    this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
-    this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
-  }
-  get host() { return index.getElement(this); }
-};
-
-exports.salla_localization = SallaLocalization;

package/dist/cjs/salla-login-008cc893.js

@@ -1,125 +0,0 @@
-'use strict';
-
-const index = require('./index-4b8b3ffe.js');
-const Helper = require('./Helper-fcea994c.js');
-
-const sallaLoginCss = "salla-verify{display:block}";
-
-const SallaLogin = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.regType = 'sms';
-    this.isLoginByMail = true;
-    this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
-    this.loginText = salla.lang.get('blocks.header.login');
-    this.smsLabel = salla.lang.get('blocks.header.sms');
-    this.mobileLabel = salla.lang.get('common.elements.mobile');
-    this.emailLabel = salla.lang.get('common.elements.email');
-    this.enterText = salla.lang.get('blocks.header.enter');
-    this.bySMSText = salla.lang.get('blocks.header.login_by_sms');
-    this.byEmailText = salla.lang.get('blocks.header.login_by_email');
-    this.backText = salla.lang.get('common.elements.back');
-    this.title = this.host.title || salla.lang.get('blocks.header.login');
-    this.host.removeAttribute('title');
-    salla.auth.event.onVerificationFailed(() => {
-      //
-    });
-  }
-  /**
-   * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
-   */
-  onVerified(event) {
-    if (!event.detail.case) {
-      console.log('verified but without case!');
-      return;
-    }
-    if (event.detail.case === "new_customer") {
-      return this.showTab(this.tab5);
-    }
-    //TODO::It looks that is this workaround🤔
-    if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
-      return;
-    }
-    if (event.redirect_url) {
-      return window.location.href = event.redirect_url;
-    }
-    window.location.reload();
-  }
-  onbackClicked() {
-    this.regType == 'sms' ? this.showTab(this.tab2) : this.showTab(this.tab3);
-  }
-  async show() {
-    this.showTab(this.isLoginByMail ? this.tab1 : this.tab2);
-    return this.modal.show();
-  }
-  showTab(tab) {
-    [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
-    setTimeout(() => { [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)); }, 200);
-    setTimeout(() => { this.host.querySelector('.s-login-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
-    if ([this.tab2, this.tab3].includes(tab)) {
-      this.regType = tab === this.tab2 ? 'sms' : 'email';
-    }
-    let isRegistrationTab = tab == this.tab5;
-    this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
-    if (!isRegistrationTab) {
-      Helper.Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'sms')
-        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
-    }
-    return this;
-  }
-  loginByEmail() {
-    if (!Helper.Helper.isValidEmail(this.email.value)) {
-      this.email.classList.add('s-has-error');
-      this.email.nextElementSibling['innerText'] = '* ' + salla.lang.get('common.elements.email_is_valid');
-      return;
-    }
-    this.email.nextElementSibling['innerText'] = '';
-    this.email.classList.remove('s-has-error');
-    salla.auth.api.login({ type: 'email', email: this.email.value })
-      .then(() => this.showTab(this.tab4))
-      .then(() => (this.tab4.by = 'email') && (this.tab4.url = 'auth/email/verify'))
-      .then(() => this.tab4.show({ email: this.email.value }));
-  }
-  loginBySMS() {
-    if (this.mobile.value.length < 6) {
-      this.mobile.classList.add('s-has-error');
-      this.mobile.nextElementSibling['innerText'] = '* ' + salla.lang.get('mobile_app.strings.incorrect_mobile');
-      return;
-    }
-    this.mobile.nextElementSibling['innerText'] = '';
-    this.mobile.classList.remove('s-has-error');
-    salla.auth.api.login({ type: 'sms', mobile: this.mobile.value })
-      .then(() => this.showTab(this.tab4))
-      .then(() => (this.tab4.by = 'sms') && (this.tab4.url = 'auth/mobile/verify'))
-      .then(() => this.tab4.show({ mobile: this.mobile.value, country_code: 'SA' }));
-  }
-  //TODO:: if it's enter, go submit
-  typing({ target }) {
-    target.type === 'tel' && salla.helpers.digitsOnly(target);
-    target.classList.remove('s-has-error');
-    target.nextElementSibling.innerText = '';
-  }
-  newUser() {
-    this.tab4.getCode()
-      .then(code => salla.auth.api.register({
-      first_name: this.firstName.value,
-      last_name: this.lastName.value,
-      phone: this.regMobile.value || this.mobile.value,
-      email: this.regEmail.value || this.email.value,
-      country_code: '',
-      country_key: '',
-      code: code,
-      verified_by: this.regType,
-    }));
-  }
-  render() {
-    return (index.h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, index.h("div", { class: "s-login-wrapper" }, this.isLoginByMail ?
-      index.h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab }, index.h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), index.h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) }, index.h("i", { class: "s-login-main-btn-icon sicon-phone" }), index.h("span", { class: "s-login-main-btn-text" }, this.smsLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) }, index.h("i", { class: "s-login-main-btn-icon sicon-mail" }), index.h("span", { class: "s-login-main-btn-text" }, this.emailLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
-      : '', index.h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", null), index.h("input", { onChange: () => this.loginBySMS(), type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input  tel-input s-ltr" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isLoginByMail ? index.h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isLoginByMail ?
-      index.h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { onChange: () => this.loginByEmail(), type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText), index.h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '', index.h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }), index.h("div", { ref: tab => this.tab5 = tab }, index.h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), index.h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }), index.h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')), index.h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }), index.h("div", { ref: el => this.regMobileBlock = el }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("input", { type: "tel", ref: el => this.regMobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("div", { ref: el => this.regEmailBlock = el }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
-  }
-  get host() { return index.getElement(this); }
-};
-SallaLogin.style = sallaLoginCss;
-
-exports.SallaLogin = SallaLogin;

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

@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-4b8b3ffe.js');
-
-const SallaOffer = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.offer = null;
-    salla.offer.event.onExisted(data => {
-      //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
-      if (salla.localStore.get('remember-offer-' + data.offer.offer_id)) {
-        salla.log('User selected to don\'t show this offer again.');
-        return;
-      }
-      this.show(data.product_id);
-    });
-  }
-  async show(productId) {
-    this.modal.show()
-      .then(() => salla.api.offer.details(productId))
-      //TODO:: make sure there is only one offer
-      .then(response => this.offer = response.data[0])
-      .then(() => console.log(this.offer));
-  }
-  rememberMe(event) {
-    salla.localStore.set('remember-offer-' + this.offer.id, event.target.checked);
-  }
-  render() {
-    var _a, _b;
-    return index.h("salla-modal", { ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
-      ? [index.h("div", { class: "s-offer-header" }, index.h("b", { class: "s-offer-title" }, this.offer.name), index.h("h3", { class: "s-offer-subtitle" }, this.offer.message)),
-        index.h("div", { class: "s-offer-body" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
-          ? this.offer.get.categories.map(category => index.h("a", { href: category.urls.customer, class: "s-offer-badge" }, index.h("i", { class: "s-offer-badge-icon sicon-tag" }), index.h("span", { class: "s-offer-badge-text" }, category.name)))
-          : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => index.h("div", { class: "s-offer-product" }, "- ", product.name))),
-        index.h("div", { class: "s-offer-footer" }, this.offer.expiry_date ?
-          index.h("p", { class: "s-offer-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.expiry_date)
-          : '', index.h("label", { class: "s-offer-remember-label" }, index.h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }), "\u00A0 ", salla.lang.get('common.remember_my_choice'))),
-      ] : '');
-  }
-  componentDidRender() {
-    //todo:: now from where there is hidden attributes to the doms🤔
-    //todo:: add animation
-    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
-  }
-  get host() { return index.getElement(this); }
-};
-
-exports.salla_offer = SallaOffer;

package/dist/cjs/salla-product-availability.cjs.entry.js

@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-4b8b3ffe.js');
-const Helper = require('./Helper-fcea994c.js');
-
-const SallaProductAvailability = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.isUser = Helper.Helper.isUser();
-    this.buttonText = salla.lang.get('pages.products.notify_availability');
-    this.countryCode = salla.config.country_code || 'SA';
-    this.subscribeText = salla.lang.get('common.elements.submit');
-    this.cancelText = salla.lang.get('common.elements.cancel');
-    this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
-    this.mobileLabel = salla.lang.get('common.elements.mobile');
-    this.emailLabel = salla.lang.get('common.elements.email');
-    this.mobilePlaceholder = salla.lang.get('common.elements.mobile_placeholder');
-    this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
-    this.productId = salla.config.page.id;
-    this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
-    this.isSubscribed = false;
-    if (this.isUser) {
-      return;
-    }
-    this.channelsWatcher(this.channels);
-    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
-    this.host.removeAttribute('title');
-  }
-  channelsWatcher(newValue) {
-    this.channels_ = newValue.split(',');
-  }
-  async submit() {
-    if (this.isUser) {
-      return salla.api.product.availabilitySubscribe(this.productId)
-        .then(() => this.isSubscribed = true);
-    }
-    let data = { id: this.productId, country_code: this.countryCode };
-    if (this.mobile.value !== '') {
-      data['mobile'] = this.mobile.value;
-    }
-    if (this.email.value !== '') {
-      data['email'] = this.email.value;
-    }
-    return this.btn.load()
-      .then(() => this.btn.disable())
-      .then(() => salla.api.product.availabilitySubscribe(data))
-      .then(() => this.isSubscribed = true) //no need to wait until finishing alert animation
-      .then(() => this.btn.stop())
-      .then(() => this.modal.hide())
-      .catch(() => this.btn.stop() && this.btn.enable());
-  }
-  render() {
-    return (index.h(index.Host, null, this.isSubscribed
-      ? index.h("div", { class: "s-product-availability-subscribed" }, this.subscribedMessage)
-      : index.h("slot", null, index.h("salla-button", { wide: true, onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)), this.isUser || this.isSubscribed ? '' : this.renderModal()));
-  }
-  renderModal() {
-    return (index.h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "md" }, index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
-      index.h("label", { class: "s-product-availability-label" }, this.emailLabel),
-      index.h("input", { class: "s-product-availability-input", placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" })
-    ] : '', this.channels_.includes('sms') ? [
-      index.h("label", { class: "s-product-availability-label" }, this.mobileLabel),
-      index.h("input", { class: "s-product-availability-input", placeholder: this.mobilePlaceholder, ref: el => this.mobile = el, type: "text" }),
-      index.h("input", { type: "hidden", value: this.countryCode }),
-    ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.subscribeText), index.h("salla-button", { wide: true, "btn-style": "outline" }, this.cancelText))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "channels": ["channelsWatcher"]
-  }; }
-};
-
-exports.salla_product_availability = SallaProductAvailability;

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

@@ -1,300 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-4b8b3ffe.js');
-const Helper = require('./Helper-fcea994c.js');
-
-const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
-
-const SallaRating = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.order = {
-      shipping: { id: 5622 },
-      products: [
-        {
-          "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/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",
-          "price": "‏10,978.00 ر.س",
-          "qty": "‏2",
-          "totalBefore": "‏1120 ر.س",
-          "discount": "-5%",
-          "total": "‏1064 ر.س",
-          "id": "679822376",
-          "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.Helper.setHost(this.host);
-  }
-  async show() {
-    return this.modal.show();
-  }
-  async hide() {
-    return this.modal.hide();
-  }
-  componentWillLoad() {
-    this.stepsCount = [this.isStoreRating, this.isProductsRating, this.isShippingRating].filter(item => item).length;
-    // this.getData();
-  }
-  componentDidRender() {
-    this.show();
-    this.initiateRating();
-  }
-  initiateRating() {
-    this.handleWizard();
-    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() {
-    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.Helper.onClick("#prev-btn", () => {
-      index > 0 && index--;
-      this.showActiveStep(steps, dots, index, nextBtnText);
-      index == 0 && Helper.Helper.toggle('#prev-btn', 's-rating-unvisiable', 'block', () => true);
-    });
-    Helper.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.Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true);
-      }
-    });
-  }
-  showActiveStep(steps, dots, index, nextBtnText) {
-    var _a;
-    // Active step
-    Helper.Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
-    Helper.Helper.toggleElement(steps[index], 's-rating-unactive', 's-rating-hidden', () => true);
-    setTimeout(() => Helper.Helper.toggleElement(steps[index], 's-rating-active', 's-rating-unactive', () => true), 200);
-    // Hanle dots
-    Helper.Helper.toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', () => true);
-    this.stepsCount > 1 && Helper.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-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.Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
-      this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
-      Helper.Helper.toggleElement(thankYouView, 's-rating-unactive', 's-rating-hidden', () => true);
-      setTimeout(() => Helper.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.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.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);
-      });
-    });
-    return this.ratingChain;
-  }
-  sendFeedback(type, formsData) {
-    if (!formsData || formsData.length == 0) {
-      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);
-    }
-  }
-  // render
-  render() {
-    return (index.h(index.Host, null, index.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>' }, index.h("div", { class: "s-rating-wrapper " }, this.isStoreRating && this.renderStoreRating(), this.isProductsRating && this.renderProductsRating(), this.isShippingRating && this.renderShippingRating(), this.renderThanksView()), index.h("div", { class: "s-rating-footer" }, index.h("button", { id: "prev-btn", class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('pages.order.rating_prev')), this.stepsCount > 1 ?
-      index.h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(index$1 => index.h("li", { class: `${index$1 == 0 ? 's-rating-bg-primary' : 's-rating-bg-gray'} s-rating-step-dot` }))) : '', index.h("salla-button", { id: "next-btn", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")))));
-  }
-  renderStoreRating() {
-    return (index.h("section", { class: "s-rating-step", "data-type": "store", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.store') }, index.h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_store_stars') }, index.h("input", { type: "hidden", name: "order_id", value: this.orderId }), index.h("input", { type: "hidden", name: "type", value: "store" }), index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: this.order.storeLogo, alt: "store name", class: "s-rating-store-logo" })), index.h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')), index.h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), index.h("small", { class: "s-rating-validation-msg" }))));
-  }
-  renderShippingRating() {
-    return (index.h("section", { class: "s-rating-step", "data-type": "shipping", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.shipping') }, index.h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_shipping_stars') }, index.h("input", { type: "hidden", name: "order_id", value: this.orderId }), 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("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: this.order.shippingLogo, alt: "company name", class: "s-rating-shipping-logo" })), index.h("h2", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping'), " \u0627\u0631\u0627\u0645\u0643\u0633"), index.h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), index.h("textarea", { id: "shippingReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), index.h("small", { class: "s-rating-validation-msg" }))));
-  }
-  renderProductsRating() {
-    return (index.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$1) => index.h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.order.rate_product_stars') }, index.h("img", { src: item.image, alt: item.title, class: "s-rating-product-img" }), index.h("div", { class: "s-rating-product-details" }, index.h("h3", { class: "s-rating-product-title" }, " ", item.title), index.h("div", { class: "s-rating-stars-product" }, " ", this.getStarsRating('small')), index.h("input", { type: "hidden", name: "order_id", value: this.orderId }), 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: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_product_rate') }), index.h("small", { class: "s-rating-validation-msg" }))))));
-  }
-  renderThanksView() {
-    return (index.h("div", { class: "s-rating-thanks s-rating-hidden" }, index.h("span", { class: "s-rating-thanks-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-thanks-title" }, salla.lang.get('pages.rating.thanks')), index.h("div", { class: "s-rating-thanks-msg", innerHTML: this.thanksMsg }), index.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"), index.h("time", { class: "s-rating-thanks-time" })));
-  }
-  getStarsRating(size) {
-    return (index.h("form", { class: "s-rating-stars-element" }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }), [1, 2, 3, 4, 5].map((star) => index.h("button", { type: "submit", class: `s-rating-btn-star s-rating-btn-star-` + size, "data-star": star }, index.h("i", { class: "sicon-star2" })))));
-  }
-  get host() { return index.getElement(this); }
-};
-SallaRating.style = sallaRatingCss;
-
-exports.salla_rating = SallaRating;