@salla.sa/twilight-components 1.6.15-alpha.0 → 1.6.15-alpha.1

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

@@ -0,0 +1,247 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, h, Element, Method, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+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}`.
+ * @slot category - Replaces Category badge, has replaceable props `{name}`, `{url}`.
+ */
+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;
+    });
+    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><span class="s-offer-modal-badge-text">{name}</span>`;
+    this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
+    salla.product.event.onOfferExisted(offer => {
+      if (salla.storage.get('remember-offer-' + offer.id)) {
+        salla.log('User selected to don\'t show this offer again.');
+        return;
+      }
+      this.open(offer.product_id);
+    });
+  }
+  /**
+   * Show the available offers for the product
+   * @param product_id
+   */
+  async open(product_id) {
+    //TODO:: make sure there is only one offer
+    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
+   * @param {Offer} offer
+   */
+  async showOffer(offer) {
+    this.offer = offer;
+    this.offer_name = offer.name;
+    this.offer_message = offer.message;
+    this.modal.setTitle(this.offer_name);
+  }
+  rememberMe(event) {
+    salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
+  }
+  //todo:: pass event then use sallaButton from it
+  addItem() {
+    // this here, is sallaButton
+    this['load']();
+    return salla.cart.api
+      .quickAdd(this['dataset'].id)
+      .finally(() => this['stop']());
+  }
+  defaultProductSlot() {
+    return '<a href={url} class="s-offer-modal-product-image-wrap"><img class="s-offer-modal-product-image" src="{image}" /></a>' +
+      '<div class="s-offer-modal-product-info">' +
+      '   <a href={url} class="s-offer-modal-product-name">{name}</a>' +
+      '   <div class="s-offer-modal-product-price">{price}</div>' +
+      '</div>';
+  }
+  render() {
+    var _a, _b;
+    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)
+                  .replace(/\{name\}/g, category.name)
+                  .replace(/\{url\}/g, category.urls.customer) }))
+              : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: { "s-offer-modal-product": true, "s-offer-modal-slider-item": true, "s-offer-modal-not-available": !product.is_available }, id: 'product_' + product.id, innerHTML: this.productSlot
+                  .replace(/\{name\}/g, product.name)
+                  .replace(/\{url\}/g, product.url)
+                  .replace(/\{image\}/g, product.thumbnail)
+                  .replace(/\{price\}/g, product.has_special_price
+                  ? salla.money(product.price) + '<span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
+                  : salla.money(product.price)) },
+                h("div", { class: "s-offer-modal-btn-wrap" },
+                  h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.out_of_stock')))))),
+            h("div", { class: "s-offer-modal-slider-nav" },
+              h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" },
+                h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowLeftIcon })),
+              h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" },
+                h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowRightIcon })))), h("div", { class: "s-offer-modal-footer", slot: "footer" },
+            this.offer.formatted_date ?
+              h("p", { class: "s-offer-modal-expiry" },
+                salla.lang.get('pages.products.offer_expires_in'),
+                " ",
+                this.offer.formatted_date)
+              : '',
+            h("label", { class: "s-offer-modal-remember-label" },
+              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
+    if (this.offer && window.screen.width > 639) {
+      let sliderWrap = this.modal.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.modal.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.modal.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.modal.querySelector('.s-offer-modal-next-btn'), prevBtn = this.modal.querySelector('.s-offer-modal-prev-btn'), items = this.modal.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      current = 0, // current slide
+      slidesToScroll = 3, itemsLength = items.length;
+      console.log('items[0]:', items[0]);
+      let itemSize = items[0].offsetWidth, sliderSize = itemsLength * itemSize, sliderWrapperSize = sliderWrap.offsetWidth, sliderInvisibleSize = sliderSize - sliderWrapperSize, isRTL = document.body.classList.contains('rtl') ? true : false;
+      if (sliderInvisibleSize > sliderNavMargin)
+        nexBtn.classList.add('s-offer-modal-btn-is-active');
+      window.onresize = function () {
+        sliderWrapperSize = sliderWrap.offsetWidth;
+        sliderInvisibleSize = sliderSize - sliderWrapperSize;
+      };
+      slider.addEventListener('scroll', function () {
+        let sliderPosition = Math.abs(slider.scrollLeft);
+        let sliderEndOffset = sliderInvisibleSize - sliderNavMargin;
+        // show & hide the navigation btns depending on scroll position
+        if (sliderPosition <= sliderNavMargin) {
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.remove('s-offer-modal-btn-is-active');
+        }
+        else if (sliderPosition < sliderEndOffset) {
+          // show both btns in the middle
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
+        }
+        else if (sliderPosition >= sliderEndOffset) {
+          nexBtn.classList.remove('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
+        }
+      });
+      // Navigation
+      navButtons.forEach(btn => {
+        btn.addEventListener('click', function () {
+          btn.classList.contains('s-offer-modal-next-btn') ? current++ : current--;
+          slider.scrollTo({
+            top: 0,
+            left: itemSize * slidesToScroll * current * (isRTL ? -1 : 1),
+            behavior: 'smooth'
+          });
+        });
+      });
+    }
+  }
+  static get is() { return "salla-offer-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-offer-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-offer-modal.css"]
+  }; }
+  static get states() { return {
+    "offer": {},
+    "offer_name": {},
+    "offer_message": {},
+    "hasError": {},
+    "errorMessage": {},
+    "translationLoaded": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "(product_id: number) => Promise<any>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "product_id"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Show the available offers for the product",
+        "tags": [{
+            "name": "param",
+            "text": "product_id"
+          }]
+      }
+    },
+    "showOffer": {
+      "complexType": {
+        "signature": "(offer: any) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "offer"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Show offer details",
+        "tags": [{
+            "name": "param",
+            "text": "offer"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,109 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, State, h, Host } from '@stencil/core';
+import Inbox from '../../assets/svg/inbox.svg';
+export class SallaPlaceholder {
+  constructor() {
+    this.translationLoaded = false;
+    /**
+     * Custom icon to display, defaults to [`sicon-inbox`]
+     */
+    this.icon = Inbox;
+    /**
+     * Defines the alignment of contents. Defaults to [`left`]
+     */
+    this.alignment = 'left';
+    /**
+      * The size of the icon. Defaults to [`md`]
+      */
+    this.iconSize = 'md';
+    salla.lang.onLoaded(() => {
+      this.translationLoaded = true;
+    });
+  }
+  alignmentClass() {
+    return {
+      's-placeholder-wrapper': true,
+      's-placeholder-align-left': this.alignment == 'left',
+      's-placeholder-align-center': this.alignment == 'center',
+      's-placeholder-align-right': this.alignment == 'right',
+    };
+  }
+  render() {
+    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' },
+          h("span", null, salla.lang.get('common.elements.no_options')))),
+      h("div", { class: "s-placeholder-description" },
+        h("slot", { name: 'description' },
+          h("span", null, salla.lang.get('common.errors.empty_results'))))));
+  }
+  static get is() { return "salla-placeholder"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-placeholder.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-placeholder.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Custom icon to display, defaults to [`sicon-inbox`]"
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "Inbox"
+    },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'center' | 'right'",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the alignment of contents. Defaults to [`left`]"
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "'left'"
+    },
+    "iconSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the icon. Defaults to [`md`]"
+      },
+      "attribute": "icon-size",
+      "reflect": false,
+      "defaultValue": "'md'"
+    }
+  }; }
+  static get states() { return {
+    "translationLoaded": {}
+  }; }
+}

