@salla.sa/twilight-components 1.4.8 → 1.4.10

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

@@ -0,0 +1,273 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, h, Host, Method, Prop, State } from "@stencil/core";
+import StoreAlt from '../../assets/svg/store-alt.svg';
+import Search from '../../assets/svg/search.svg';
+import { ModeType } from './interfaces';
+export class SallaScopees {
+  constructor() {
+    this.mode = ModeType.DEFAULT;
+    this.scopes = [];
+    this.originalScopesList = [];
+    this.isOpenedBefore = salla.storage.get("branch-choosed-before");
+    /**
+     * Optionally open the modal or enforce the pop-up to the viewer
+     */
+    this.selection = 'optional';
+    /**
+     * Dictates when to show the search field
+     */
+    this.searchDisplayLimit = 6;
+    this.getFormTitle = () => {
+      var _a;
+      if (((_a = this.originalScopesList) === null || _a === void 0 ? void 0 : _a.length) < 2)
+        return "";
+      return this.mode === ModeType.DEFAULT ?
+        this.shoppingFromAnotherBranch :
+        this.searchForAvailabilityInOtherBranch;
+    };
+    salla.event.on('scopes::open', ({ mode = null, product_id = null }) => {
+      this.open(mode, product_id);
+    });
+    salla.lang.onLoaded(() => {
+      this.branchNotFound = salla.lang.get("blocks.scope.branch_looking_for_not_found");
+      this.ourServiceIsNotFound = salla.lang.get("blocks.scope.our_services_not_available_in_this_branch");
+      this.searchForAvailabilityInOtherBranch = salla.lang.get('blocks.scope.search_for_availability_in_other_branches');
+      this.shoppingFromAnotherBranch = salla.lang.get("blocks.scope.shopping_from_another_branch");
+      this.nowBrowsingFrom = salla.lang.get('blocks.scope.you_are_browse_store_from');
+      this.confirmButton = salla.lang.get('common.elements.confirm');
+      this.scopeSearchPlaceholder = salla.lang.get('blocks.scope.searching_for_a_branch');
+    });
+  }
+  async close() {
+    var _a;
+    return await ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.close());
+  }
+  async open(mode = ModeType.DEFAULT, product_id = null) {
+    this.setScopeValues([]);
+    if (typeof mode !== 'undefined' && [ModeType.AVAILABILITY, ModeType.DEFAULT].includes(mode)) {
+      this.mode = mode;
+    }
+    else {
+      this.mode = ModeType.DEFAULT;
+    }
+    this.modal.loading();
+    this.modal.open();
+    return await (mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get())
+      .then((resp) => {
+      if (mode == ModeType.AVAILABILITY) {
+        this.setScopeValues(resp.data);
+      }
+      else {
+        this.setScopeValues(resp.data.scopes);
+      }
+    }).catch(e => console.log(e))
+      .finally(() => {
+      this.modal.stopLoading();
+    });
+  }
+  async handleSubmit() {
+    let payload = { 'scope_id': this.current_scope.id };
+    this.changeBtn.load();
+    return await salla.scope.change(payload)
+      .then(() => {
+      salla.storage.set("branch-choosed-before", true);
+      window.location.reload();
+    }).catch(e => console.log(e))
+      .finally(() => {
+      this.changeBtn.stop();
+    });
+  }
+  setScopeValues(value) {
+    this.scopes = value;
+    this.originalScopesList = value;
+    if (value.length == 1) {
+      this.current_scope = value[0];
+      this.selected_scope = value[0];
+    }
+    else {
+      this.current_scope = value.find(scope => scope.selected);
+      this.selected_scope = value.find(scope => scope.selected);
+    }
+  }
+  handleSearchFieldTyping(e) {
+    let value = e.target.value.toLocaleLowerCase();
+    if (!!value) {
+      this.scopes = this.originalScopesList.filter(scope => scope.name.toLowerCase().includes(value));
+    }
+    else {
+      this.scopes = this.originalScopesList;
+    }
+  }
+  handleScopeSelection(event) {
+    this.current_scope = this.scopes.find(scope => scope.id == event.target.value);
+  }
+  placeholderContent() {
+    return h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" },
+      h("span", { slot: "title" }, this.branchNotFound),
+      h("span", { slot: "description" }, this.ourServiceIsNotFound));
+  }
+  defaultContent() {
+    return [h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection },
+        h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }),
+        h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" },
+          h("span", null, scope.name))))), this.footerContent()];
+  }
+  availabilityContent() {
+    return h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => {
+      var _a, _b, _c, _d, _e, _f;
+      return h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection },
+        h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.mode === ModeType.DEFAULT } },
+          h("span", null, scope.name)),
+        h("h2", { style: { 'color': (_b = (_a = scope) === null || _a === void 0 ? void 0 : _a.availability) === null || _b === void 0 ? void 0 : _b.color }, class: `s-scopes-${(_d = (_c = scope) === null || _c === void 0 ? void 0 : _c.availability) === null || _d === void 0 ? void 0 : _d.key}` }, (_f = (_e = scope) === null || _e === void 0 ? void 0 : _e.availability) === null || _f === void 0 ? void 0 : _f.label));
+    }));
+  }
+  footerContent() {
+    return h("div", { class: "s-scopes-footer" },
+      h("slot", { name: "footer" },
+        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 (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-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),
+          h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")),
+        h("div", { class: "s-scopes-wrap" },
+          !!this.originalScopesList.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()),
+          this.originalScopesList.length > this.searchDisplayLimit ?
+            h("div", { class: "s-scopes-search-wrapper" },
+              h("div", { class: "s-scopes-search-icon", innerHTML: Search }),
+              h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: this.scopeSearchPlaceholder }))
+            : "",
+          this.scopes.length < 2 ?
+            this.placeholderContent()
+            : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent()))));
+  }
+  componentDidLoad() {
+    if (!this.isOpenedBefore && this.selection == 'mandatory') {
+      this.open();
+    }
+  }
+  static get is() { return "salla-scopes"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-scopes.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-scopes.css"]
+  }; }
+  static get properties() { return {
+    "selection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'optional' | 'mandatory'",
+        "resolved": "\"mandatory\" | \"optional\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Optionally open the modal or enforce the pop-up to the viewer"
+      },
+      "attribute": "selection",
+      "reflect": false,
+      "defaultValue": "'optional'"
+    },
+    "searchDisplayLimit": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Dictates when to show the search field"
+      },
+      "attribute": "search-display-limit",
+      "reflect": false,
+      "defaultValue": "6"
+    }
+  }; }
+  static get states() { return {
+    "mode": {},
+    "current_scope": {},
+    "scopes": {},
+    "originalScopesList": {},
+    "branchNotFound": {},
+    "ourServiceIsNotFound": {},
+    "searchForAvailabilityInOtherBranch": {},
+    "shoppingFromAnotherBranch": {},
+    "nowBrowsingFrom": {},
+    "confirmButton": {},
+    "scopeSearchPlaceholder": {},
+    "selected_scope": {},
+    "isOpenedBefore": {}
+  }; }
+  static get methods() { return {
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "open": {
+      "complexType": {
+        "signature": "(mode?: any, product_id?: number) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "handleSubmit": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,4 @@
+/*
+* Salla Search Component: Site search modal.
+* You can use these classes to target the elements in the component.
+*/

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

@@ -0,0 +1,181 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, h, State, Element, Watch } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+/**
+ * @slot product - Replaces products card in the results, has replaceable props `{name}`, `{price}`, `{regular_price}`, `{image}`.
+ */
+export class SallaSearch {
+  constructor() {
+    var _a;
+    this.inputValue = '';
+    this.typing = false;
+    this.debounce = setTimeout(() => '', 1000);
+    this.inline = false;
+    this.oval = false;
+    this.height = 60;
+    Helper.setHost(this.host);
+    this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+    salla.event.on('search::open', () => this.open());
+    salla.lang.onLoaded(() => {
+      this.placeholder = salla.lang.get('blocks.header.search_placeholder');
+      this.noResultsText = salla.lang.get('common.elements.no_options');
+    });
+    salla.event.on('modalClosed', () => this.onModalClose());
+  }
+  async open() {
+    if (!this.inline) {
+      await this.modal.open().then(() => setTimeout(() => this.searchInput.focus(), 300));
+    }
+  }
+  onModalClose() {
+    this.searchInput.value = '';
+    this.results = undefined;
+    this.afterSearching();
+    this.container.classList.remove('s-search-no-results');
+  }
+  getDefaultProductSlot() {
+    return '<div class="s-search-product-image-container">' +
+      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+      '</div>' +
+      '<div class="s-search-product-details">' +
+      '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
+      '</div>';
+  }
+  debounceSearch(event) {
+    this.typing = true;
+    clearTimeout(this.debounce);
+    this.debounce = setTimeout(() => {
+      this.typing = false;
+      this.search_term = event.target.value;
+    }, 500);
+  }
+  handelSearch(val) {
+    this.inputValue = val;
+    if (val.length > 2) {
+      this.search(val);
+    }
+    else {
+      this.results = undefined;
+      this.afterSearching();
+    }
+  }
+  search(val) {
+    Helper.hideElement(this.noResults);
+    //run loading spinner or stop it
+    Helper.toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    salla.product.search(val)
+      .then(response => this.results = response)
+      .catch(err => err !== 'Query is same as previous one!' ? this.results = undefined : null)
+      .finally(() => this.afterSearching(/*isEmpty*/ false));
+  }
+  afterSearching(isEmpty = true) {
+    var _a;
+    this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
+    Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
+      .toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
+    salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
+    this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
+  }
+  render() {
+    var _a;
+    const searchContent = h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container },
+      h("input", { type: "text", autocomplete: "off", class: "s-search-input", placeholder: this.placeholder, onInput: e => this.debounceSearch(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }),
+      h("span", { class: "s-search-icon-wrap" },
+        h("i", { class: "s-search-icon sicon-search", ref: el => this.searchIcon = el })),
+      h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
+        _a.data.map(item => h("a", { href: item.url, class: { "s-search-product": true, 's-search-product-not-available': !item.is_available }, innerHTML: this.productSlot
+            .replace(/\{name\}/g, item.name)
+            .replace(/\{price\}/g, salla.money(item.price))
+            .replace(/\{regular_price\}/g, item.has_special_price ? salla.money(item.regular_price) : '')
+            .replace(/\{image\}/g, item.thumbnail) })),
+        h("p", { ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, this.noResultsText)));
+    return (this.inline ?
+      h("div", { class: "s-search-modal" }, searchContent)
+      :
+        h("salla-modal", { position: "top", class: "s-search-modal", ref: modal => this.modal = modal }, searchContent));
+  }
+  /**
+   * Run it one time after load
+   */
+  componentDidLoad() {
+    this.afterSearching();
+  }
+  static get is() { return "salla-search"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-search.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-search.css"]
+  }; }
+  static get properties() { return {
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "inline",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "oval": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "oval",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "height": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "60"
+    }
+  }; }
+  static get states() { return {
+    "results": {},
+    "placeholder": {},
+    "noResultsText": {},
+    "typing": {},
+    "debounce": {},
+    "search_term": {}
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "search_term",
+      "methodName": "handelSearch"
+    }]; }
+}

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

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

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

