@salla.sa/twilight-components 1.4.11 → 1.4.17

package/README.md

@@ -1,5 +1,5 @@
 <div id="top"></div>
-
+ 
 <br />
 <div align="center">
      <a href="https://salla.dev">
@@ -218,4 +218,4 @@ You can also simply open an issue with the tag "enhancement". Don't forget to gi
 
 The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
 
-<p align="right">(<a href="#top">back to top</a>)</p>
+<p align="right">(<a href="#top">back to top</a>)</p>

package/dist/cjs/loader.cjs.js

@@ -17,7 +17,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-button_24.cjs",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"cart_total_point_summary":[32],"cart_point_exchange_now":[32],"login_button":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"branchNotFound":[32],"ourServiceIsNotFound":[32],"searchForAvailabilityInOtherBranch":[32],"shoppingFromAnotherBranch":[32],"nowBrowsingFrom":[32],"confirmButton":[32],"scopeSearchPlaceholder":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onSelect","onSelectedTab"]]],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-add-product-button.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-button_24.cjs",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"cart_total_point_summary":[32],"cart_point_exchange_now":[32],"login_button":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"branchNotFound":[32],"ourServiceIsNotFound":[32],"searchForAvailabilityInOtherBranch":[32],"shoppingFromAnotherBranch":[32],"nowBrowsingFrom":[32],"confirmButton":[32],"scopeSearchPlaceholder":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onSelect","onSelectedTab"]]],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"hasSkeleton":[516,"has-skeleton"],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-add-product-button.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
   });
 };
 

package/dist/cjs/salla-button_24.cjs.entry.js

