@salla.sa/twilight-components 1.0.22 → 1.0.24

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

@@ -1,20 +1,78 @@
-import { Component, Element, h, Listen, Method, Prop } from '@stencil/core';
+import { Component, Element, h, Listen, Method, Prop, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 export class SallaLogin {
   constructor() {
-    this.regType = 'phone';
     this.isEmailAllowed = 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.regType = 'phone';
+    this.typing = (e, submitMethod) => {
+      const error = e.target.nextElementSibling;
+      e.target.classList.remove('s-has-error');
+      (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-error-message')) && (error.innerText = '');
+      e.key == 'Enter' && submitMethod();
+    };
+    this.loginBySMS = async () => {
+      const { phone, countryCode } = await this.loginTelInput.getValues();
+      const isPhoneValid = await this.loginTelInput.isValid();
+      if (!isPhoneValid)
+        return;
+      this.smsBtn.load()
+        .then(() => this.smsBtn.disable())
+        .then(() => salla.auth.api.login({ type: 'mobile', phone: phone, country_code: countryCode }))
+        .then(() => this.smsBtn.stop() && this.smsBtn.enable())
+        .then(() => this.showTab(this.verifyTab))
+        .then(() => this.verifyTab.by = 'sms')
+        .then(() => this.verifyTab.show({ phone: phone, country_code: countryCode }));
+    };
+    this.loginByEmail = () => {
+      if (!Helper.isValidEmail(this.loginEmail.value)) {
+        this.validateField(this.loginEmail, this.isEmailValid);
+        return;
+      }
+      this.emailBtn.load()
+        .then(() => this.emailBtn.disable())
+        .then(() => salla.auth.api.login({ type: 'email', email: this.loginEmail.value }))
+        .then(() => this.emailBtn.stop() && this.emailBtn.enable())
+        .then(() => this.showTab(this.verifyTab))
+        .then(() => this.verifyTab.by = 'email')
+        .then(() => this.verifyTab.show({ email: this.loginEmail.value }));
+    };
+    this.newUser = async () => {
+      const { phone: regPhone, countryCode, countryKey } = await this.regTelInput.getValues();
+      await this.newUserValidation();
+      await this.regBtn.load();
+      await this.regBtn.disable();
+      this.verifyTab.getCode()
+        .then(code => salla.auth.api.register({
+        first_name: this.firstName.value,
+        last_name: this.lastName.value,
+        phone: regPhone || this.loginTelInput.phone,
+        email: this.regEmail.value || this.loginEmail.value,
+        country_code: countryCode,
+        country_key: countryKey,
+        code: code,
+        verified_by: this.regType,
+      }))
+        .then(() => window.location.reload())
+        .catch(() => this.regBtn.stop() && this.regBtn.enable());
+    };
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');
+    salla.event.on('languages::translations.loaded', () => {
+      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.title = salla.lang.get('blocks.header.login');
+      this.isEmailValid = salla.lang.get('common.elements.email_is_valid');
+      this.firstNameLabel = salla.lang.get('blocks.header.your_name');
+      this.lastNameLabel = salla.lang.get('pages.profile.last_name');
+      this.firstNameRequired = salla.lang.get('common.errors.field_required', { attribute: this.firstNameLabel });
+      this.lastNameRequired = salla.lang.get('common.errors.field_required', { attribute: this.lastNameLabel });
+    });
     salla.auth.event.onVerificationFailed(() => {
       //
     });
@@ -28,7 +86,7 @@ export class SallaLogin {
       return;
     }
     if (event.detail.case === "new_customer") {
-      return this.showTab(this.tab5);
+      return this.showTab(this.registrationTab);
     }
     //TODO::It looks that is this workaround🤔
     if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
@@ -39,21 +97,23 @@ export class SallaLogin {
     }
     window.location.reload();
   }
+  // from salla-verify comp
   onbackClicked() {
-    this.regType == 'phone' ? this.showTab(this.tab2) : this.showTab(this.tab3);
+    this.regType == 'phone' ? this.showTab(this.mobileTab) : this.showTab(this.emailTab);
   }
   async show() {
-    this.showTab(this.isEmailAllowed ? this.tab1 : this.tab2);
+    this.showTab(this.isEmailAllowed ? this.homeTab : this.mobileTab);
     return this.modal.show();
   }
-  showTab(tab) {
-    [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
-    setTimeout(() => { [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)); }, 200);
+  showTab(tab, evt) {
+    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+    [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab].map(el => Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
+    setTimeout(() => { [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab].map(el => 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 ? 'phone' : 'email';
+    if ([this.mobileTab, this.emailTab].includes(tab)) {
+      this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
-    let isRegistrationTab = tab == this.tab5;
+    let isRegistrationTab = tab == this.registrationTab;
     isRegistrationTab && this.firstName.focus();
     this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
@@ -62,100 +122,66 @@ export class SallaLogin {
     }
     return this;
   }
-  loginByEmail() {
-    if (!Helper.isValidEmail(this.email.value)) {
-      this.email.classList.add('s-has-error');
-      this.email.nextElementSibling['innerText'] = '* ' + salla.lang.get('common.elements.email_is_valid');
+  async newUserValidation() {
+    const isPhoneReg = this.regType == "phone", isEmailReg = this.regType == "email", isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isEmailValid = Helper.isValidEmail(this.regEmail.value || isEmailReg && this.loginEmail.value), isPhoneValid = await this.regTelInput.isValid() || isPhoneReg && await this.loginTelInput.isValid();
+    if (isEmailValid && isPhoneValid && isFirstNameValid && isLastNameValid)
       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 }));
-  }
-  async loginBySMS() {
-    const { phone, countryCode } = await this.loginTelInput.getValues();
-    if (phone.length < 6) {
-      this.loginTelInput.classList.add('s-has-error');
-      this.loginTelInput.nextElementSibling['innerText'] = '* ' + salla.lang.get('mobile_app.strings.incorrect_mobile');
-      return;
-    }
-    this.loginTelInput.nextElementSibling['innerText'] = '';
-    this.loginTelInput.classList.remove('s-has-error');
-    salla.auth.api.login({ type: 'mobile', phone: phone, country_code: countryCode })
-      .then(() => this.showTab(this.tab4))
-      .then(() => (this.tab4.by = 'sms') && (this.tab4.url = 'auth/mobile/verify'))
-      .then(() => this.tab4.show({ phone: phone, country_code: countryCode }));
+    !isEmailValid && this.validateField(this.regEmail, this.isEmailValid);
+    !isFirstNameValid && this.validateField(this.firstName, this.firstNameRequired);
+    !isLastNameValid && this.validateField(this.lastName, this.lastNameRequired);
+    throw ('Please insert required fields');
   }
-  //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 = '';
-  }
-  async newUser() {
-    const { phone: regPhone, countryCode, countryKey } = await this.regTelInput.getValues();
-    this.tab4.getCode()
-      .then(code => salla.auth.api.register({
-      first_name: this.firstName.value,
-      last_name: this.lastName.value,
-      phone: regPhone || this.loginTelInput.phone,
-      email: this.regEmail.value || this.email.value,
-      country_code: countryCode,
-      country_key: countryKey,
-      code: code,
-      verified_by: this.regType,
-    })).then(() => window.location.reload());
+  validateField(field, errorMsg) {
+    field.classList.add('s-has-error');
+    field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" },
+    return (h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" },
       h("div", { class: "s-login-wrapper" },
         this.isEmailAllowed ?
-          h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab },
+          h("div", { class: "s-login-tab", ref: tab => this.homeTab = tab },
             h("p", { class: "s-login-sub-title" }, this.loginTypeTitle),
-            h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) },
+            h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) },
               h("i", { class: "s-login-main-btn-icon sicon-phone" }),
               h("span", { class: "s-login-main-btn-text" }, this.smsLabel),
               h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })),
-            h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) },
+            h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) },
               h("i", { class: "s-login-main-btn-icon sicon-mail" }),
               h("span", { class: "s-login-main-btn-text" }, this.emailLabel),
               h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
           : '',