@@ -0,0 +1,11 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export var Socials;
+(function (Socials) {
+  Socials["FACEBOOK"] = "facebook";
+  Socials["TWITTER"] = "twitter";
+  Socials["WHATSAPP"] = "whatsapp";
+  Socials["EMAIL"] = "email";
+  Socials["COPY_LINK"] = "copy_link";
+})(Socials || (Socials = {}));

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

@@ -0,0 +1,185 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, h, State, Method } from '@stencil/core';
+import anime from 'animejs';
+import facebook from '../../assets/svg/facebook.svg';
+import twitter from '../../assets/svg/twitter.svg';
+import copy_link from '../../assets/svg/link.svg';
+import email from '../../assets/svg/mail.svg';
+import whatsapp from '../../assets/svg/whatsapp.svg';
+import { Socials } from './interfaces';
+export class SallaSocialShare {
+  constructor() {
+    this.opened = false;
+    this.allPlatforms = [Socials.WHATSAPP, Socials.FACEBOOK, Socials.TWITTER, Socials.EMAIL, Socials.COPY_LINK];
+    this.platformIcons = [{ icon: whatsapp, name: Socials.WHATSAPP }, { icon: facebook, name: Socials.FACEBOOK }, { icon: twitter, name: Socials.TWITTER }, { icon: email, name: Socials.EMAIL }, { icon: copy_link, name: Socials.COPY_LINK }];
+    /**
+     * page url that will be shared custom | current page url
+     */
+    this.url = "";
+    /**
+     * page url name that will be shared custom | current page url
+     */
+    this.urlName = "";
+    /**
+     * selected platforms to share | all platforms
+     */
+    this.platforms = this.allPlatforms;
+  }
+  componentWillLoad() {
+    let that = this;
+    if (!document.getElementById('a2a-script')) {
+      const script = document.createElement('script');
+      script.src = 'https://static.addtoany.com/menu/page.js';
+      script.setAttribute('id', 'a2a-script');
+      script.onload = function () {
+        // ? this will not work if there is one share component in the page
+        window.a2a_config = window.a2a_config || {};
+        window.a2a_config.linkurl = that.url ? that.url : window.location.href;
+        window.a2a_config.linkname = that.urlName ? that.urlName : document.title;
+      };
+      document.body.appendChild(script);
+    }
+    else {
+      return;
+    }
+    salla.lang.onLoaded(() => {
+      window.a2a_config.locale = salla.lang.locale;
+    });
+  }
+  async open() {
+    this.opened = !this.opened;
+    if (this.opened) {
+      this.shareMenu.classList.add('opened');
+    }
+    else {
+      this.shareMenu.classList.remove('opened');
+    }
+    new anime.timeline()
+      .add({
+      targets: this.shareMenu,
+      translateY: [-50, 0],
+      opacity: [0, 1],
+      duration: 300,
+      podding: '0',
+      easing: 'easeInOutSine'
+    })
+      .add({
+      targets: this.platformItem,
+      translateZ: 0,
+      translateY: [-30, 0],
+      scaleY: [0, 1],
+      opacity: [0, 1],
+      duration: 1200,
+      delay: anime.stagger(100)
+    }, '-=200');
+  }
+  render() {
+    return (h("div", { id: "s-social-share", 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" }))),
+      h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
+        return (h("li", { ref: el => this.platformItem = el },
+          h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
+            if (icon.name === platform) {
+              return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });
+            }
+          }))));
+      }))));
+  }
+  componentDidLoad() {
+    var script = document.createElement('script');
+    script.setAttribute('src', 'https://static.addtoany.com/menu/page.js');
+    document.head.appendChild(script);
+  }
+  static get is() { return "salla-social-share"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-social-share.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-social-share.css"]
+  }; }
+  static get properties() { return {
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "page url that will be shared custom | current page url"
+      },
+      "attribute": "url",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "urlName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "page url name that will be shared custom | current page url"
+      },
+      "attribute": "url-name",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "platforms": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<string>",
+        "resolved": "string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "selected platforms to share | all platforms"
+      },
+      "defaultValue": "this.allPlatforms"
+    }
+  }; }
+  static get states() { return {
+    "opened": {},
+    "allPlatforms": {},
+    "platformIcons": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}