@@ -327,7 +327,7 @@ const SallaLocalizationModal = class {
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (index$1.h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
+    return (index$1.h("salla-modal", { isLoading: this.isLoading, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
       index$1.h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
         index$1.h("div", { class: "s-localization-modal-section" }, index$1.h("label", { class: "s-localization-modal-title" }, this.languagesTitle), index$1.h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
           this.languages.map(lang => index$1.h("div", { class: "s-localization-modal-item" }, index$1.h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), index$1.h("div", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot
@@ -709,7 +709,6 @@ const SallaLoyalty = class {
     this.modal.open();
     return await salla.loyalty.getProgram()
       .then((response) => {
-      console.log("🚀 ~ file: salla-loyalty.tsx ~ line 167 ~ SallaLoyalty ~ .then ~ response", response);
       this.loyaltyProgram = response.data;
     })
       .catch(e => console.log(e))
@@ -777,12 +776,12 @@ const SallaLoyalty = class {
       index$1.h("slot", { name: 'widget' }, this.customerPoints ?
         index$1.h("salla-list-tile", { class: 's-loyalty-widget' }, index$1.h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Star2 }), index$1.h("div", { slot: "subtitle" }, this.is_loggedin ? this.cart_total_point_summary : this.guestMessage, index$1.h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? this.cart_point_exchange_now : this.login_button))) :
         ''),
-      index$1.h("salla-modal", { id: "salla-loyalty-confirmation-modal", noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
-      index$1.h("salla-modal", { isLoading: true, id: "salla-loyalty-modal", width: "md", ref: modal => this.modal = modal }, !!this.loyaltyProgram ?
+      index$1.h("salla-modal", { noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
+      index$1.h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, index$1.h("div", { slot: "loading" }, index$1.h("div", { class: "s-loyalty-skeleton" }, index$1.h("salla-list-tile", { class: "s-loyalty-header" }, index$1.h("div", { slot: "icon", class: "s-loyalty-header-icon" }, index$1.h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), index$1.h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, index$1.h("salla-skeleton", { height: '15px', width: '50%' })), index$1.h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, index$1.h("salla-skeleton", { height: '10px' }), index$1.h("salla-skeleton", { height: '10px', width: '75%' }))), index$1.h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => index$1.h("div", { class: "s-loyalty-prize-item" }, index$1.h("salla-skeleton", { height: '9rem' }), index$1.h("div", { class: "s-loyalty-prize-item-title" }, index$1.h("salla-skeleton", { height: '15px', width: '75%' })), index$1.h("div", { class: "s-loyalty-prize-item-subtitle" }, index$1.h("salla-skeleton", { height: '10px', width: '50%' }), index$1.h("salla-skeleton", { height: '10px', width: '25%' })), index$1.h("div", { class: "s-loyalty-prize-item-points" }, index$1.h("salla-skeleton", { height: '15px', width: '100px' }), index$1.h("div", { class: "s-loyalty-prize-item-check" }, index$1.h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !!this.loyaltyProgram ?
         [
           index$1.h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, index$1.h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), index$1.h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), index$1.h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
           index$1.h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => index$1.h("salla-tab-header", { slot: "header", name: prize.title }, index$1.h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize) => index$1.h("salla-tab-content", { slot: "content", name: prize.title }, index$1.h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
-          index$1.h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points)
+          index$1.h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points),
         ]
         : index$1.h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
     ];
@@ -811,6 +810,10 @@ const SallaModal = class {
      * open the modal on rendering
      */
     this.visible = false;
+    /**
+     * open the modal on rendering
+     */
+    this.hasSkeleton = false;
     /**
      * Show loading in the middle
      */
@@ -912,13 +915,13 @@ const SallaModal = class {
     };
   }
   getWidth() {
-    return this.isLoading ? 'sm' : this.width;
+    return this.isLoading ? this.hasSkeleton ? 'md' : 'sm' : this.width;
   }
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
     if (this.isLoading) {
-      return (index$1.h(index$1.Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index$1.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index$1.h("div", { class: "s-modal-wrapper" }, index$1.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index$1.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, index$1.h("salla-loading", null), index$1.h("div", { class: "s-hidden" }, index$1.h("slot", null))))));
+      return (index$1.h(index$1.Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index$1.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index$1.h("div", { class: "s-modal-wrapper" }, index$1.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index$1.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, index$1.h("slot", { name: "loading" }, index$1.h("salla-loading", null)), index$1.h("div", { class: "s-hidden" }, index$1.h("slot", null))))));
     }
     return (index$1.h(index$1.Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index$1.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index$1.h("div", { class: "s-modal-wrapper" }, index$1.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index$1.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, index$1.h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
       index$1.h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, index$1.h("span", { class: "sicon-cancel" }))
@@ -1007,7 +1010,7 @@ const SallaOfferModal = class {
   }
   render() {
     var _a, _b;
-    return index$1.h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return index$1.h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
       ? [index$1.h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, index$1.h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
           ? this.offer.get.categories.map(category => index$1.h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
               .replace(/\{name\}/g, category.name)
@@ -1110,7 +1113,7 @@ const SallaPlaceholder = class {
     };
   }
   render() {
-    return (index$1.h("div", { class: this.alignmentClass() }, index$1.h("div", { class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), index$1.h("div", { class: "s-placeholder-title" }, index$1.h("slot", { name: 'title' }, index$1.h("span", null, this.default_title))), index$1.h("div", { class: "s-placeholder-description" }, index$1.h("slot", { name: 'description' }, index$1.h("span", null, this.default_description)))));
+    return (index$1.h(index$1.Host, { class: this.alignmentClass() }, index$1.h("div", { class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), index$1.h("div", { class: "s-placeholder-title" }, index$1.h("slot", { name: 'title' }, index$1.h("span", null, this.default_title))), index$1.h("div", { class: "s-placeholder-description" }, index$1.h("slot", { name: 'description' }, index$1.h("span", null, this.default_description)))));
   }
 };
 SallaPlaceholder.style = sallaPlaceholderCss;
@@ -1422,9 +1425,9 @@ const SallaRatingModal = class {
     this.showActiveStep(this.thanksTab);
   }
   render() {
-    return (index$1.h(index$1.Host, { id: "s-rating" }, index$1.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
+    return (index$1.h(index$1.Host, { class: "s-rating" }, index$1.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
       ? [index$1.h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
-          index$1.h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, index$1.h("div", { class: "s-rating-modal-rounded-icon" }, index$1.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" })), index$1.h("h2", { class: "s-rating-modal-title" }, this.rate_the_store), index$1.h("div", { class: "s-rating-modal-stars-company" }, index$1.h("salla-rating-stars", { size: "large" })), index$1.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }), index$1.h("small", { class: "s-rating-modal-validation-msg" }))
+          index$1.h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, index$1.h("div", { class: "s-rating-modal-rounded-icon" }, index$1.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" })), index$1.h("h2", { class: "s-rating-modal-title" }, this.rate_the_store), index$1.h("div", { class: "s-rating-modal-stars-company" }, index$1.h("salla-rating-stars", { size: "large" })), index$1.h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }), index$1.h("small", { class: "s-rating-modal-validation-msg" }))
           : '', this.order.products_enabled
           ? index$1.h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => index$1.h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": this.rate_product_stars }, index$1.h("div", { class: "s-rating-modal-product-img-wrap" }, index$1.h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })), index$1.h("div", { class: "s-rating-modal-product-details" }, index$1.h("h3", { class: "s-rating-modal-product-title" }, " ", item.product.name), index$1.h("div", { class: "s-rating-modal-stars-product" }, index$1.h("salla-rating-stars", { size: "small", name: `products[${index}][rating]` })), index$1.h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), index$1.h("textarea", { placeholder: this.write_product_rate, name: `products[${index}][comment]`, class: "s-rating-modal-comment" }), index$1.h("small", { class: "s-rating-modal-validation-msg" })))))
           : '', this.order.shipping_enabled
@@ -1597,7 +1600,7 @@ const SallaScopees = class {
     return await salla.scope.change(payload)
       .then(() => {
       salla.storage.set("branch-choosed-before", true);
-      window.location.reload();
+      salla.storage.set("scope", this.current_scope.id);
     }).catch(e => console.log(e))
       .finally(() => {
       this.changeBtn.stop();
@@ -1643,7 +1646,7 @@ const SallaScopees = class {
     return index$1.h("div", { class: "s-scopes-footer" }, index$1.h("slot", { name: "footer" }, index$1.h("salla-button", { ref: btn => this.changeBtn = btn, disabled: !this.current_scope, onClick: () => this.handleSubmit(), class: "s-scopes-submit", "loader-position": "center", width: "wide" }, this.confirmButton)));
   }
   render() {
-    return (index$1.h(index$1.Host, null, index$1.h("salla-modal", { ref: modal => this.modal = modal, id: "s-scopes-modal", isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true }, index$1.h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, index$1.h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), index$1.h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom), index$1.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), index$1.h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && index$1.h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
+    return (index$1.h(index$1.Host, null, index$1.h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true }, index$1.h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, index$1.h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), index$1.h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom), index$1.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), index$1.h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && index$1.h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
       index$1.h("div", { class: "s-scopes-search-wrapper" }, index$1.h("div", { class: "s-scopes-search-icon", innerHTML: Search }), index$1.h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: this.scopeSearchPlaceholder }))
       : "", this.scopes.length < 2 ?
       this.placeholderContent()
@@ -3208,7 +3211,7 @@ const SallaSocialShare = class {
     }, '-=200');
   }
   render() {
-    return (index$1.h("div", { id: "s-social-share", class: "s-social-share-wrapper" }, index$1.h("slot", { name: 'widget' }, index$1.h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, index$1.h("i", { class: this.opened ? "sicon-cancel" : "sicon-share-alt" }))), index$1.h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
+    return (index$1.h("div", { class: "s-social-share-wrapper" }, index$1.h("slot", { name: 'widget' }, index$1.h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, index$1.h("i", { class: this.opened ? "sicon-cancel" : "sicon-share-alt" }))), index$1.h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
       return (index$1.h("li", { ref: el => this.platformItem = el }, index$1.h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
         if (icon.name === platform) {
           return index$1.h("span", { class: "s-social-share-icon", innerHTML: icon.icon });
@@ -9822,7 +9825,7 @@ const SallaTelInput = class {
   }
   ;
   render() {
-    return (index$1.h(index$1.Host, { id: "s-tel-input" }, index$1.h("input", { type: "tel", name: this.name, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), index$1.h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), index$1.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+    return (index$1.h(index$1.Host, { class: "s-tel-input" }, index$1.h("input", { type: "tel", name: this.name, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), index$1.h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), index$1.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
   }
   componentDidLoad() {
     this.initTelInput();

package/dist/cjs/twilight-components.cjs.js

@@ -18,5 +18,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-button_24.cjs",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"cart_total_point_summary":[32],"cart_point_exchange_now":[32],"login_button":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"branchNotFound":[32],"ourServiceIsNotFound":[32],"searchForAvailabilityInOtherBranch":[32],"shoppingFromAnotherBranch":[32],"nowBrowsingFrom":[32],"confirmButton":[32],"scopeSearchPlaceholder":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onSelect","onSelectedTab"]]],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-add-product-button.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-button_24.cjs",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"cart_total_point_summary":[32],"cart_point_exchange_now":[32],"login_button":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"branchNotFound":[32],"ourServiceIsNotFound":[32],"searchForAvailabilityInOtherBranch":[32],"shoppingFromAnotherBranch":[32],"nowBrowsingFrom":[32],"confirmButton":[32],"scopeSearchPlaceholder":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onSelect","onSelectedTab"]]],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"hasSkeleton":[516,"has-skeleton"],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-add-product-button.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
 });

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

@@ -86,7 +86,7 @@ export class SallaLocalizationModal {
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
+    return (h("salla-modal", { isLoading: this.isLoading, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
       h("div", { class: "s-localization-modal-inner" },
         this.languages.length > 1 ?
           h("div", { class: "s-localization-modal-section" },

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

@@ -125,7 +125,6 @@ export class SallaLoyalty {
     this.modal.open();
     return await salla.loyalty.getProgram()
       .then((response) => {
-      console.log("🚀 ~ file: salla-loyalty.tsx ~ line 167 ~ SallaLoyalty ~ .then ~ response", response);
       this.loyaltyProgram = response.data;
     })
       .catch(e => console.log(e))
@@ -197,21 +196,43 @@ export class SallaLoyalty {
             this.is_loggedin ? this.cart_total_point_summary : this.guestMessage,
             h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? this.cart_point_exchange_now : this.login_button))) :
         ''),
-      h("salla-modal", { id: "salla-loyalty-confirmation-modal", noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
-      h("salla-modal", { isLoading: true, id: "salla-loyalty-modal", width: "md", ref: modal => this.modal = modal }, !!this.loyaltyProgram ?
-        [
-          h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" },
-            h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }),
-            h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title),
-            h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
-          h("salla-tabs", null,
-            this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title },
-              h("span", null, prize.title))),
-            this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title },
-              h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
-          h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points)
-        ]
-        : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
+      h("salla-modal", { noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
+      h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal },
+        h("div", { slot: "loading" },
+          h("div", { class: "s-loyalty-skeleton" },
+            h("salla-list-tile", { class: "s-loyalty-header" },
+              h("div", { slot: "icon", class: "s-loyalty-header-icon" },
+                h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })),
+              h("div", { slot: "title", class: "s-loyalty-header-title mb-5" },
+                h("salla-skeleton", { height: '15px', width: '50%' })),
+              h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" },
+                h("salla-skeleton", { height: '10px' }),
+                h("salla-skeleton", { height: '10px', width: '75%' }))),
+            h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item" },
+              h("salla-skeleton", { height: '9rem' }),
+              h("div", { class: "s-loyalty-prize-item-title" },
+                h("salla-skeleton", { height: '15px', width: '75%' })),
+              h("div", { class: "s-loyalty-prize-item-subtitle" },
+                h("salla-skeleton", { height: '10px', width: '50%' }),
+                h("salla-skeleton", { height: '10px', width: '25%' })),
+              h("div", { class: "s-loyalty-prize-item-points" },
+                h("salla-skeleton", { height: '15px', width: '100px' }),
+                h("div", { class: "s-loyalty-prize-item-check" },
+                  h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))),
+        !!this.loyaltyProgram ?
+          [
+            h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" },
+              h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }),
+              h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title),
+              h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
+            h("salla-tabs", null,
+              this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title },
+                h("span", null, prize.title))),
+              this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title },
+                h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
+            h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points),
+          ]
+          : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
     ];
   }
   componentDidLoad() {

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

@@ -21,6 +21,10 @@ export class SallaModal {
      * open the modal on rendering
      */
     this.visible = false;
+    /**
+     * open the modal on rendering
+     */
+    this.hasSkeleton = false;
     /**
      * Show loading in the middle
      */
@@ -122,7 +126,7 @@ export class SallaModal {
     };
   }
   getWidth() {
-    return this.isLoading ? 'sm' : this.width;
+    return this.isLoading ? this.hasSkeleton ? 'md' : 'sm' : this.width;
   }
   //todo:: pref for each modal
   render() {
@@ -133,7 +137,8 @@ export class SallaModal {
         h("div", { class: "s-modal-wrapper" },
           h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"),
           h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') },
-            h("salla-loading", null),
+            h("slot", { name: "loading" },
+              h("salla-loading", null)),
             h("div", { class: "s-hidden" },
               h("slot", null))))));
     }
@@ -244,6 +249,24 @@ export class SallaModal {
       "reflect": true,
       "defaultValue": "false"
     },
+    "hasSkeleton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "open the modal on rendering"
+      },
+      "attribute": "has-skeleton",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "isLoading": {
       "type": "boolean",
       "mutable": true,

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

@@ -73,7 +73,7 @@ export class SallaOfferModal {
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
       ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" },
           h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
             ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Prop, State, h } from '@stencil/core';
+import { Component, Prop, State, h, Host } from '@stencil/core';
 import Inbox from '../../assets/svg/inbox.svg';
 export class SallaPlaceholder {
   constructor() {
@@ -31,7 +31,7 @@ export class SallaPlaceholder {
     };
   }
   render() {
-    return (h("div", { class: this.alignmentClass() },
+    return (h(Host, { class: this.alignmentClass() },
       h("div", { class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }),
       h("div", { class: "s-placeholder-title" },
         h("slot", { name: 'title' },

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

@@ -147,7 +147,7 @@ export class SallaRatingModal {
     this.showActiveStep(this.thanksTab);
   }
   render() {
-    return (h(Host, { id: "s-rating" },
+    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 ?
@@ -157,7 +157,7 @@ export class SallaRatingModal {
                 h("h2", { class: "s-rating-modal-title" }, this.rate_the_store),
                 h("div", { class: "s-rating-modal-stars-company" },
                   h("salla-rating-stars", { size: "large" })),
-                h("textarea", { id: "storeReview", name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }),
+                h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }),
                 h("small", { class: "s-rating-modal-validation-msg" }))
               : '',
             this.order.products_enabled

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

@@ -73,7 +73,7 @@ export class SallaScopees {
     return await salla.scope.change(payload)
       .then(() => {
       salla.storage.set("branch-choosed-before", true);
-      window.location.reload();
+      salla.storage.set("scope", this.current_scope.id);
     }).catch(e => console.log(e))
       .finally(() => {
       this.changeBtn.stop();
@@ -130,7 +130,7 @@ export class SallaScopees {
   }
   render() {
     return (h(Host, null,
-      h("salla-modal", { ref: modal => this.modal = modal, id: "s-scopes-modal", isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true },
+      h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true },
         h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" },
           h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }),
           h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom),

package/dist/collection/components/salla-social-share/salla-social-share.js

@@ -76,7 +76,7 @@ export class SallaSocialShare {
     }, '-=200');
   }
   render() {
-    return (h("div", { id: "s-social-share", class: "s-social-share-wrapper" },
+    return (h("div", { class: "s-social-share-wrapper" },
       h("slot", { name: 'widget' },
         h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" },
           h("i", { class: this.opened ? "sicon-cancel" : "sicon-share-alt" }))),

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -89,7 +89,7 @@ export class SallaTelInput {
   }
   ;
   render() {
-    return (h(Host, { id: "s-tel-input" },
+    return (h(Host, { class: "s-tel-input" },
       h("input", { type: "tel", name: this.name, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }),
       h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }),
       h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));

package/dist/collection/global/app.js

@@ -6,7 +6,6 @@ import '@salla.sa/twilight/dist/cjs/index';
 export default function () {
   salla.init({
     debug: true,
-    language_code: 'en',
     store: {
       // stage
       url: "https://web-26c3cd35add3468fc189c714bd1a1345.salla.group/bayans",
@@ -20,6 +19,7 @@ export default function () {
       type: 'user',
       id: "TEXGNhitwf0E1wjxgVFA4wSDMC2sJsLboHNoLmAL",
       email: "daniel@salla.sa",
+      language_code: 'ar',
     },
   });
   // this is required to bypass cloudflare in stage

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

@@ -88,7 +88,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
+    return (h("salla-modal", { isLoading: this.isLoading, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
       h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
         h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, this.languagesTitle), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
           this.languages.map(lang => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot

package/dist/components/salla-loyalty.js

@@ -2,11 +2,12 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$a } from './salla-button2.js';
-import { d as defineCustomElement$9 } from './salla-list-tile2.js';
-import { d as defineCustomElement$8 } from './salla-loading2.js';
-import { d as defineCustomElement$7 } from './salla-modal2.js';
-import { d as defineCustomElement$6 } from './salla-placeholder2.js';
+import { d as defineCustomElement$b } from './salla-button2.js';
+import { d as defineCustomElement$a } from './salla-list-tile2.js';
+import { d as defineCustomElement$9 } from './salla-loading2.js';
+import { d as defineCustomElement$8 } from './salla-modal2.js';
+import { d as defineCustomElement$7 } from './salla-placeholder2.js';
+import { d as defineCustomElement$6 } from './salla-skeleton2.js';
 import { d as defineCustomElement$5 } from './salla-swiper2.js';
 import { d as defineCustomElement$4 } from './salla-tab-content2.js';
 import { d as defineCustomElement$3 } from './salla-tab-header2.js';
@@ -172,7 +173,6 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.modal.open();
     return await salla.loyalty.getProgram()
       .then((response) => {
-      console.log("🚀 ~ file: salla-loyalty.tsx ~ line 167 ~ SallaLoyalty ~ .then ~ response", response);
       this.loyaltyProgram = response.data;
     })
       .catch(e => console.log(e))
@@ -240,12 +240,12 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       h("slot", { name: 'widget' }, this.customerPoints ?
         h("salla-list-tile", { class: 's-loyalty-widget' }, h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Star2 }), h("div", { slot: "subtitle" }, this.is_loggedin ? this.cart_total_point_summary : this.guestMessage, h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? this.cart_point_exchange_now : this.login_button))) :
         ''),
-      h("salla-modal", { id: "salla-loyalty-confirmation-modal", noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
-      h("salla-modal", { isLoading: true, id: "salla-loyalty-modal", width: "md", ref: modal => this.modal = modal }, !!this.loyaltyProgram ?
+      h("salla-modal", { noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
+      h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-loyalty-skeleton" }, h("salla-list-tile", { class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-loyalty-prize-item-title" }, h("salla-skeleton", { height: '15px', width: '75%' })), h("div", { class: "s-loyalty-prize-item-subtitle" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-loyalty-prize-item-points" }, h("salla-skeleton", { height: '15px', width: '100px' }), h("div", { class: "s-loyalty-prize-item-check" }, h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !!this.loyaltyProgram ?
         [
           h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
           h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
-          h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points)
+          h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points),
         ]
         : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
     ];
@@ -285,7 +285,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-loyalty", "salla-button", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-swiper", "salla-tab-content", "salla-tab-header", "salla-tabs"];
+  const components = ["salla-loyalty", "salla-button", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-swiper", "salla-tab-content", "salla-tab-header", "salla-tabs"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-loyalty":
       if (!customElements.get(tagName)) {
@@ -294,25 +294,30 @@ function defineCustomElement$1() {
       break;
     case "salla-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "salla-list-tile":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "salla-loading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "salla-modal":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "salla-placeholder":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "salla-skeleton":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }