@salla.sa/twilight-components 1.6.3 → 1.6.5

package/dist/collection/components/salla-product-size-guide/salla-product-size-guide.js

@@ -5,21 +5,32 @@ import { Component, Host, State, Method, Element, h } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 export class SallaProductSizeGuide {
   constructor() {
+    this.hasError = false;
     Helper.setHost(document);
     salla.event.on('size-guide::open', (product_id) => this.open(product_id));
+    salla.lang.onLoaded(() => {
+      this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
+      this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
+      this.modal_title = salla.lang.get('pages.products.size_guides');
+    });
   }
   /**
    * Show the size-guide modal window
    */
   async open(product_id) {
-    this.modal.setTitle(salla.lang.get('pages.products.size_guides'));
+    this.modal.setTitle(this.modal_title);
     this.modal.open();
-    return await salla.product.getSizeGuides(product_id)
+    return await salla.api.withoutNotifier(salla.product.getSizeGuides(product_id)
       .then((response) => {
       this.guides = response.data;
     })
-      .catch(e => console.log(e))
-      .finally(() => this.modal.stopLoading());
+      .catch(e => {
+      var _a, _b, _c, _d;
+      console.log(e);
+      this.hasError = true;
+      this.placeholder_description = ((_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()));
   }
   /**
    *
@@ -31,8 +42,8 @@ export class SallaProductSizeGuide {
   // !Todo - Enhance placeholder text
   showPlaceholder() {
     return h("salla-placeholder", { alignment: "center", iconSize: "xl" },
-      h("div", { slot: "title" }, salla.lang.get('pages.products.size_guide_placeholder')),
-      h("div", { slot: "description" }, salla.lang.get('pages.products.size_guide_placeholder_info')));
+      h("div", { slot: "title" }, this.placeholder_title),
+      h("div", { slot: "description" }, this.placeholder_description));
   }
   render() {
     return (h(Host, { class: "s-product-size-guide-block" },
@@ -56,7 +67,7 @@ export class SallaProductSizeGuide {
               h("salla-skeleton", { height: '10px', width: '45%' }),
               h("salla-skeleton", { height: '10px', width: '30%' })))),
         h("slot", { name: "header" }),
-        !!this.guides ?
+        !this.hasError && !!this.guides ?
           [h("div", { class: "container px-8" },
               h("salla-tabs", null,
                 this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name },
@@ -75,7 +86,11 @@ export class SallaProductSizeGuide {
   }; }
   static get states() { return {
     "guides": {},
-    "productId": {}
+    "productId": {},
+    "placeholder_title": {},
+    "placeholder_description": {},
+    "modal_title": {},
+    "hasError": {}
   }; }
   static get methods() { return {
     "open": {

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

@@ -3,10 +3,12 @@
  */
 import { Component, h, Method, Element, Host, State, Prop } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+import Star from '../../assets/svg/star.svg';
 import ShippingFast from "../../assets/svg/shipping-fast.svg";
 import CheckCircle2 from "../../assets/svg/check-circle2.svg";
 export class SallaRatingModal {
   constructor() {
+    this.hasError = false;
     this.stepsCount = 0;
     this.currentIndex = 0;
     this.submitted = [];
@@ -25,12 +27,23 @@ export class SallaRatingModal {
    * Show the rating modal
    */
   async open() {
-    return this.modal.open()
-      .then(() => this.order || salla.rating.api.order(this.orderId).then(res => this.order = res.data))
-      .then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
-      .then(() => this.modal.stopLoading())
-      .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
-      .then(() => setTimeout(() => this.handleWizard(), 100));
+    this.modal.open();
+    return await salla.api.withoutNotifier(salla.rating.api.order(this.orderId)
+      .then(res => this.order = res.data)
+      .catch(e => {
+      var _a, _b, _c, _d;
+      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(() => {
+      var _a, _b, _c;
+      this.modal.setTitle(`${salla.lang.get('pages.rating.rate_order')} <span class="unicode">${!!this.order ? `(#${this.order.id})` : ''}</span>`);
+      this.stepsCount = [(_a = this.order) === null || _a === void 0 ? void 0 : _a.testimonials_enabled, (_b = this.order) === null || _b === void 0 ? void 0 : _b.products_enabled, (_c = this.order) === null || _c === void 0 ? void 0 : _c.shipping_enabled].filter(enabled => enabled).length;
+      setTimeout(() => this.handleWizard(), 100);
+      setTimeout(() => {
+        this.modal.stopLoading();
+      }, 1000);
+    }));
   }
   /**
    * Show the rating modal
@@ -45,7 +58,7 @@ export class SallaRatingModal {
     this.showActiveStep();
   }
   showActiveStep(current = null) {
-    var _a;
+    var _a, _b;
     this.currentTab = current || this.steps[this.currentIndex];
     Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
       .toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
@@ -56,9 +69,9 @@ export class SallaRatingModal {
     }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
-    this.nextBtn.setText(nextType ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
+    (_b = this.nextBtn) === null || _b === void 0 ? void 0 : _b.setText(nextType ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
       : salla.lang.get('pages.rating.send_ratings'));
-    setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
+    setTimeout(() => { var _a, _b; return (_a = this.body) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + ((_b = this.currentTab) === null || _b === void 0 ? void 0 : _b.scrollHeight) + 'px'); });
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
@@ -133,57 +146,68 @@ export class SallaRatingModal {
     this.showActiveStep(this.thanksTab);
   }
   render() {
-    return (h(Host, { class: "s-rating" },
-      h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
-        ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el },
-            this.order.testimonials_enabled ?
-              h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" },
-                h("div", { class: "s-rating-modal-rounded-icon" },
-                  h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })),
-                h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')),
-                h("div", { class: "s-rating-modal-stars-company" },
-                  h("salla-rating-stars", { size: "large" })),
-                h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }),
-                h("small", { class: "s-rating-modal-validation-msg" }))
-              : '',
-            this.order.products_enabled
-              ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') },
-                h("div", { class: "s-rating-modal-product-img-wrap" },
-                  h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })),
-                h("div", { class: "s-rating-modal-product-details" },
-                  h("h3", { class: "s-rating-modal-product-title" },
+    var _a;
+    return (h(Host, { class: "s-rating-modal" },
+      h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal },
+        h("div", { slot: 'loading' },
+          h("div", { class: "s-rating-modal-skeleton" },
+            h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }),
+            h("salla-skeleton", { height: '15px', width: '60%' }),
+            h("salla-skeleton", { height: '10px', width: '30%' }),
+            h("div", { class: "s-rating-modal-skeleton-stars" }, [...Array(5)].map(() => h("div", { innerHTML: Star }))),
+            h("salla-skeleton", { height: '100px', width: '100%' }),
+            h("div", { class: "s-rating-modal-skeleton-footer" },
+              h("salla-skeleton", { height: '40px', width: '30%' })))),
+        !this.hasError && this.order
+          ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el },
+              ((_a = this.order) === null || _a === void 0 ? void 0 : _a.testimonials_enabled) ?
+                h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" },
+                  h("div", { class: "s-rating-modal-rounded-icon" },
+                    h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })),
+                  h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')),
+                  h("div", { class: "s-rating-modal-stars-company" },
+                    h("salla-rating-stars", { size: "large" })),
+                  h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }),
+                  h("small", { class: "s-rating-modal-validation-msg" }))
+                : '',
+              this.order.products_enabled
+                ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') },
+                  h("div", { class: "s-rating-modal-product-img-wrap" },
+                    h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })),
+                  h("div", { class: "s-rating-modal-product-details" },
+                    h("h3", { class: "s-rating-modal-product-title" },
+                      " ",
+                      item.product.name),
+                    h("div", { class: "s-rating-modal-stars-product" },
+                      h("salla-rating-stars", { size: "small", name: `products[${index}][rating]` })),
+                    h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }),
+                    h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index}][comment]`, class: "s-rating-modal-comment" }),
+                    h("small", { class: "s-rating-modal-validation-msg" })))))
+                : '',
+              this.order.shipping_enabled
+                ? h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" },
+                  h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }),
+                  this.order.shipping.company.logo
+                    ? h("div", { class: "s-rating-modal-rounded-icon" },
+                      h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
+                    : h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast }),
+                  h("div", { class: "s-rating-modal-title" },
                     " ",
-                    item.product.name),
-                  h("div", { class: "s-rating-modal-stars-product" },
-                    h("salla-rating-stars", { size: "small", name: `products[${index}][rating]` })),
-                  h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }),
-                  h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index}][comment]`, class: "s-rating-modal-comment" }),
-                  h("small", { class: "s-rating-modal-validation-msg" })))))
-              : '',
-            this.order.shipping_enabled
-              ? h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" },
-                h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }),
-                this.order.shipping.company.logo
-                  ? h("div", { class: "s-rating-modal-rounded-icon" },
-                    h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
-                  : h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast }),
-                h("div", { class: "s-rating-modal-title" },
-                  " ",
-                  salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name),
-                h("div", { class: "s-rating-modal-stars-company" },
-                  h("salla-rating-stars", { size: "large" })),
-                h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }),
-                h("small", { class: "s-rating-modal-validation-msg" }))
-              : '',
-            h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el },
-              h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }),
-              h("h3", { class: "s-rating-modal-thanks-title" }, salla.lang.get('pages.rating.thanks')),
-              h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }),
-              h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), h("div", { class: "s-rating-modal-footer" },
-            h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, salla.lang.get('common.elements.back')),
-            this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '',
-            h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
-        : '')));
+                    salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name),
+                  h("div", { class: "s-rating-modal-stars-company" },
+                    h("salla-rating-stars", { size: "large" })),
+                  h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }),
+                  h("small", { class: "s-rating-modal-validation-msg" }))
+                : '',
+              h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el },
+                h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }),
+                h("h3", { class: "s-rating-modal-thanks-title" }, salla.lang.get('pages.rating.thanks')),
+                h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }),
+                h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), h("div", { class: "s-rating-modal-footer" },
+              h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, salla.lang.get('common.elements.back')),
+              this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '',
+              h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
+          : '')));
   }
   componentDidLoad() {
     salla.event.dispatch('rating::ready', this);
@@ -217,22 +241,21 @@ export class SallaRatingModal {
   }; }
   static get states() { return {
     "order": {},
+    "hasError": {},
+    "errorMessage": {},
     "translationLoaded": {}
   }; }
   static get methods() { return {
     "open": {
       "complexType": {
-        "signature": "() => Promise<NodeJS.Timeout>",
+        "signature": "() => Promise<any>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
-          },
-          "NodeJS": {
-            "location": "global"
           }
         },
-        "return": "Promise<Timeout>"
+        "return": "Promise<any>"
       },
       "docs": {
         "text": "Show the rating modal",

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

@@ -12,6 +12,7 @@ export class SallaScopees {
     this.scopes = [];
     this.originalScopesList = [];
     this.isOpenedBefore = salla.storage.get("branch-choosed-before");
+    this.hasError = false;
     /**
      * Optionally open the modal or enforce the pop-up to the viewer
      */
@@ -53,9 +54,8 @@ export class SallaScopees {
     else {
       this.mode = ModeType.DEFAULT;
     }
-    this.modal.loading();
     this.modal.open();
-    return await (mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get())
+    return await salla.api.withoutNotifier((mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get())
       .then((resp) => {
       if (mode == ModeType.AVAILABILITY) {
         this.setScopeValues(resp.data);
@@ -63,10 +63,13 @@ export class SallaScopees {
       else {
         this.setScopeValues(resp.data.scopes);
       }
-    }).catch(e => console.log(e))
+    }).catch(e => {
+      console.log(e);
+      this.hasError = true;
+    })
       .finally(() => {
       this.modal.stopLoading();
-    });
+    }));
   }
   /**
    * Submit form to change exsiting scope.
@@ -175,9 +178,9 @@ export class SallaScopees {
           this.originalScopesList.length > this.searchDisplayLimit ?
             h("div", { class: "s-scopes-search-wrapper" },
               h("div", { class: "s-scopes-search-icon", innerHTML: Search }),
-              h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: salla.lang.get('blocks.scope.searching_for_a_branch') }))
+              h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), enterkeyhint: "search", placeholder: salla.lang.get('blocks.scope.searching_for_a_branch') }))
             : "",
-          this.scopes.length < 2 ?
+          this.hasError || this.scopes.length < 2 ?
             this.placeholderContent()
             : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent()))));
   }
@@ -238,7 +241,8 @@ export class SallaScopees {
     "scopes": {},
     "originalScopesList": {},
     "selected_scope": {},
-    "isOpenedBefore": {}
+    "isOpenedBefore": {},
+    "hasError": {}
   }; }
   static get methods() { return {
     "close": {

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

@@ -97,7 +97,7 @@ export class SallaSearch {
   render() {
     var _a;
     const searchContent = h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container },
-      h("input", { type: "text", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: e => this.debounceSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }),
+      h("input", { type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: e => this.debounceSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }),
       h("span", { class: "s-search-icon-wrap" },
         h("span", { class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"></i>' : Search })),
       h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :

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

@@ -0,0 +1,86 @@
+.s-select-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #111827;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}
+
+.s-select-underline {
+  display: block;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  background-color: transparent;
+  color: #6B7280;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  width: 100%;
+  border-width: 0;
+  border-bottom-width: 2px;
+  border-color: #E5E7EB;
+  appearance: none;
+}
+
+.s-select-outlined {
+  display: block;
+  padding: 0.625rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  background-color: #F9FAFB;
+  color: #111827;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  width: 100%;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-color: #D1D5DB;
+}
+
+.s-select-x-large {
+  height: 5rem;
+}
+
+.s-select-large {
+  height: 4rem;
+}
+
+.s-select-normal {
+  height: 3rem;
+}
+
+.s-select-small {
+  height: 3rem;
+}
+
+.s-select-x-small {
+  height: 2.5rem;
+}
+
+.s-select-field {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  border-color: #9CA3AF;
+  box-shadow: none;
+}
+
+.s-select-hint {
+  margin-top: 0.25rem;
+  color: #374151;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 1.25rem;
+}