-        h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab },
+        h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab },
           h("label", { class: "s-login-label" }, this.mobileLabel),
-          h("salla-tel-input", { phone: '', ref: el => this.loginTelInput = el }),
-          h("span", { class: "s-login-error-message" }),
-          h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText),
-          this.isEmailAllowed ? h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''),
+          h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }),
+          h("salla-button", { wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, this.enterText),
+          this.isEmailAllowed ? h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : ''),
         this.isEmailAllowed ?
-          h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab },
+          h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab },
             h("label", { class: "s-login-label" }, this.emailLabel),
-            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" }),
+            h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-input s-ltr" }),
             h("span", { class: "s-login-error-message" }),
-            h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText),
-            h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '',
-        h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }),
-        h("div", { ref: tab => this.tab5 = tab },
-          h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')),
-          h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }),
-          h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')),
-          h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }),
-          h("div", { ref: el => this.regMobileBlock = el },
+            h("salla-button", { wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, this.enterText),
+            h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText)) : '',
+        h("salla-verify", { "without-modal": true, ref: tab => this.verifyTab = tab, autoReload: false, "is-show-back": true }),
+        h("div", { ref: tab => this.registrationTab = tab },
+          h("label", { class: "s-login-label" }, this.firstNameLabel),
+          h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }),
+          h("span", { class: "s-login-error-message" }),
+          h("label", { class: "s-login-label" }, this.lastNameLabel),
+          h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }),
+          h("span", { class: "s-login-error-message" }),
+          h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" },
             h("label", { class: "s-login-label" }, this.mobileLabel),