package/dist/collection/components/salla-product-availability/salla-product-availability.css

@@ -0,0 +1,5 @@
+/*
+* Salla Product Availability Component: popup modal to notify user if the product is available,
+* used in the product single page if the product isn't available.
+* You can use these classes to target the elements in the component.
+*/

package/dist/collection/components/salla-product-availability/salla-product-availability.js

@@ -0,0 +1,191 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import Helper from '../../Helpers/Helper';
+import BellRingIcon from '../../assets/svg/bell-ring.svg';
+export class SallaProductAvailability {
+  constructor() {
+    this.isUser = Helper.isUser();
+    this.translationLoaded = false;
+    /**
+     * product id that can visitor subscribe to its availability notification
+     */
+    this.productId = salla.config.get('page.id');
+    /**
+     * is current user already subscribed
+     */
+    this.isSubscribed = false;
+    // @Method()
+    this.submit = async () => {
+      if (this.isUser) {
+        return salla.api.product.availabilitySubscribe(this.productId)
+          .then(() => this.isSubscribed = true);
+      }
+      let data = { id: this.productId };
+      if (this.channels_.includes('sms')) {
+        let { phone, countryCode } = await this.mobileInput.getValues();
+        data['country_code'] = countryCode;
+        data['phone'] = phone;
+      }
+      if (this.channels_.includes('email')) {
+        this.email.value !== '' && (data['email'] = this.email.value);
+      }
+      await this.validateform();
+      return this.btn.load()
+        .then(() => this.btn.disable())
+        .then(() => salla.api.product.availabilitySubscribe(data))
+        .then(() => {
+        this.isSubscribed = true;
+        salla.storage.set(`product-${this.productId}-subscribed`, true);
+      }) //no need to wait until finishing alert animation
+        .then(() => this.btn.stop())
+        .then(() => this.modal.close())
+        .catch(() => this.btn.stop() && this.btn.enable());
+    };
+    // helpers
+    this.typing = (e, submitMethod) => {
+      const error = e.target.nextElementSibling;
+      e.target.classList.remove('s-has-error');
+      (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
+      e.key == 'Enter' && submitMethod();
+    };
+    salla.lang.onLoaded(() => {
+      var _a;
+      this.translationLoaded = true;
+      this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title_);
+    });
+    if (this.isUser)
+      return;
+    this.channelsWatcher(this.channels);
+    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+    this.host.removeAttribute('title');
+    this.isVisitorSubscribed = salla.storage.get(`product-${this.productId}-subscribed`);
+  }
+  channelsWatcher(newValue) {
+    this.channels_ = !!newValue ? newValue.split(',') : [];
+  }
+  async validateform() {
+    try {
+      if (this.channels_.includes('email')) {
+        const isEmailValid = Helper.isValidEmail(this.email.value);
+        if (isEmailValid)
+          return;
+        !isEmailValid && this.validateField(this.email, salla.lang.get('common.elements.email_is_valid'));
+      }
+      if (this.channels_.includes('sms')) {
+        const isPhoneValid = await this.mobileInput.isValid();
+        if (isPhoneValid)
+          return;
+      }
+    }
+    catch (error) {
+      throw ('Please insert required fields');
+    }
+  }
+  validateField(field, errorMsg) {
+    field.classList.add('s-has-error');
+    field.nextElementSibling['innerText'] = '* ' + errorMsg;
+  }
+  render() {
+    return (h(Host, { class: "s-product-availability-wrap" },
+      this.isSubscribed || this.isVisitorSubscribed
+        ? h("div", { class: "s-product-availability-subscribed" },
+          h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }),
+          " ",
+          salla.lang.get('pages.products.notify_availability_success'))
+        :
+          h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.modal.open() }, salla.lang.get('pages.products.notify_availability')),
+      this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
+  }
+  renderModal() {
+    return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" },
+      h("span", { slot: 'icon', innerHTML: BellRingIcon }),
+      h("div", { class: "s-product-availability-body" },
+        this.channels_.includes('email') ? [
+          h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
+          h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
+          h("span", { class: "s-product-availability-error-msg" })
+        ] : '',
+        this.channels_.includes('sms') ? [
+          h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
+          h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+        ] : ''),
+      h("div", { slot: "footer", class: "s-product-availability-footer" },
+        h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')),
+        h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
+  }
+  static get is() { return "salla-product-availability"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-product-availability.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-product-availability.css"]
+  }; }
+  static get properties() { return {
+    "channels": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sms' | 'mobile' | 'sms,mobile'",
+        "resolved": "\"mobile\" | \"sms\" | \"sms,mobile\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Notification channels"
+      },
+      "attribute": "channels",
+      "reflect": false
+    },
+    "productId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "product id that can visitor subscribe to its availability notification"
+      },
+      "attribute": "product-id",
+      "reflect": false,
+      "defaultValue": "salla.config.get('page.id')"
+    },
+    "isSubscribed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "is current user already subscribed"
+      },
+      "attribute": "is-subscribed",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "translationLoaded": {},
+    "title_": {},
+    "isVisitorSubscribed": {}
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "channels",
+      "methodName": "channelsWatcher"
+    }]; }
+}

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

@@ -0,0 +1,4 @@
+/*
+* Salla Product Size Guide Component: has many sizes, styles and loading state.
+* You can use these classes to target the elements in the component.
+*/