@salla.sa/twilight-components 2.9.45 → 2.9.48

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

@@ -3,24 +3,31 @@
  */
 import { Component, Host, h, Prop, State, Event } from '@stencil/core';
 import HideIcon from '../../assets/svg/eye-off.svg';
+import CelebrationIcon from '../../assets/svg/party-horn.svg';
 export class SallaQuickOrder {
   constructor() {
+    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
      */
@@ -33,14 +40,13 @@ export class SallaQuickOrder {
      * 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');
@@ -48,119 +54,174 @@ export class SallaQuickOrder {
     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';
+  }
+  getDarkOrLight() {
+    return this.quickOrderStyle === 'default' && salla.config.get('theme.color.is_dark') ? 'dark' : 'light';
   }
-  async submit() {
-    const emailValue = this.emailInput.value;
-    const nameValue = this.nameInput.value;
-    const phoneValue = (await this.phoneInput.getValues()).phone;
+  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 },
+    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: () => {
-              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-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", null, this.agreementText)),
-        this.thanksMessage && (h("salla-modal", { "icon-style": "primary", "modal-title": this.thanksMessage, "is-closable": "true", ref: modal => (this.successfullModal = modal) })))));
+          h("article", { innerHTML: this.agreementText })))));
+  }
+  componentDidLoad() {
+    this.fetchQuickCheckout();
   }
   static get is() { return "salla-quick-order"; }
   static get originalStyleUrls() { return {
@@ -185,8 +246,8 @@ export class SallaQuickOrder {
         "text": "quick order title"
       },
       "attribute": "quick-order-title",
-      "reflect": true,
-      "defaultValue": "'title'"
+      "reflect": false,
+      "defaultValue": "'\u0644\u064A\u0634 \u062A\u0646\u062A\u0638\u0631\u061F'"
     },
     "subTitle": {
       "type": "string",
@@ -203,8 +264,8 @@ export class SallaQuickOrder {
         "text": "quick order sub title"
       },
       "attribute": "sub-title",
-      "reflect": true,
-      "defaultValue": "'sub title'"
+      "reflect": false,
+      "defaultValue": "'\u0627\u062D\u0635\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0646\u062A\u062C \u0645\u0628\u0627\u0634\u0631\u0629 \u0627\u0644\u0622\u0646'"
     },
     "payButtonTitle": {
       "type": "string",
@@ -221,8 +282,8 @@ export class SallaQuickOrder {
         "text": "quick order pay button text"
       },
       "attribute": "pay-button-title",
-      "reflect": true,
-      "defaultValue": "'Pay'"
+      "reflect": false,
+      "defaultValue": "'\u0627\u0637\u0644\u0628 \u0627\u0644\u0645\u0646\u062A\u062C'"
     },
     "confirmPayButtonTitle": {
       "type": "string",
@@ -239,8 +300,8 @@ export class SallaQuickOrder {
         "text": "quick order confirm pay button text"
       },
       "attribute": "confirm-pay-button-title",
-      "reflect": true,
-      "defaultValue": "'Pay'"
+      "reflect": false,
+      "defaultValue": "'\u0627\u0634\u062A\u0631 \u0627\u0644\u0622\u0646'"
     },
     "agreementText": {
       "type": "string",
@@ -257,7 +318,7 @@ export class SallaQuickOrder {
         "text": "agreement text from server or from props"
       },
       "attribute": "agreement-text",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "salla.lang.get(\n    'pages.checkout.show_full_agreement'\n  )"
     },
     "isEmailRequired": {
@@ -275,7 +336,7 @@ export class SallaQuickOrder {
         "text": "is email required"
       },
       "attribute": "is-email-required",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "false"
     },
     "productId": {
@@ -293,7 +354,7 @@ export class SallaQuickOrder {
         "text": "product id local or from page"
       },
       "attribute": "product-id",
-      "reflect": true
+      "reflect": false
     },
     "thanksMessage": {
       "type": "string",
@@ -310,14 +371,14 @@ export class SallaQuickOrder {
         "text": "product id local or from page"
       },
       "attribute": "thanks-message",
-      "reflect": true
+      "reflect": false
     },
     "quickOrderStyle": {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "'gray' | 'white' | 'default'",
+        "resolved": "\"default\" | \"gray\" | \"white\"",
         "references": {}
       },
       "required": false,
@@ -327,17 +388,19 @@ export class SallaQuickOrder {
         "text": "Quick Order Style"
       },
       "attribute": "quick-order-style",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "'default'"
     }
   }; }
   static get states() { return {
-    "isGuest": {},
     "user": {},
+    "isAvailable": {},
     "oneClick": {},
     "expanded": {},
     "isTermsRequired": {},
     "countryCode": {},
+    "errors": {},
+    "submitSucess": {},
     "placeHolderEmail": {},
     "emailOptional": {},
     "agreementShowText": {},

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

@@ -56,6 +56,7 @@ export class SallaScopees {
    * 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([]);