@salla.sa/twilight-components 1.0.21 → 1.0.23

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

@@ -0,0 +1,208 @@
+import { Component, Element, h, Method, Prop } 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 SallaLocalization {
+  constructor() {
+    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.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.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.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 (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, "modal-width": "xs" },
+      h("div", { slot: "header" },
+        h("slot", { name: "header" })),
+      h("div", { class: "s-localization-inner" },
+        this.languages.length > 1 ?
+          h("div", { class: "s-localization-section" },
+            h("label", { class: "s-localization-title" }, this.languagesTitle),
+            h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
+              this.languages.map(lang => h("div", { class: "s-localization-item" },
+                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 }),
+                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) }))) :
+              h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
+          : '',
+        this.currencies.length > 1 ?
+          h("div", { class: "s-localization-section" },
+            h("label", { class: "s-localization-title" }, this.currenciesTitle),
+            h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
+              this.currencies.map(currency => h("div", { class: "s-localization-item" },
+                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 }),
+                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) }))) :
+              h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
+          : ''),
+      h("slot", { name: "footer" },
+        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));
+  }
+  static get is() { return "salla-localization"; }
+  static get properties() { return {
+    "languagesTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "languages-title",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.titles.language')"
+    },
+    "currenciesTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "currencies-title",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.titles.currency')"
+    },
+    "ok": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "ok",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.elements.ok')"
+    }
+  }; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "submit": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+salla-verify {
+  display: block;
+}
+
+#salla-login .s-modal-body {
+  overflow: inherit;
+}

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

@@ -0,0 +1,380 @@
+import { Component, Element, h, Listen, Method, Prop } 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.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 == 'phone' ? this.showTab(this.tab2) : this.showTab(this.tab3);
+  }
+  async show() {
+    this.showTab(this.isEmailAllowed ? this.tab1 : this.tab2);
+    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);
+    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';
+    }
+    let isRegistrationTab = tab == this.tab5;
+    isRegistrationTab && this.firstName.focus();
+    this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
+    if (!isRegistrationTab) {
+      Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
+        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+    }
+    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');
+      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 }));
+  }
+  //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());
+  }
+  render() {
+    return (h("salla-modal", { id: "salla-login", 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("p", { class: "s-login-sub-title" }, this.loginTypeTitle),
+            h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) },
+              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("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("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) : ''),
+        this.isEmailAllowed ?
+          h("div", { class: "s-login-tab", ref: tab => this.tab3 = 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("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("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("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("span", { class: "s-login-error-message" })),
+          h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
+  }
+  static get is() { return "salla-login"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-login.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-login.css"]
+  }; }
+  static get properties() { return {
+    "isEmailAllowed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "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 methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "verified",
+      "method": "onVerified",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "backClicked",
+      "method": "onbackClicked",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}