-            h("salla-tel-input", { phone: '', ref: el => this.regTelInput = el }),
-            h("span", { class: "s-login-error-message" })),
-          h("div", { ref: el => this.regEmailBlock = el },
+            h("salla-tel-input", { phone: '', ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })),
+          h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" },
             h("label", { class: "s-login-label" }, this.emailLabel),
-            h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }),
+            h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-input s-ltr" }),
             h("span", { class: "s-login-error-message" })),
-          h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
+          h("salla-button", { wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register'))))));
   }
   static get is() { return "salla-login"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-login.css"]
+    "$": ["salla-login.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["salla-login.css"]
@@ -178,170 +204,24 @@ export class SallaLogin {
       "attribute": "is-email-allowed",
       "reflect": false,
       "defaultValue": "true"
-    },
-    "loginTypeTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "login-type-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.select_login_way')"
-    },
-    "loginText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "login-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.login')"
-    },
-    "smsLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sms-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.sms')"
-    },
-    "mobileLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mobile-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.mobile')"
-    },
-    "emailLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "email-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.email')"
-    },
-    "enterText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "enter-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.enter')"
-    },
-    "bySMSText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "by-s-m-s-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.login_by_sms')"
-    },
-    "byEmailText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "by-email-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.login_by_email')"
-    },
-    "backText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "back-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.back')"
     }
   }; }
+  static get states() { return {
+    "title": {},
+    "loginTypeTitle": {},
+    "loginText": {},
+    "smsLabel": {},
+    "mobileLabel": {},
+    "emailLabel": {},
+    "enterText": {},
+    "bySMSText": {},
+    "byEmailText": {},
+    "isEmailValid": {},
+    "firstNameLabel": {},
+    "lastNameLabel": {},
+    "firstNameRequired": {},
+    "lastNameRequired": {}
+  }; }
   static get methods() { return {
     "show": {
       "complexType": {

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

@@ -84,39 +84,47 @@ export class SallaModal {
         h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
         h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"),
         h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width, slot: "body" }, this.isLoading
-          ? h("span", null, "Loading...")
+          ? h("div", { class: "s-modal-loader-wrap" },
+            h("span", { class: "s-modal-loader" }))
           :
             [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } },
                 this.isClosable ?
                   h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" },
                     h("span", { class: "sicon-cancel" }))
                   : '',
-                this.error || this.success || this.icon
-                  ? h("div", { class: {
-                      's-modal-icon': true,
-                      's-modal-bg-error': this.error,
-                      's-modal-bg-success': this.success,
-                      's-modal-bg-normal': !this.error && !this.success,
-                      's-modal-bg-primary': this.primary
-                    } },
-                    h("i", { class: {
-                        [this.icon]: true,
-                        's-modal-text-error': this.error,
-                        's-modal-text-success': this.success,
-                      } }))
-                  : this.imageIcon ?
-                    h("img", { class: "s-modal-header-img", src: this.imageIcon })
-                    : '',
                 this.title || this.subTitle ?
-                  h("div", { class: "s-modal-header-content" },
-                    h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }),
-                    h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
+                  h("div", { class: "s-modal-header-inner" },
+                    this.error || this.success || this.icon
+                      ? h("div", { class: {
+                          's-modal-icon': true,
+                          's-modal-bg-error': this.error,
+                          's-modal-bg-success': this.success,
+                          's-modal-bg-normal': !this.error && !this.success,
+                          's-modal-bg-primary': this.primary
+                        } },
+                        h("i", { class: {
+                            [this.icon]: true,
+                            's-modal-text-error': this.error,
+                            's-modal-text-success': this.success,
+                          } }))
+                      : this.imageIcon ?
+                        h("img", { class: "s-modal-header-img", src: this.imageIcon })
+                        : '',
+                    h("div", { class: "s-modal-header-content" },
+                      h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }),
+                      h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
                   : ''),
               h("slot", null),
               h("slot", { name: "footer" })
             ]))));
   }
   static get is() { return "salla-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-modal.css"]
