@salla.sa/twilight-components 2.9.45 → 2.9.48

package/dist/components/salla-quick-order.js

@@ -14,29 +14,42 @@ const HideIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaQuickOrderCss = ".s-quick-order .s-quick-order-container{padding:15px;border:1px solid #d0d0d0;border-radius:6px;background:#f3f3f3}.s-quick-order .s-quick-order-container.gray{background:#f3f3f3;border:1px solid #d0d0d0}.s-quick-order .s-quick-order-container.white{background:#fff;border:1px solid #dfdfdf}.s-quick-order .s-quick-order-container .s-quick-order-button-cont{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:baseline;align-items:baseline}.s-quick-order .s-quick-order-container .s-quick-order-checkbox-container{display:-ms-flexbox;display:flex;margin:10px 0}.s-quick-order .s-quick-order-container .s-quick-order-checkbox-container input{padding:10px;width:20px;border:1px solid #eee;border-radius:5px;margin:6px}.s-quick-order .s-quick-order-container .s-quick-order-expandable{visibility:hidden;height:0;-webkit-transition:height 1s ease;transition:height 1s ease}.s-quick-order .s-quick-order-container .s-quick-order-expandable.show{visibility:visible;height:auto}.s-quick-order .s-quick-order-container input{padding:10px;width:100%;border:1px solid #eee;border-radius:5px}";
+const CelebrationIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>party-horn</title>
+<path fill="currentColor" d="M5.333 4.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM11.333 10c0.341 0 0.683-0.131 0.943-0.391 1.541-1.54 2.391-3.589 2.391-5.771v-2.505c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.505c0 1.468-0.572 2.848-1.609 3.885-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391zM18.667 9.993c0.319 0 0.639-0.115 0.895-0.345 0.383-0.347 0.684-0.325 1.497-0.22 0.923 0.124 2.319 0.307 3.636-0.887 1.293-1.172 1.303-2.54 1.308-3.539 0.005-0.887 0.043-1.228 0.432-1.581 0.361-0.327 0.621-0.335 1.493-0.216 0.923 0.12 2.317 0.307 3.635-0.884 0.545-0.495 0.587-1.337 0.093-1.883-0.493-0.547-1.336-0.589-1.884-0.093-0.361 0.325-0.621 0.333-1.493 0.216-0.921-0.119-2.317-0.305-3.635 0.884-1.293 1.173-1.303 2.541-1.308 3.54-0.005 0.885-0.043 1.227-0.432 1.58-0.383 0.348-0.683 0.327-1.497 0.22-0.924-0.124-2.32-0.305-3.636 0.887-0.545 0.495-0.587 1.339-0.092 1.884 0.264 0.291 0.625 0.437 0.988 0.437zM18.667 16.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM30.667 17.333h-2.505c-2.179 0-4.228 0.849-5.771 2.391-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.603 0.391 0.944 0.391s0.683-0.131 0.943-0.391c1.023-1.023 2.439-1.609 3.884-1.609h2.505c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333zM30.667 10.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM29.333 26.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM7.456 11.057c-0.327-0.327-0.799-0.46-1.249-0.356-0.449 0.107-0.812 0.439-0.959 0.876l-5.036 15.113c-0.487 1.457-0.113 3.037 0.973 4.125 0.772 0.771 1.792 1.183 2.84 1.183 0.428 0 0.861-0.068 1.284-0.209l15.112-5.037c0.439-0.145 0.769-0.508 0.876-0.959 0.107-0.449-0.028-0.921-0.355-1.249zM4.467 29.259c-0.503 0.163-1.023 0.043-1.395-0.329-0.373-0.373-0.497-0.896-0.329-1.396l4.355-13.065 10.436 10.435z"></path>
+</svg>
+`;
+
+const sallaQuickOrderCss = ".s-quick-order.s-quick-order-dark h1,.s-quick-order.s-quick-order-dark p{color:#fff}.s-quick-order .s-quick-order-container{padding:15px;border-radius:6px;margin:10px 0}.s-quick-order .s-quick-order-container .s-quick-order-button-cont{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:baseline;align-items:baseline;margin:10px 0}.s-quick-order .s-quick-order-container .s-quick-order-checkbox-container{display:-ms-flexbox;display:flex;margin:10px 0}.s-quick-order .s-quick-order-container .s-quick-order-checkbox-container input{padding:10px;width:20px;border:1px solid #eee;border-radius:5px;margin:6px}.s-quick-order .s-quick-order-container .s-quick-order-expandable{height:0;max-height:0;-webkit-transition:max-height 1s;transition:max-height 1s;visibility:hidden}.s-quick-order .s-quick-order-container .s-quick-order-expandable.s-quick-order-show{visibility:visible;height:auto;max-height:500px}.s-quick-order .s-quick-order-container .s-quick-order-flex-input{display:-ms-flexbox;display:flex}.s-quick-order .s-quick-order-container input:not([type=checkbox]){padding:10px;width:100%;border:1px solid #eee;border-radius:5px;margin-bottom:10px;height:2.5rem;margin-left:10px}.s-quick-order .s-quick-order-container salla-tel-input{width:100%;height:2.5rem}.s-quick-order .s-quick-order-container .s-quick-order-errors p{color:red}.s-quick-order .s-quick-order-confirm{background:rgba(93, 213, 196, 0.05);border:1px solid rgba(93, 213, 196, 0.5) !important;color:#5dd5c4;border-radius:3px;padding:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.s-quick-order .s-quick-order-confirm span{margin:0px 10px}.s-quick-order .s-quick-order-confirm svg{color:#5dd5c4;width:1rem}";
 
 const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.quickOrderSubmited = createEvent(this, "quickOrderSubmited", 7);
+    this.errorMessages = {
+      terms: 'Terms should be agreed.',
+      name: 'Name with at least 3 chars is required.',
+      email: 'Correct email is required.',
+      phone: 'Correct Phone is required.',
+    };
     /**
      * quick order title
      */
-    this.quickOrderTitle = 'title';
+    this.quickOrderTitle = 'ليش تنتظر؟';
     /**
      * quick order sub title
      */
-    this.subTitle = 'sub title';
+    this.subTitle = 'احصل على المنتج مباشرة الآن';
     /**
      * quick order pay button text
      */
-    this.payButtonTitle = 'Pay';
+    this.payButtonTitle = 'اطلب المنتج';
     /**
      * quick order confirm pay button text
      */
-    this.confirmPayButtonTitle = 'Pay';
+    this.confirmPayButtonTitle = 'اشتر الآن';
     /**
      * agreement text from server or from props
      */
@@ -49,14 +62,13 @@ const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      * Quick Order Style
      */
     this.quickOrderStyle = 'default';
-    /*
-     * states
-     */
-    this.isGuest = true;
+    this.isAvailable = false;
     this.oneClick = false;
     this.expanded = false;
     this.isTermsRequired = false;
     this.countryCode = salla.config.get('user.country_code', 'SA') || 'SA';
+    this.errors = [];
+    this.submitSucess = false;
     //Langugae states
     this.placeHolderEmail = salla.lang.get('common.elements.email');
     this.emailOptional = salla.lang.get('common.elements.optional');
@@ -64,118 +76,172 @@ const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.agreementModalHead = salla.lang.get('pages.checkout.full_agreement');
     this.userNameLabel = salla.lang.get('pages.products.your_name');
     this.termsChecked = false;
-    this.isGuest = Salla.config.isGuest();
     this.productId = this.productId || salla.config.get('page.id');
-    this.user = salla.config.get('user') || salla.storage.get('user') || {};
-    this.countryCode = this.user.country_code || this.countryCode;
     salla.lang.onLoaded(() => {
       this.placeHolderEmail = salla.lang.get('common.elements.email');
       this.emailOptional = salla.lang.get('common.elements.optional');
       this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');
       this.agreementModalHead = salla.lang.get('pages.checkout.full_agreement');
       this.userNameLabel = salla.lang.get('pages.products.your_name');
-      this.fetchQuickCheckout();
+      this.errorMessages.terms = salla.lang.get('pages.checkout.check_agreement');
+      this.errorMessages.email = salla.lang.get('pages.checkout.email_required');
+      this.errorMessages.phone = salla.lang.get('common.errors.field_required', { attribute: salla.lang.get('common.elements.mobile') });
+      this.errorMessages.name = salla.lang.get('common.errors.field_required', { attribute: this.userNameLabel });
     });
   }
-  async fetchQuickCheckout() {
-    let res = await salla.api.cart.getQuickCheckoutSetting();
-    this.quickOrderTitle = res.title;
-    this.subTitle = res.sub_title;
-    this.payButtonTitle = res.order_now_button;
-    this.isEmailRequired = res.is_email_required;
-    this.isTermsRequired = res.show_agreement;
-    this.agreementText = res.agreement;
-    this.confirmPayButtonTitle = res.confirm_button;
-    this.thanksMessage = res.thanks_message;
-    this.quickOrderStyle = res.style;
+  fetchQuickCheckout() {
+    return salla.api.withoutNotifier(() => salla.api.cart.getQuickCheckoutSettings().then(res => {
+      var _a, _b;
+      this.isAvailable = true;
+      this.quickOrderTitle = res.data.title;
+      this.subTitle = res.data.sub_title;
+      this.payButtonTitle = res.data.order_now_button;
+      this.isEmailRequired = res.data.is_email_required;
+      this.isTermsRequired = res.data.show_agreement;
+      this.agreementText = res.data.agreement;
+      this.confirmPayButtonTitle = res.data.confirm_button;
+      this.thanksMessage = res.data.thanks_message;
+      this.quickOrderStyle = res.data.style;
+      this.user = salla.config.get('user') || salla.storage.get('user') || {};
+      this.countryCode = ((_a = this.user) === null || _a === void 0 ? void 0 : _a.country_code) || this.countryCode;
+      // make email required if user is gust or is required from server
+      this.isEmailRequired = ((_b = this.user) === null || _b === void 0 ? void 0 : _b.email) ? false : this.isEmailRequired;
+      // check if one click is available
+      this.oneClick = !(this.isTermsRequired || this.isEmailRequired) && this.user !== null;
+    }));
+  }
+  getBtnColor() {
+    return this.quickOrderStyle === 'default' ? 'light' : 'primary';
   }
-  async submit() {
-    const emailValue = this.emailInput.value;
-    const nameValue = this.nameInput.value;
-    const phoneValue = (await this.phoneInput.getValues()).phone;
+  getDarkOrLight() {
+    return this.quickOrderStyle === 'default' && salla.config.get('theme.color.is_dark') ? 'dark' : 'light';
+  }
+  getStyleColor() {
+    return {
+      gray: '#f3f3f3',
+      white: '#ffffff',
+      default: salla.config.get('theme.color.primary'),
+    }[this.quickOrderStyle] || '#f3f3f3';
+  }
+  async submit(checkOneClick = false) {
+    if (checkOneClick && !this.oneClick) {
+      this.expanded = !this.expanded;
+      return;
+    }
+    return this.getPayload()
+      .then((payload) => salla.api.cart.createQuickCheckout(payload))
+      .then(() => {
+      this.quickOrderSubmited.emit();
+      this.submitSucess = true;
+    })
+      .catch(error => error && console.error(error));
+  }
+  async isValid() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const inputErrorClass = 's-has-error';
-    // if it's not guest get the email from user
-    if (this.user)
-      this.isEmailRequired = this.user.email ? false : this.isEmailRequired;
-    // check if one click is available
-    this.oneClick = !this.isTermsRequired && !this.isEmailRequired;
-    if (!this.oneClick) {
-      let isValid = true;
-      this.nameInput.classList.remove(inputErrorClass);
-      this.emailInput.classList.remove(inputErrorClass);
-      this.phoneInput.classList.remove(inputErrorClass);
-      // terms check
-      if (this.termsInput && this.isTermsRequired && !this.termsChecked) {
-        this.termsInput.classList.add(inputErrorClass);
-        isValid = false;
-      }
+    this.errors = [];
+    if (this.isTermsRequired && !this.termsChecked) {
+      this.termsInput.classList.add(inputErrorClass);
+      this.errors.push(this.errorMessages.terms);
+    }
+    const emailValue = (_a = this.emailInput) === null || _a === void 0 ? void 0 : _a.value;
+    const nameValue = (_b = this.nameInput) === null || _b === void 0 ? void 0 : _b.value;
+    const phone = await ((_c = this.phoneInput) === null || _c === void 0 ? void 0 : _c.getValues());
+    const phoneValue = phone === null || phone === void 0 ? void 0 : phone.phone;
+    if (Salla.config.isGuest()) {
+      (_d = this.nameInput) === null || _d === void 0 ? void 0 : _d.classList.remove(inputErrorClass);
+      (_e = this.emailInput) === null || _e === void 0 ? void 0 : _e.classList.remove(inputErrorClass);
+      (_f = this.phoneInput) === null || _f === void 0 ? void 0 : _f.classList.remove(inputErrorClass);
       // email check
-      if (this.isEmailRequired && (emailValue === '' || !/\S+@\S+\.\S+/.test(emailValue))) {
-        this.emailInput.classList.add(inputErrorClass);
-        isValid = false;
+      if (this.isEmailRequired && (!emailValue || !/\S+@\S+\.\S+/.test(emailValue))) {
+        (_g = this.emailInput) === null || _g === void 0 ? void 0 : _g.classList.add(inputErrorClass);
+        this.errors.push(this.errorMessages.email);
       }
       // phone check
-      if (phoneValue === '' || !/^\d+$/.test(phoneValue)) {
-        this.phoneInput.classList.add(inputErrorClass);
-        isValid = false;
+      if (!phoneValue || !/^\d+$/.test(phoneValue)) {
+        (_h = this.phoneInput) === null || _h === void 0 ? void 0 : _h.classList.add(inputErrorClass);
+        this.errors.push(this.errorMessages.phone);
       }
       // name check
-      if (nameValue === '' || nameValue.length < 10) {
-        this.nameInput.classList.add(inputErrorClass);
-        isValid = false;
+      if (!nameValue || nameValue.length < 3) {
+        (_j = this.nameInput) === null || _j === void 0 ? void 0 : _j.classList.add(inputErrorClass);
+        this.errors.push(this.errorMessages.name);
       }
-      if (!isValid)
-        return;
     }
-    let res = await salla.api.cart.createQuickCheckout({
-      product_ids: [this.productId],
-      email: emailValue,
-      phone: phoneValue,
-      countryCode: this.countryCode,
-      full_name: nameValue,
-      terms: this.termsChecked,
-    });
-    if (res.status == 'success') {
-      this.successfullModal.open();
-      // emit
-      this.quickOrderSubmited.emit();
+    return this.errors.length === 0;
+  }
+  async getPayload() {
+    var _a, _b, _c, _d, _e, _f;
+    if (this.oneClick) {
+      return {
+        product_ids: [this.productId],
+        agreement: true,
+      };
+    }
+    if (!(await this.isValid())) {
+      this.errors.forEach(error => console.error(error));
+      throw 'Validation failed.';
     }
+    return {
+      product_ids: [this.productId],
+      email: (_a = this.emailInput) === null || _a === void 0 ? void 0 : _a.value,
+      phone: (_c = (await ((_b = this.phoneInput) === null || _b === void 0 ? void 0 : _b.getValues()))) === null || _c === void 0 ? void 0 : _c.phone,
+      country_code: ((_e = (await ((_d = this.phoneInput) === null || _d === void 0 ? void 0 : _d.getValues()))) === null || _e === void 0 ? void 0 : _e.countryCode) || this.countryCode,
+      name: (_f = this.nameInput) === null || _f === void 0 ? void 0 : _f.value,
+      agreement: this.termsChecked,
+    };
   }
-  formatAgreementText(agreement_text, length) {
+  formatAgreementText(agreement_text, length = 150) {
     if (!agreement_text)
       return '';
-    return agreement_text.length > length
-      ? agreement_text.substring(0, length) + '...'
-      : agreement_text;
+    if (agreement_text.length <= length)
+      return agreement_text;
+    const parsedToDOM = new DOMParser().parseFromString(agreement_text, 'text/html');
+    return parsedToDOM.documentElement.innerText.substring(0, length) + '...';
+  }
+  clearErrors() {
+    var _a, _b, _c, _d;
+    this.errors = [];
+    (_a = this.termsInput) === null || _a === void 0 ? void 0 : _a.classList.remove('s-has-error');
+    (_b = this.emailInput) === null || _b === void 0 ? void 0 : _b.classList.remove('s-has-error');
+    (_c = this.nameInput) === null || _c === void 0 ? void 0 : _c.classList.remove('s-has-error');
+    (_d = this.phoneInput) === null || _d === void 0 ? void 0 : _d.classList.remove('s-has-error');
   }
   render() {
-    return (h(Host, { class: "s-quick-order" }, h("div", { class: 's-quick-order-container ' + this.quickOrderStyle }, h("div", { class: "s-quick-order-button-cont" }, h("div", null, h("h1", null, this.quickOrderTitle), h("p", null, this.subTitle)), h("salla-button", { onClick: () => {
-        if (this.oneClick)
-          return this.submit();
-        this.expanded = !this.expanded;
-      }, color: "primary" }, this.oneClick ? (this.confirmPayButtonTitle) : this.expanded ? (h("i", { innerHTML: HideIcon })) : (this.confirmPayButtonTitle))), h("div", { class: 's-quick-order-expandable ' + (this.expanded ? 'show' : '') }, h("input", { type: "text", value: this.user.name, placeholder: this.user.name || this.userNameLabel, ref: el => (this.nameInput = el) }), h("salla-tel-input", { phone: this.user.mobile, ref: el => (this.phoneInput = el) }), h("input", { type: "email", value: this.user.email, required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el) }), this.isTermsRequired && (h("div", { class: "s-quick-order-checkbox-container" }, h("input", { onChange: () => {
-        this.termsChecked = this.termsInput.checked;
-      }, ref: el => (this.termsInput = el), type: "checkbox", checked: !this.isGuest }), this.agreementText && (h("div", null, this.formatAgreementText(this.agreementText, 150), this.agreementText && this.agreementText.length > 150 && (h("salla-button", { shape: "link", onClick: () => this.agreementModal.open() }, this.agreementShowText)))))), h("salla-button", { color: "primary", width: "wide", onClick: () => {
-        this.submit();
-      } }, this.payButtonTitle)), h("salla-modal", { "modal-title": this.agreementModalHead, ref: modal => (this.agreementModal = modal) }, h("article", null, this.agreementText)), this.thanksMessage && (h("salla-modal", { "icon-style": "primary", "modal-title": this.thanksMessage, "is-closable": "true", ref: modal => (this.successfullModal = modal) })))));
+    if (!this.isAvailable) {
+      return;
+    }
+    if (this.submitSucess) {
+      return (h(Host, { class: "s-quick-order" }, h("div", { class: 's-quick-order-confirm' }, h("i", { innerHTML: CelebrationIcon }), h("span", null, this.thanksMessage))));
+    }
+    return (h(Host, { class: `s-quick-order s-quick-order-${this.getDarkOrLight()}` }, h("div", { class: `s-quick-order-container s-quick-order-${this.quickOrderStyle}`, style: { backgroundColor: this.getStyleColor() } }, h("div", { class: "s-quick-order-button-cont" }, h("div", null, h("h1", null, this.quickOrderTitle), h("p", null, this.subTitle)), h("salla-button", { onClick: () => this.submit(true), color: this.getBtnColor() }, this.oneClick
+      ? this.confirmPayButtonTitle : this.expanded ? h("i", { innerHTML: HideIcon }) : this.confirmPayButtonTitle)), h("div", { class: 's-quick-order-expandable ' + (this.expanded ? 's-quick-order-show' : '') }, Salla.config.isGuest() && [
+      h("input", { type: "text", value: this.user.name, placeholder: this.user.name || this.userNameLabel, ref: el => (this.nameInput = el), onFocus: () => this.clearErrors() }),
+      h("div", { class: 's-quick-order-flex-input' }, h("input", { type: "email", value: this.user.email, required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el), onFocus: () => this.clearErrors() }), h("salla-tel-input", { phone: this.user.mobile, ref: el => (this.phoneInput = el), onFocus: () => this.clearErrors(), onBlur: () => this.clearErrors() })),
+    ], this.isTermsRequired && (h("label", { class: "s-quick-order-checkbox-container" }, h("input", { onChange: () => (this.termsChecked = this.termsInput.checked), ref: el => (this.termsInput = el), type: "checkbox", onFocus: () => this.clearErrors() }), this.agreementText && (h("div", { innerHTML: this.formatAgreementText(this.agreementText, 150) }, this.agreementText.length > 150 && (h("salla-button", { shape: "link", onClick: () => this.agreementModal.open() }, this.agreementShowText)))))), this.errors.length > 0 && (h("div", { class: "s-quick-order-errors" }, this.errors.map(error => h("p", null, "- ", error)))), h("salla-button", { color: this.getBtnColor(), width: "wide", onClick: () => this.submit() }, this.payButtonTitle)), h("salla-modal", { "modal-title": this.agreementModalHead, ref: modal => (this.agreementModal = modal) }, h("article", { innerHTML: this.agreementText })))));
+  }
+  componentDidLoad() {
+    this.fetchQuickCheckout();
   }
   static get style() { return sallaQuickOrderCss; }
 }, [0, "salla-quick-order", {
-    "quickOrderTitle": [1537, "quick-order-title"],
-    "subTitle": [1537, "sub-title"],
-    "payButtonTitle": [1537, "pay-button-title"],
-    "confirmPayButtonTitle": [1537, "confirm-pay-button-title"],
-    "agreementText": [1537, "agreement-text"],
-    "isEmailRequired": [1540, "is-email-required"],
-    "productId": [1537, "product-id"],
-    "thanksMessage": [1537, "thanks-message"],
-    "quickOrderStyle": [1537, "quick-order-style"],
-    "isGuest": [32],
+    "quickOrderTitle": [1025, "quick-order-title"],
+    "subTitle": [1025, "sub-title"],
+    "payButtonTitle": [1025, "pay-button-title"],
+    "confirmPayButtonTitle": [1025, "confirm-pay-button-title"],
+    "agreementText": [1025, "agreement-text"],
+    "isEmailRequired": [1028, "is-email-required"],
+    "productId": [1025, "product-id"],
+    "thanksMessage": [1025, "thanks-message"],
+    "quickOrderStyle": [1025, "quick-order-style"],
     "user": [32],
+    "isAvailable": [32],
     "oneClick": [32],
     "expanded": [32],
     "isTermsRequired": [32],
     "countryCode": [32],
+    "errors": [32],
+    "submitSucess": [32],
     "placeHolderEmail": [32],
     "emailOptional": [32],
     "agreementShowText": [32],

package/dist/components/salla-scopes.js

@@ -75,6 +75,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * Opens the scope modal.
    */
   async open(mode = ModeType.DEFAULT, product_id = null) {
+    this.hasError = false;
     this.mode = [ModeType.AVAILABILITY, ModeType.DEFAULT].includes(mode) ? mode : ModeType.DEFAULT;
     this.loading = !this.loadedScopes[this.mode];
     this.setScopeValues([]);