@salla.sa/twilight-components 2.9.45 → 2.9.46

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

@@ -8,19 +8,19 @@ export class SallaQuickOrder {
     /**
      * 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,10 +33,7 @@ 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;
@@ -48,7 +45,6 @@ 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;
@@ -58,81 +54,101 @@ export class SallaQuickOrder {
       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();
     });
   }
-  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) => {
+      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;
+    }));
   }
   async submit() {
-    const emailValue = this.emailInput.value;
-    const nameValue = this.nameInput.value;
-    const phoneValue = (await this.phoneInput.getValues()).phone;
+    return this.getPayload()
+      .then((payload) => salla.api.cart.createQuickCheckout(payload))
+      .then(() => {
+      this.successfullModal.open();
+      this.quickOrderSubmited.emit();
+    })
+      .catch(error => error && console.error(error));
+  }
+  async getPayload() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    let errors = [];
     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;
-      }
+    if (this.isTermsRequired && !this.termsChecked) {
+      this.termsInput.classList.add(inputErrorClass);
+      errors.push('Terms should be agreed.');
+    }
+    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 country_code = (phone === null || phone === void 0 ? void 0 : phone.countryCode) || this.countryCode;
+    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);
+        errors.push('Correct email is required.');
       }
       // 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);
+        errors.push('Correct phone is required.');
       }
       // 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);
+        errors.push('Name with at least 3 chars is required.');
       }
-      if (!isValid)
-        return;
     }
-    let res = await salla.api.cart.createQuickCheckout({
+    else if (errors.length == 0) { // user is logged-in && agreement is checked if is required
+      return {
+        product_ids: [this.productId],
+        agreement: this.termsChecked,
+      };
+    }
+    if (errors.length) {
+      errors.forEach(error => console.error(error));
+      throw 'Validation failed.';
+    }
+    return {
       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();
-    }
+      country_code: country_code,
+      name: nameValue,
+      agreement: this.termsChecked,
+    };
   }
   formatAgreementText(agreement_text, length) {
     if (!agreement_text)
       return '';
-    return agreement_text.length > length
-      ? agreement_text.substring(0, length) + '...'
+    let text = (new DOMParser()).parseFromString(agreement_text, 'text/html').documentElement.innerText;
+    return text.length > length
+      ? text.substring(0, length) + '...'
       : agreement_text;
   }
   render() {
+    if (!this.isAvailable) {
+      return;
+    }
     return (h(Host, { class: "s-quick-order" },
       h("div", { class: 's-quick-order-container ' + this.quickOrderStyle },
         h("div", { class: "s-quick-order-button-cont" },
@@ -145,23 +161,18 @@ export class SallaQuickOrder {
               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) }),
+          Salla.config.isGuest() && [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("input", { onChange: () => this.termsChecked = this.termsInput.checked, ref: el => (this.termsInput = el), type: "checkbox" }),
+            this.agreementText && (h("div", { innerHTML: 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)),
+          h("article", { innerHTML: this.agreementText })),
         this.thanksMessage && (h("salla-modal", { "icon-style": "primary", "modal-title": this.thanksMessage, "is-closable": "true", ref: modal => (this.successfullModal = modal) })))));
   }
+  componentDidLoad() {
+    this.fetchQuickCheckout();
+  }
   static get is() { return "salla-quick-order"; }
   static get originalStyleUrls() { return {
     "$": ["salla-quick-order.scss"]
@@ -185,8 +196,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 +214,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 +232,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 +250,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,8 +268,8 @@ export class SallaQuickOrder {
         "text": "agreement text from server or from props"
       },
       "attribute": "agreement-text",
-      "reflect": true,
-      "defaultValue": "salla.lang.get(\n    'pages.checkout.show_full_agreement'\n  )"
+      "reflect": false,
+      "defaultValue": "salla.lang.get('pages.checkout.show_full_agreement')"
     },
     "isEmailRequired": {
       "type": "boolean",
@@ -275,7 +286,7 @@ export class SallaQuickOrder {
         "text": "is email required"
       },
       "attribute": "is-email-required",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "false"
     },
     "productId": {
@@ -293,7 +304,7 @@ export class SallaQuickOrder {
         "text": "product id local or from page"
       },
       "attribute": "product-id",
-      "reflect": true
+      "reflect": false
     },
     "thanksMessage": {
       "type": "string",
@@ -310,7 +321,7 @@ export class SallaQuickOrder {
         "text": "product id local or from page"
       },
       "attribute": "thanks-message",
-      "reflect": true
+      "reflect": false
     },
     "quickOrderStyle": {
       "type": "string",
@@ -327,13 +338,13 @@ 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": {},

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([]);