+  }; }
   static get properties() { return {
     "error": {
       "type": "boolean",

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

@@ -15,7 +15,7 @@ export class SallaOffer {
     this.productSlot = ((_c = Helper.getElement('[slot="product"]')) === null || _c === void 0 ? void 0 : _c.innerHTML) || this.defaultProductSlot();
     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)) {
+      if (salla.localData.get('remember-offer-' + data.offer.offer_id)) {
         salla.log('User selected to don\'t show this offer again.');
         return;
       }
@@ -29,7 +29,7 @@ export class SallaOffer {
       .then(response => this.offer = response.data[0]);
   }
   rememberMe(event) {
-    salla.localStore.set('remember-offer-' + this.offer.id, event.target.checked);
+    salla.localData.set('remember-offer-' + this.offer.id, event.target.checked);
   }
   addItem() {
     // this here, is sallaButton

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

@@ -53,11 +53,13 @@ export class SallaRating {
   showActiveStep(current = null) {
     var _a;
     this.currentTab = current || this.steps[this.currentIndex];
-    Helper.toggle('.s-rating-step', 's-rating-active', 's-rating-hidden', tab => tab == this.currentTab)
-      .toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', dot => dot != this.dots[this.currentIndex]);
-    // the animation
-    Helper.toggleElement(this.currentTab, 's-rating-unactive', 's-rating-hidden', () => true);
-    setTimeout(() => Helper.toggleElement(this.currentTab, 's-rating-active', 's-rating-unactive', () => true), 300);
+    Helper.toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', dot => dot != this.dots[this.currentIndex])
+      .toggle('.s-rating-step', 's-rating-active', 's-rating-hidden', tab => tab == this.currentTab);
+    if (this.currentIndex != 0) {
+      // the animation
+      Helper.toggleElement(this.currentTab, 's-rating-unactive', 's-rating-hidden', () => true);
+      setTimeout(() => Helper.toggleElement(this.currentTab, 's-rating-active', 's-rating-unactive', () => true), 300);
+    }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
     this.nextBtn.querySelector('.s-button-text').innerHTML = nextType
@@ -105,6 +107,7 @@ export class SallaRating {
       this.nextBtn.stop();
       salla.config.canLeave = true;
       this.currentIndex == this.stepsCount && this.showThankYou();
+      this.modal.isClosable = false;
     });
   }
   submittedBefore() {
@@ -170,7 +173,7 @@ export class SallaRating {
       h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
         ? [h("div", { class: "s-rating-wrapper", ref: el => this.body = el },
             this.order.testimonials_enabled ?
-              h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step", "data-type": "store" },
+              h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "store" },
                 h("div", { class: "s-rating-rounded-icon" },
                   h("img", { src: salla.get('store.logo'), alt: "store name", class: "s-rating-store-logo" })),
                 h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')),
@@ -181,7 +184,7 @@ export class SallaRating {
                 h("small", { class: "s-rating-validation-msg" }))
               : '',
             this.order.products_enabled
-              ? h("section", { class: "s-rating-step", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') },
+              ? h("section", { class: "s-rating-step s-rating-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') },
                 h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }),
                 h("div", { class: "s-rating-product-details" },
                   h("h3", { class: "s-rating-product-title" },
@@ -195,7 +198,7 @@ export class SallaRating {
                   h("small", { class: "s-rating-validation-msg" })))))
               : '',
             this.order.shipping_enabled
-              ? h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step", "data-type": "shipping" },
+              ? h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "shipping" },
                 h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }),
                 this.order.shipping.company.logo
                   ? h("div", { class: "s-rating-rounded-icon" },
@@ -216,7 +219,7 @@ export class SallaRating {
           h("div", { class: "s-rating-footer" },
             h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('common.elements.back')),
             this.stepsCount > 1 ? h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '',
-            h("salla-button", { ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
+            h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
         : '')));
   }
   componentDidRender() {

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

@@ -18,6 +18,7 @@
   padding: 0;
   max-width: 90%;
   margin-top: 3.2rem;
+  border-radius: 0.5rem;
 }
 #s-search-modal .s-modal-close {
   top: 1rem;