@salla.sa/twilight-components 1.6.3 → 1.6.4

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

@@ -15,7 +15,7 @@ export class SallaLocalizationModal {
     this.translationLoaded = false;
     this.languages = [];
     this.currencies = [];
-    this.isLoading = true;
+    this.hasError = false;
     /**
      * Current language (existing or newly selected)
      */
@@ -45,10 +45,18 @@ export class SallaLocalizationModal {
    * open the component
    */
   async open() {
-    return await this.modal.open()
-      .then(() => this.getLanguages())
+    this.modal.open();
+    return await salla.api.withoutNotifier(this.getLanguages()
       .then(() => this.getCurrencies())
-      .then(() => this.isLoading = false);
+      .catch(e => {
+      var _a, _b, _c, _d;
+      console.log(e);
+      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(() => {
+      this.modal.stopLoading();
+    }));
   }
   /**
    * Hide the component
@@ -93,7 +101,7 @@ export class SallaLocalizationModal {
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (h("salla-modal", { isLoading: this.isLoading, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" },
+    return (h("salla-modal", { isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" },
       h("div", { slot: 'loading' },
         h("div", { class: "s-localization-modal-skeleton" },
           h("salla-skeleton", { width: '25%', height: '15px' }),
@@ -109,12 +117,14 @@ export class SallaLocalizationModal {
               h("salla-skeleton", { height: '10px', width: '100px' })),
             h("salla-skeleton", { height: '15px', width: '20px' })))),
           h("salla-skeleton", { height: '40px', width: '100%' }))),
-      !this.isLoading ?
+      !!this.hasError ?
+        h("salla-placeholder", { alignment: "center" },
+          h("span", { slot: "description" }, this.errorMessage)) :
         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" }, salla.lang.get('common.titles.language')),
-              h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
+              h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 || this.currencies.length == 1 ?
                 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
@@ -126,7 +136,7 @@ export class SallaLocalizationModal {
           this.currencies.length > 1 ?
             h("div", { class: "s-localization-modal-section" },
               h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.currency')),
-              h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
+              h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 || this.languages.length == 1 ?
                 this.currencies.map(currency => h("div", { class: "s-localization-modal-item" },
                   h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }),
                   h("div", { class: "s-localization-modal-label-slot", id: "currency-slot", innerHTML: this.currencySlot
@@ -135,8 +145,7 @@ export class SallaLocalizationModal {
                       .replace(/\{country_code\}/g, currency.country_code) }))) :
                 h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
             : '',
-          h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
-        : ''));
+          h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))));
   }
   /**
    * to reduce dom levels we will move slot data into the parent dom
@@ -194,19 +203,20 @@ export class SallaLocalizationModal {
     "translationLoaded": {},
     "languages": {},
     "currencies": {},
-    "isLoading": {}
+    "hasError": {},
+    "errorMessage": {}
   }; }
   static get methods() { return {
     "open": {
       "complexType": {
-        "signature": "() => Promise<boolean>",
+        "signature": "() => Promise<any>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
           }
         },
-        "return": "Promise<boolean>"
+        "return": "Promise<any>"
       },
       "docs": {
         "text": "open the component",

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

@@ -33,6 +33,7 @@ export class SallaLoginModal {
      * Does the merchant require registration with email & mobile
      */
     this.isEmailRequired = false;
+    this.currentTabName = 'home';
     this.regType = 'phone';
     this.translationLoaded = false;
     this.typing = (e, submitMethod) => {
@@ -41,15 +42,18 @@ export class SallaLoginModal {
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-modal-error-message')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
-    this.loginBySMS = async () => {
+    this.loginBySMS = async (event = null) => {
+      event === null || event === void 0 ? void 0 : event.preventDefault();
       const { phone, countryCode } = await this.loginTelInput.getValues();
       const isPhoneValid = await this.loginTelInput.isValid();
       if (!isPhoneValid) {
         return;
       }
       this.login(this.smsBtn, { type: 'mobile', phone: phone, country_code: countryCode });
+      return false;
     };
-    this.loginByEmail = () => {
+    this.loginByEmail = (event = null) => {
+      event === null || event === void 0 ? void 0 : event.preventDefault();
       if (!Helper.isValidEmail(this.loginEmail.value)) {
         this.validateField(this.loginEmail, this.emailErrorMsg);
         return;
@@ -151,24 +155,18 @@ export class SallaLoginModal {
     return this.modal.open();
   }
   showTab(tab, evt) {
-    var _a, _b;
+    var _a;
     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-    let tabs = [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab];
-    tabs.map(el => Helper.toggleElementClassIf(el, 'visible', 's-hidden', () => el == tab));
-    setTimeout(() => tabs.map(el => Helper.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
-    //we should have only one salla-login, so it's okay to get it from document
-    //todo:: use better way for resize the modal
-    setTimeout(() => { var _a; return (_a = this.modal.querySelector('.s-login-modal-wrapper')) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
+    this.currentTabName = tab.getAttribute('data-name');
+    // todo:: use better way for resize the modal
+    // setTimeout(() => this.modal.querySelector('.s-login-modal-wrapper')?.setAttribute('style', 'height:' + tab?.scrollHeight + 'px'));
     if ([this.mobileTab, this.emailTab].includes(tab)) {
       this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
-    let isRegistrationTab = tab == this.registrationTab;
-    (_a = tab.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus(); // focus the first input in tab
-    (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
-    if (!isRegistrationTab) {
-      Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')
-        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-show', () => this.regType === 'email');
-    }
+    // this.loginTelInput.focus();
+    // tab.querySelector('input')?.focus();
+    //   setTimeout(() =>this.loginTelInput.focus(), 100);
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.currentTabName === 'registration' ? salla.lang.get('common.titles.registration') : this.title);
     return this;
   }
   login(btn, data) {
@@ -193,12 +191,29 @@ export class SallaLoginModal {
     field.classList.add('s-has-error');
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
+  generateTabClasses(tabName) {
+    return {
+      's-login-modal-tab': tabName !== 'registration' && tabName !== 'otp',
+      "s-hidden": this.currentTabName !== tabName,
+      "s-show": this.currentTabName === tabName,
+      's-login-modal-unactive': tabName !== 'registration' && tabName !== 'otp' && this.currentTabName !== tabName,
+      's-login-modal-active': tabName !== 'registration' && tabName !== 'otp' && this.currentTabName === tabName
+    };
+  }
+  generateRegClasses(regType) {
+    return {
+      "mb-1.5": true,
+      "s-hidden": this.regType !== regType
+    };
+  }
   render() {
+    // @ts-ignore
+    // @ts-ignore
     return (h("salla-modal", { class: "s-login-modal", "modal-title": this.title, ref: modal => this.modal = modal, width: "xs" },
       h("span", { slot: 'icon', class: "s-login-modal-header-icon", innerHTML: UserIcon }),
       h("div", { class: "s-login-modal-wrapper" },
         this.isEmailAllowed && this.isMobileAllowed ?
-          h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab },
+          h("div", { class: this.generateTabClasses('home'), "data-name": "home", ref: tab => this.homeTab = tab },
             h("p", { class: "s-login-modal-sub-title" }, salla.lang.get('blocks.header.select_login_way')),
             h("slot", { name: "before-login-type" }),
             h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) },
@@ -212,28 +227,30 @@ export class SallaLoginModal {
             h("slot", { name: "after-login-type" }))
           : '',
         this.isMobileAllowed ?
-          h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab },
+          h("div", { class: this.generateTabClasses('login-phone'), "data-name": "login-phone", ref: tab => this.mobileTab = tab },
             h("slot", { name: "before-login-mobile" }),
-            h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')),
-            h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }),
-            h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')),
+            h("form", { onSubmit: () => this.loginBySMS(event), method: "POST" },
+              h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')),
+              h("salla-tel-input", { tabindex: "0", ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }),
+              h("salla-button", { type: "submit", "loader-position": 'center', width: "wide", ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter'))),
             this.isEmailAllowed ?
               h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_email')) : '',
             h("slot", { name: "after-login-mobile" })) : '',
         this.isEmailAllowed ?
-          h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab },
+          h("div", { class: this.generateTabClasses('login-email'), "data-name": "login-email", ref: tab => this.emailTab = tab },
             h("slot", { name: "before-login-email" }),
             h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')),
-            h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }),
-            h("span", { class: "s-login-modal-error-message" }),
-            h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')),
+            h("form", { onSubmit: () => this.loginByEmail(event), method: "POST" },
+              h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", enterkeyhint: "next", class: "s-login-modal-input s-ltr" }),
+              h("span", { class: "s-login-modal-error-message" }),
+              h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter'))),
             this.isMobileAllowed ?
               h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_sms'))
               : '',
             h("slot", { name: "after-login-email" })) : '',
-        h("salla-verify", { display: "inline", ref: tab => this.verifyTab = tab, autoReload: false },
+        h("salla-verify", { display: "inline", class: this.generateTabClasses('otp'), "data-name": "otp", ref: tab => this.verifyTab = tab, autoReload: false },
           h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: ArrowRightIcon, slot: "after-footer", href: "#" })),
-        h("div", { ref: tab => this.registrationTab = tab },
+        h("div", { "data-name": "registration", class: this.generateTabClasses('registration'), ref: tab => this.registrationTab = tab },
           h("slot", { name: "before-registration" }),
           h("div", null,
             h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')),
@@ -243,10 +260,10 @@ export class SallaLoginModal {
             h("label", { class: "s-login-modal-label" }, salla.lang.get('pages.profile.last_name')),
             h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }),
             h("span", { class: "s-login-modal-error-message" })),
-          h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" },
+          h("div", { class: this.generateRegClasses('phone') },
             h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')),
             h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })),
-          h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" },
+          h("div", { class: this.generateRegClasses('email') },
             h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')),
             h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }),
             h("span", { class: "s-login-modal-error-message" })),
@@ -317,6 +334,8 @@ export class SallaLoginModal {
     }
   }; }
   static get states() { return {
+    "currentTabName": {},
+    "regType": {},
     "translationLoaded": {},
     "title": {},
     "emailErrorMsg": {},

package/dist/collection/components/salla-loyalty/salla-loyalty-prize-item.css

@@ -0,0 +1,3 @@
+salla-loyalty-prize-item:hover {
+  box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.04) !important;
+}

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

@@ -0,0 +1,69 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, h, Prop, Host, Event } from '@stencil/core';
+export class SallaLoyaltyPrizeItem {
+  onPrizeItemClick() {
+    this.prizeItemSelected.emit(this.item);
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { onClick: this.onPrizeItemClick.bind(this) },
+        h("img", { class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }),
+        h("div", { class: "s-loyalty-prize-item-title" }, this.item.name),
+        h("div", { class: "s-loyalty-prize-item-subtitle" }, this.item.description),
+        h("div", { class: "s-loyalty-prize-item-points" },
+          this.item.cost_points,
+          " Points"))));
+  }
+  static get is() { return "salla-loyalty-prize-item"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-loyalty-prize-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-loyalty-prize-item.css"]
+  }; }
+  static get properties() { return {
+    "item": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Item",
+        "resolved": "Item",
+        "references": {
+          "Item": {
+            "location": "import",
+            "path": "./loyalty-schema"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "prizeItemSelected",
+      "name": "prizeItemSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Item",
+        "resolved": "Item",
+        "references": {
+          "Item": {
+            "location": "import",
+            "path": "./loyalty-schema"
+          }
+        }
+      }
+    }]; }
+}

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

@@ -1,4 +0,0 @@
-#salla-loyalty-modal .s-swiper-button-prev button,
-#salla-loyalty-modal .s-swiper-button-next button {
-  box-shadow: #32325d40 0px 6px 12px -2px, #0000004d 0px 3px 7px -3px;
-}

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

@@ -13,6 +13,7 @@ export class SallaLoyalty {
     this.selectedItem = undefined;
     this.askConfirmation = false;
     this.is_loggedin = false;
+    this.hasError = false;
     /**
      * The exchanged prize point
      */
@@ -46,7 +47,8 @@ export class SallaLoyalty {
     });
   }
   setSelectedPrizeItem(item) {
-    if (!this.selectedItem || this.selectedItem.id != item.id) {
+    var _a;
+    if (!this.selectedItem || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id) != item.id) {
       this.selectedItem = item;
     }
     else {
@@ -60,8 +62,9 @@ export class SallaLoyalty {
     return text;
   }
   prizeItem(item) {
+    var _a;
     let klass = {
-      's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem.id == item.id,
+      's-loyalty-prize-item-selected': !!this.selectedItem && ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id) == item.id,
       "s-loyalty-prize-item": true
     };
     return h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass },
@@ -100,7 +103,9 @@ export class SallaLoyalty {
         h("div", { slot: "title", class: "s-loyalty-after-exchange-title" },
           this.prizeTitle,
           " \u00A0 - \u00A0 ",
-          this.prizePoints),
+          this.prizePoints,
+          " ",
+          salla.lang.get('pages.loyalty_program.point')),
         h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" },
           h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() },
             h("span", { innerHTML: CancelIcon })))));
@@ -109,17 +114,18 @@ export class SallaLoyalty {
    * Show loyalty modal
    */
   async open() {
+    var _a;
     if (!this.is_loggedin)
       return salla.event.dispatch('login::open');
-    this.modal.open();
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.open();
     return await salla.loyalty.getProgram()
-      .then((response) => {
-      this.loyaltyProgram = response.data;
+      .then(response => this.loyaltyProgram = response.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);
     })
-      .catch(e => console.log(e))
-      .finally(() => {
-      this.modal.stopLoading();
-    });
+      .finally(() => { var _a; return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.stopLoading(); });
   }
   /**
    *
@@ -134,7 +140,9 @@ export class SallaLoyalty {
    */
   async resetExchange() {
     return await salla.loyalty.reset()
-      .then(() => {
+      .then((response) => {
+      var _a;
+      this.customerPoints = this.customerPoints || ((_a = response.data) === null || _a === void 0 ? void 0 : _a.customer_points);
       this.prizePoints = undefined;
       this.prizeTitle = undefined;
     }).catch(e => console.log(e));
@@ -144,7 +152,7 @@ export class SallaLoyalty {
    */
   async openConfirmation() {
     return await this.modal.close()
-      .then(() => this.confirmationModal.open())
+      .then(() => { var _a; return (_a = this.confirmationModal) === null || _a === void 0 ? void 0 : _a.open(); })
       .catch(e => console.log(e));
   }
   /**
@@ -161,10 +169,13 @@ export class SallaLoyalty {
    *
    */
   async exchangeLoyaltyPoint() {
+    var _a;
     this.buttonLoading = true;
-    return await salla.loyalty.exchange(this.selectedItem.id)
+    return await salla.loyalty.exchange((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id)
       .then((response) => {
-      this.loyaltyProgram = response.data;
+      var _a, _b;
+      this.prizePoints = (_a = response === null || response === void 0 ? void 0 : response.prize) === null || _a === void 0 ? void 0 : _a.points;
+      this.prizeTitle = (_b = response === null || response === void 0 ? void 0 : response.prize) === null || _b === void 0 ? void 0 : _b.title;
     })
       .catch(e => console.log(e))
       .finally(() => {
@@ -208,7 +219,7 @@ export class SallaLoyalty {
                 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 ?
+        !this.hasError && !!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 }),
@@ -221,7 +232,7 @@ export class SallaLoyalty {
                 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() }, salla.lang.get('pages.loyalty_program.exchange_points')),
           ]
-          : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
+          : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : '')),
     ];
   }
   componentDidLoad() {
@@ -367,6 +378,8 @@ export class SallaLoyalty {
     "selectedItem": {},
     "askConfirmation": {},
     "is_loggedin": {},
+    "hasError": {},
+    "errorMessage": {},
     "translationLoaded": {}
   }; }
   static get methods() { return {

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

@@ -1,4 +1,9 @@
 /*
 * Salla Modal Component: popup modal used in most parts of the theme
 * You can use these classes to target the elements in the component.
-*/
+*/
+@media screen and (max-width: 470px) {
+  .modal-is-open {
+    position: fixed;
+  }
+}

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

@@ -7,6 +7,7 @@ import SpecialDiscountIcon from '../../assets/svg/special-discount.svg';
 import KeyboardArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
 import KeyboardArrowLeftIcon from "../../assets/svg/keyboard_arrow_left.svg";
 import Tag from "../../assets/svg/tag.svg";
+import Cart2 from '../../assets/svg/cart2.svg';
 /**
  * @slot header - The top of the popup, has replaceable props `{name}`, `{message}`.
  * @slot product - Replaces product card, has replaceable props `{name}`, `{url}`, `{image}`, `{price}`.
@@ -16,8 +17,10 @@ export class SallaOfferModal {
   constructor() {
     var _a, _b;
     this.offer = null;
+    this.hasError = false;
     this.translationLoaded = false;
     Helper.setHost(this.host);
+    salla.event.on('offer-modal::open', (product_id) => this.open(product_id));
     salla.lang.onLoaded(() => {
       this.translationLoaded = true;
     });
@@ -37,8 +40,15 @@ export class SallaOfferModal {
    */
   async open(product_id) {
     //TODO:: make sure there is only one offer
-    return salla.product.offers(product_id)
-      .then(response => this.showOffer(response.data[0]));
+    this.modal.open();
+    return salla.api.withoutNotifier(salla.product.offers(product_id))
+      .then(response => this.showOffer(response.data[0]))
+      .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(() => setTimeout(() => { this.modal.stopLoading(); }, 1000));
   }
   /**
    * Show offer details
@@ -49,7 +59,6 @@ export class SallaOfferModal {
     this.offer_name = offer.name;
     this.offer_message = offer.message;
     this.modal.setTitle(this.offer_name);
-    return this.modal.open();
   }
   rememberMe(event) {
     salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
@@ -71,10 +80,25 @@ export class SallaOfferModal {
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { "sub-title-first": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null },
-      h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }),
-      this.offer !== null
-        ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" },
+    return h("salla-modal", { "sub-title-first": true, "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true },
+      h("div", { slot: 'loading' },
+        h("div", { class: "s-offer-modal-skeleton" },
+          h("div", { class: "s-offer-modal-skeleton-header" },
+            h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }),
+            h("salla-skeleton", { height: '15px', width: '50%' }),
+            h("salla-skeleton", { height: '10px', width: '30%' })),
+          h("div", { class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" },
+            h("salla-skeleton", { height: '9rem' }),
+            h("div", { class: "s-offer-modal-skeleton-item-title" },
+              h("salla-skeleton", { height: '15px', width: '100%' })),
+            h("div", { class: "s-offer-modal-skeleton-item-subtitle" },
+              h("salla-skeleton", { height: '9px', width: '50%' }),
+              h("div", { innerHTML: Cart2 }))))),
+          h("div", { class: "s-offer-modal-skeleton-footer" },
+            h("salla-skeleton", { height: '15px', width: '50%' }),
+            h("salla-skeleton", { height: '15px', width: '30%' })))),
+      !this.hasError && this.offer !== null
+        ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), 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
                   .replace(/\{tagIcon\}/g, Tag)
@@ -104,7 +128,8 @@ export class SallaOfferModal {
               h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }),
               "\u00A0 ",
               salla.lang.get('common.elements.remember_my_choice'))),
-        ] : '');
+        ] :
+        h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : ''));
   }
   componentDidRender() {
     // Sooo mini Slider
@@ -162,6 +187,8 @@ export class SallaOfferModal {
     "offer": {},
     "offer_name": {},
     "offer_message": {},
+    "hasError": {},
+    "errorMessage": {},
     "translationLoaded": {}
   }; }
   static get methods() { return {
@@ -192,7 +219,7 @@ export class SallaOfferModal {
     },
     "showOffer": {
       "complexType": {
-        "signature": "(offer: any) => Promise<HTMLElement>",
+        "signature": "(offer: any) => Promise<void>",
         "parameters": [{
             "tags": [{
                 "name": "param",
@@ -203,12 +230,9 @@ export class SallaOfferModal {
         "references": {
           "Promise": {
             "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
           }
         },
-        "return": "Promise<HTMLElement>"
+        "return": "Promise<void>"
       },
       "docs": {
         "text": "Show offer details",