@salla.sa/twilight-components 1.6.15-alpha.0 → 1.6.15-alpha.1

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

@@ -0,0 +1,261 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Element, h, Method, Prop, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+/**
+ * @slot header - The top of the modal.
+ * @slot footer - Replaces the bottom button.
+ * @slot language - Replaces language label, has replaceable props `{name}`, `{code}`, `{country_code}`.
+ * @slot currency - Replaces currency label, has replaceable props `{name}`, `{code}`, `{country_code}`.
+ */
+export class SallaLocalizationModal {
+  constructor() {
+    var _a, _b;
+    this.translationLoaded = false;
+    this.languages = [];
+    this.currencies = [];
+    this.hasError = false;
+    /**
+     * Current language (existing or newly selected)
+     */
+    this.language = salla.config.get('user.language_code');
+    /**
+     * Current currency (existing or newly selected)
+     */
+    this.currency = salla.config.get('user.currency_code');
+    Helper.setHost(this.host);
+    salla.event.on('localization::open', () => this.open());
+    salla.lang.onLoaded(() => {
+      this.translationLoaded = true;
+    });
+    /**
+     * 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.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span><div class="s-localization-modal-flag flag iti__flag iti__{country_code}"></div></label>';
+    this.currencySlot = ((_b = Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{code}</small></label>';
+  }
+  /**
+   * open the component
+   */
+  async open() {
+    this.modal.open();
+    return await salla.api.withoutNotifier(() => this.getLanguages())
+      .then(() => this.getCurrencies())
+      .catch(e => {
+      var _a, _b, _c, _d;
+      console.log(e);
+      this.hasError = true;
+      this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
+    })
+      .finally(() => this.modal.stopLoading());
+  }
+  /**
+   * Hide the component
+   */
+  async close() {
+    return this.modal.close();
+  }
+  async getLanguages() {
+    this.language = this.language || salla.config.get('user.language_code');
+    return this.languages.length > 1 ? null : await salla.config.languages().then(data => this.languages = data);
+  }
+  async getCurrencies() {
+    this.currency = this.currency || salla.config.get('user.currency_code');
+    return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = Object.values(data || {}));
+  }
+  onChangeCurrency(event) {
+    this.currency = event.target.value;
+  }
+  onChangeLanguage(event) {
+    this.language = event.target.value;
+  }
+  /**
+   * Change currency and language to the selected ones.
+   */
+  async submit() {
+    let url;
+    this.btn.load()
+      .then(() => {
+      if (!this.currency) {
+        salla.log('There is no currency!');
+        return;
+      }
+      if (this.currency === salla.config.get('user.currency_code', 'SAR')) {
+        return;
+      }
+      url = window.location.href;
+      return salla.currency.api.change(this.currency);
+    })
+      .then(() => this.language === salla.config.get('user.language_code', 'ar') || (url = salla.helpers.addParamToUrl('lang', this.language)))
+      .then(() => this.btn.stop())
+      .then(() => this.close())
+      .then(() => url && (window.location.href = url));
+  }
+  render() {
+    return (h("salla-modal", { isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" },
+      h("div", { slot: 'loading' },
+        h("div", { class: "s-localization-modal-skeleton" },
+          h("salla-skeleton", { width: '25%', height: '15px' }),
+          h("div", { class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" },
+            h("div", { class: "s-localization-modal-skeleton-item-flex" },
+              h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }),
+              h("salla-skeleton", { height: '10px', width: '100px' })),
+            h("salla-skeleton", { height: '15px', width: '20px' })))),
+          h("salla-skeleton", { width: '25%', height: '15px' }),
+          h("div", { class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" },
+            h("div", { class: "s-localization-modal-skeleton-item-flex" },
+              h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }),
+              h("salla-skeleton", { height: '10px', width: '100px' })),
+            h("salla-skeleton", { height: '15px', width: '20px' })))),
+          h("salla-skeleton", { height: '40px', width: '100%' }))),
+      !!this.hasError ?
+        h("salla-placeholder", { alignment: "center" },
+          h("span", { slot: "description" }, this.errorMessage)) :
+        h("div", { class: "s-localization-modal-inner" },
+          this.languages.length > 1 ?
+            h("div", { class: "s-localization-modal-section" },
+              h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.language')),
+              h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 || this.currencies.length == 1 ?
+                this.languages.map(lang => h("div", { class: "s-localization-modal-item" },
+                  h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }),
+                  h("div", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot
+                      .replace(/\{name\}/g, lang.name)
+                      .replace(/\{code\}/g, lang.code)
+                      .replace(/\{country_code\}/g, lang.country_code) }))) :
+                h("select", { class: "s-localization-modal-select", name: "language", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+            : '',
+          this.currencies.length > 1 ?
+            h("div", { class: "s-localization-modal-section" },
+              h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.currency')),
+              h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 || this.languages.length == 1 ?
+                this.currencies.map(currency => h("div", { class: "s-localization-modal-item" },
+                  h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }),
+                  h("div", { class: "s-localization-modal-label-slot", id: "currency-slot", innerHTML: this.currencySlot
+                      .replace(/\{name\}/g, currency.name)
+                      .replace(/\{code\}/g, currency.code)
+                      .replace(/\{country_code\}/g, currency.country_code) }))) :
+                h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
+            : '',
+          h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.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));
+  }
+  static get is() { return "salla-localization-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-localization-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-localization-modal.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Current language (existing or newly selected)"
+      },
+      "attribute": "language",
+      "reflect": true,
+      "defaultValue": "salla.config.get('user.language_code')"
+    },
+    "currency": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Current currency (existing or newly selected)"
+      },
+      "attribute": "currency",
+      "reflect": true,
+      "defaultValue": "salla.config.get('user.currency_code')"
+    }
+  }; }
+  static get states() { return {
+    "translationLoaded": {},
+    "languages": {},
+    "currencies": {},
+    "hasError": {},
+    "errorMessage": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "open the component",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "Hide the component",
+        "tags": []
+      }
+    },
+    "submit": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Change currency and language to the selected ones.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/salla-login-modal/salla-login-modal.css

@@ -0,0 +1,4 @@
+/*
+* Salla Login Component: login popup modal
+* You can use these classes to target the elements in the component.
+*/

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

@@ -0,0 +1,409 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Element, h, Listen, Method, Prop, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+import UserIcon from "../../assets/svg/user.svg";
+import PhoneIcon from "../../assets/svg/phone.svg";
+import EmailIcon from "../../assets/svg/mail.svg";
+import KeyboardArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
+import ArrowRightIcon from "../../assets/svg/arrow-right.svg";
+/**
+ * @slot footer - The footer of modal
+ * @slot before-login-type - placeholder position
+ * @slot after-login-type - placeholder position
+ * @slot before-login-mobile - placeholder position
+ * @slot after-login-mobile - placeholder position
+ * @slot before-login-email - placeholder position
+ * @slot after-login-email - placeholder position
+ * @slot before-registration - placeholder position
+ * @slot after-registration - placeholder position
+ */
+export class SallaLoginModal {
+  constructor() {
+    /**
+     * Does the merchant allow to login using email
+     */
+    this.isEmailAllowed = true;
+    /**
+     * Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
+     */
+    this.isMobileAllowed = true;
+    /**
+     * Does the merchant require registration with email & mobile
+     */
+    this.isEmailRequired = false;
+    /**
+     * Once the api verify success, it will be login the customer in web pages
+     */
+    this.supportWebAuth = true;
+    this.currentTabName = 'home';
+    this.regType = 'phone';
+    this.translationLoaded = false;
+    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-modal-error-message')) && (error.innerText = '');
+      e.key == 'Enter' && submitMethod();
+    };
+    this.loginBySMS = async (event = null) => {
+      event === null || event === void 0 ? void 0 : event.preventDefault();
+      const { phone, countryCode } = await this.loginTelInput.getValues();
+      const isPhoneValid = await this.loginTelInput.isValid();
+      if (!isPhoneValid) {
+        return;
+      }
+      this.login(this.smsBtn, { type: 'mobile', phone: phone, country_code: countryCode });
+      return false;
+    };
+    this.loginByEmail = (event = null) => {
+      event === null || event === void 0 ? void 0 : event.preventDefault();
+      if (!Helper.isValidEmail(this.loginEmail.value)) {
+        this.validateField(this.loginEmail, this.emailErrorMsg);
+        return;
+      }
+      this.login(this.emailBtn, { type: 'email', email: this.loginEmail.value });
+    };
+    this.newUser = async () => {
+      var _a;
+      const { phone: regPhone, countryCode } = this.regType == "email" ? await this.regTelInput.getValues() : await this.loginTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
+      await this.newUserValidation();
+      await this.regBtn.load();
+      await this.regBtn.disable();
+      let data = {
+        first_name: this.firstName.value,
+        last_name: this.lastName.value,
+        phone: regPhone || this.loginTelInput.phone,
+        country_code: countryCode,
+        verified_by: this.regType,
+      };
+      emailValue && (data = Object.assign(Object.assign({}, data), { email: emailValue }));
+      this.verifyTab.getCode()
+        .then(code => salla.auth.api.register(Object.assign(Object.assign({}, data), { code })))
+        .then(() => salla.auth.canRedirect && window.location.reload())
+        .catch((error) => {
+        salla.logger.error(error);
+        this.regBtn.stop() && this.regBtn.enable();
+      });
+    };
+    this.title = this.host.title || salla.lang.get('blocks.header.login');
+    this.host.removeAttribute('title');
+    this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
+    this.firstNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('pages.profile.first_name') });
+    this.lastNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('pages.profile.last_name') });
+    salla.lang.onLoaded(() => {
+      this.translationLoaded = true;
+      this.title = salla.lang.get('blocks.header.login');
+      this.updateTranslations();
+    });
+    salla.event.on('login::open', (event) => this.open(event));
+    salla.event.on('twilight::initiated', () => {
+      this.isEmailAllowed = salla.config.get('store.settings.auth.email_allowed', this.isEmailAllowed);
+      this.isMobileAllowed = salla.config.get('store.settings.auth.mobile_allowed', this.isMobileAllowed);
+      this.isEmailRequired = salla.config.get('store.settings.auth.is_email_required', this.isEmailRequired);
+    });
+  }
+  /**
+   * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
+   */
+  onVerified(event) {
+    var _a, _b;
+    salla.log('verified', event);
+    //there is a case when force login is activated & is new user, it will return case inside error key., so cover it.
+    let verifyCase = ((_a = event.detail) === null || _a === void 0 ? void 0 : _a.data.case) || ((_b = event.detail) === null || _b === void 0 ? void 0 : _b.error.case);
+    if (!verifyCase) {
+      salla.log('verified but without case!');
+      return;
+    }
+    if (verifyCase === "new_customer") {
+      return this.showTab(this.registrationTab);
+    }
+    if (!salla.auth.canRedirect()) {
+      salla.log('Will not auto redirect or reload, due to `salla.auth.canRedirect()`');
+      return;
+    }
+    if (event.detail.data.redirect_url) {
+      return window.location.href = event.detail.data.redirect_url;
+    }
+    /**
+     * we don't want to reload the page if this is not web auth
+     * because we'll need the token in the page itself and its there
+     * todo :: store the user data in storage for non-web auth and set the config.user from it
+     */
+    if (this.supportWebAuth) {
+      window.location.reload();
+    }
+    else {
+      this.modal.close();
+    }
+  }
+  updateTranslations() {
+    var _a;
+    this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
+    this.firstNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('pages.profile.first_name') });
+    this.lastNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('pages.profile.last_name') });
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
+  }
+  /**
+   * Open login component
+   */
+  // @ts-ignore
+  async open(event = null) {
+    // todo :: support change the settings from event details
+    // if(event && event.hasOwnProperty('isEmailAllowed')){
+    //   this.isEmailAllowed = event?.isEmailAllowed;
+    // }
+    //
+    // if(event && event.hasOwnProperty('isMobileAllowed')){
+    //   this.isMobileAllowed = event?.isMobileAllowed;
+    // }
+    if (this.isEmailAllowed && this.isMobileAllowed) {
+      this.showTab(this.homeTab);
+    }
+    else if (this.isEmailAllowed) {
+      this.showTab(this.emailTab);
+    }
+    else if (this.isMobileAllowed) {
+      this.showTab(this.mobileTab);
+    }
+    return this.modal.open();
+  }
+  showTab(tab, evt) {
+    var _a;
+    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+    this.currentTabName = tab.getAttribute('data-name');
+    // todo:: use better way for resize the modal
+    // setTimeout(() => this.modal.querySelector('.s-login-modal-wrapper')?.setAttribute('style', 'height:' + tab?.scrollHeight + 'px'));
+    if ([this.mobileTab, this.emailTab].includes(tab)) {
+      this.regType = tab === this.mobileTab ? 'phone' : 'email';
+    }
+    // this.loginTelInput.focus();
+    // tab.querySelector('input')?.focus();
+    //   setTimeout(() =>this.loginTelInput.focus(), 100);
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.currentTabName === 'registration' ? salla.lang.get('common.titles.registration') : this.title);
+    return this;
+  }
+  login(btn, data) {
+    btn.load()
+      .then(() => btn.disable())
+      .then(() => salla.auth.api.login(data))
+      .then(() => this.showTab(this.verifyTab))
+      .then(() => this.verifyTab.open(data))
+      .finally(() => btn.stop() && btn.enable());
+  }
+  async newUserValidation() {
+    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
+    if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid)
+      return;
+    !isEmailValid && this.validateField(this.regEmail, this.emailErrorMsg);
+    !isFirstNameValid && this.validateField(this.firstName, this.firstNameErrorMsg);
+    !isLastNameValid && this.validateField(this.lastName, this.lastNameErrorMsg);
+    throw ('Please insert required fields');
+  }
+  // eslint-disable-next-line @stencil/own-methods-must-be-private
+  validateField(field, errorMsg) {
+    field.classList.add('s-has-error');
+    field.nextElementSibling['innerText'] = '* ' + errorMsg;
+  }
+  generateTabClasses(tabName) {
+    return {
+      's-login-modal-tab': tabName !== 'registration' && tabName !== 'otp',
+      "s-hidden": this.currentTabName !== tabName,
+      "s-show": this.currentTabName === tabName,
+      's-login-modal-unactive': tabName !== 'registration' && tabName !== 'otp' && this.currentTabName !== tabName,
+      's-login-modal-active': tabName !== 'registration' && tabName !== 'otp' && this.currentTabName === tabName
+    };
+  }
+  generateRegClasses(regType) {
+    return {
+      "mb-1.5": true,
+      "s-hidden": this.regType === regType
+    };
+  }
+  render() {
+    // @ts-ignore
+    // @ts-ignore
+    return (h("salla-modal", { class: "s-login-modal", "modal-title": this.title, ref: modal => this.modal = modal, width: "xs" },
+      h("span", { slot: 'icon', class: "s-login-modal-header-icon", innerHTML: UserIcon }),
+      h("div", { class: "s-login-modal-wrapper" },
+        this.isEmailAllowed && this.isMobileAllowed ?
+          h("div", { class: this.generateTabClasses('home'), "data-name": "home", ref: tab => this.homeTab = tab },
+            h("p", { class: "s-login-modal-sub-title" }, salla.lang.get('blocks.header.select_login_way')),
+            h("slot", { name: "before-login-type" }),
+            h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) },
+              h("span", { class: "s-login-modal-main-btn-icon", innerHTML: PhoneIcon }),
+              h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('blocks.header.sms')),
+              h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })),
+            h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) },
+              h("span", { class: "s-login-modal-main-btn-icon", innerHTML: EmailIcon }),
+              h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('common.elements.email')),
+              h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })),
+            h("slot", { name: "after-login-type" }))
+          : '',
+        this.isMobileAllowed ?
+          h("div", { class: this.generateTabClasses('login-phone'), "data-name": "login-phone", ref: tab => this.mobileTab = tab },
+            h("slot", { name: "before-login-mobile" }),
+            h("form", { onSubmit: () => this.loginBySMS(event), method: "POST" },
+              h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')),
+              h("salla-tel-input", { tabindex: "0", ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }),
+              h("salla-button", { type: "submit", "loader-position": 'center', width: "wide", ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter'))),
+            this.isEmailAllowed ?
+              h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_email')) : '',
+            h("slot", { name: "after-login-mobile" })) : '',
+        this.isEmailAllowed ?
+          h("div", { class: this.generateTabClasses('login-email'), "data-name": "login-email", ref: tab => this.emailTab = tab },
+            h("slot", { name: "before-login-email" }),
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')),
+            h("form", { onSubmit: () => this.loginByEmail(event), method: "POST" },
+              h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", enterkeyhint: "next", class: "s-login-modal-input s-ltr" }),
+              h("span", { class: "s-login-modal-error-message" }),
+              h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter'))),
+            this.isMobileAllowed ?
+              h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_sms'))
+              : '',
+            h("slot", { name: "after-login-email" })) : '',
+        h("salla-verify", { display: "inline", "support-web-auth": this.supportWebAuth ? 'true' : 'false', class: this.generateTabClasses('otp'), "data-name": "otp", ref: tab => this.verifyTab = tab, autoReload: false },
+          h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: ArrowRightIcon, slot: "after-footer", href: "#" })),
+        h("div", { "data-name": "registration", class: this.generateTabClasses('registration'), ref: tab => this.registrationTab = tab },
+          h("slot", { name: "before-registration" }),
+          h("div", null,
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')),
+            h("input", { type: "text", class: "s-login-modal-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-modal-error-message" })),
+          h("div", null,
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('pages.profile.last_name')),
+            h("input", { type: "text", class: "s-login-modal-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-modal-error-message" })),
+          h("div", { class: this.generateRegClasses('phone') },
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')),
+            h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })),
+          h("div", { class: this.generateRegClasses('email') },
+            h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')),
+            h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }),
+            h("span", { class: "s-login-modal-error-message" })),
+          h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')),
+          h("slot", { name: "after-registration" })))));
+  }
+  static get is() { return "salla-login-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-login-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-login-modal.css"]
+  }; }
+  static get properties() { return {
+    "isEmailAllowed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Does the merchant allow to login using email"
+      },
+      "attribute": "is-email-allowed",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "isMobileAllowed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`"
+      },
+      "attribute": "is-mobile-allowed",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "isEmailRequired": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Does the merchant require registration with email & mobile"
+      },
+      "attribute": "is-email-required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "supportWebAuth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Once the api verify success, it will be login the customer in web pages"
+      },
+      "attribute": "support-web-auth",
+      "reflect": true,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "currentTabName": {},
+    "regType": {},
+    "translationLoaded": {},
+    "title": {},
+    "emailErrorMsg": {},
+    "firstNameErrorMsg": {},
+    "lastNameErrorMsg": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "(event?: any) => Promise<HTMLElement>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "Open login component",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "verified",
+      "method": "onVerified",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}