@salla.sa/twilight-components 1.0.21 → 1.0.22

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

@@ -0,0 +1,477 @@
+import { Component, h, Prop, Host, Element, Event, Watch, Method, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+/**
+ * @slot body - The content of modal
+ * @slot footer - The footer of modal
+ */
+export class SallaModal {
+  constructor() {
+    var _a;
+    //todo:: unite three colors (error, success, primary) in one prop
+    this.error = false;
+    this.success = false;
+    this.primary = false;
+    this.isClosable = true;
+    this.width = 'md';
+    this.position = 'middel';
+    this.visible = false;
+    this.isLoading = false;
+    this.subTitleFirst = false;
+    this.subTitle = '';
+    this.icon = '';
+    this.imageIcon = '';
+    Helper.setHost(this.host);
+    salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
+    salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
+    this.title = this.host.title;
+    this.host.removeAttribute('title');
+    (_a = Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body', 's-modal-' + this.width);
+  }
+  handleVisible(newValue) {
+    if (!newValue) {
+      this.toggleModal(false);
+      this.modalClosed.emit();
+      return;
+    }
+    this.host.classList.remove('hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.modalOpened.emit();
+  }
+  async show() {
+    this.host.setAttribute('visible', '');
+    return this.host;
+  }
+  async hide() {
+    this.host.removeAttribute('visible');
+    return this.host;
+  }
+  async setTitle(title) {
+    this.title = title;
+    return this.host;
+  }
+  async loading() {
+    this.isLoading = true;
+    return this.host;
+  }
+  async stopLoading() {
+    this.isLoading = false;
+    return this.host;
+  }
+  toggleModal(isOpen) {
+    Helper
+      // .toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.host.querySelector('[slot=body]') || this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+      //todo:: use united class names
+      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+    if (!isOpen) {
+      setTimeout(() => this.host.classList.add('hidden'), 350);
+    }
+  }
+  closeModal() {
+    if (!this.isClosable) {
+      return;
+    }
+    this.host.removeAttribute('visible');
+  }
+  //todo:: pref for each modal
+  render() {
+    this.host.id = this.host.id || 'salla-modal';
+    return (
+    //todo:: use suitable class name instead of hidden
+    h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" },
+      h("div", { class: "s-modal-wrapper" },
+        h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
+        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.width, slot: "body" }, this.isLoading
+          ? h("span", null, "Loading...")
+          :
+            [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } },
+                this.isClosable ?
+                  h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" },
+                    h("span", { class: "sicon-cancel" }))
+                  : '',
+                this.error || this.success || this.icon
+                  ? h("div", { class: {
+                      's-modal-icon': true,
+                      's-modal-bg-error': this.error,
+                      's-modal-bg-success': this.success,
+                      's-modal-bg-normal': !this.error && !this.success,
+                      's-modal-bg-primary': this.primary
+                    } },
+                    h("i", { class: {
+                        [this.icon]: true,
+                        's-modal-text-error': this.error,
+                        's-modal-text-success': this.success,
+                      } }))
+                  : this.imageIcon ?
+                    h("img", { class: "s-modal-header-img", src: this.imageIcon })
+                    : '',
+                this.title || this.subTitle ?
+                  h("div", { class: "s-modal-header-content" },
+                    h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }),
+                    h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
+                  : ''),
+              h("slot", null),
+              h("slot", { name: "footer" })
+            ]))));
+  }
+  static get is() { return "salla-modal"; }
+  static get properties() { return {
+    "error": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "success": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "success",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "primary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "primary",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isClosable": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-closable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'",
+        "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": true,
+      "defaultValue": "'md'"
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'top' | 'middel' | 'bottom'",
+        "resolved": "\"bottom\" | \"middel\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": true,
+      "defaultValue": "'middel'"
+    },
+    "visible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "visible",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "isLoading": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "subTitleFirst": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sub-title-first",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "subTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sub-title",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "imageIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "image-icon",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "title": {}
+  }; }
+  static get events() { return [{
+      "method": "modalOpened",
+      "name": "modalOpened",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "modalClosed",
+      "name": "modalClosed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "setTitle": {
+      "complexType": {
+        "signature": "(title: any) => Promise<HTMLElement>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "loading": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "stopLoading": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "visible",
+      "methodName": "handleVisible"
+    }]; }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,110 @@
+import { Component, h, Element, Method, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+/**
+ * @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 SallaOffer {
+  constructor() {
+    var _a, _b, _c;
+    this.offer = null;
+    Helper.setHost(this.host);
+    this.headerSlot = ((_a = Helper.getElement('[slot="header"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<b class="s-offer-title">{name}</b><h3 class="s-offer-subtitle">{message}</h3>';
+    this.categorySlot = ((_b = Helper.getElement('[slot="category"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>';
+    this.productSlot = ((_c = Helper.getElement('[slot="product"]')) === null || _c === void 0 ? void 0 : _c.innerHTML) || this.defaultProductSlot();
+    salla.offer.event.onExisted(data => {
+      //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
+      if (salla.localStore.get('remember-offer-' + data.offer.offer_id)) {
+        salla.log('User selected to don\'t show this offer again.');
+        return;
+      }
+      this.show(data.product_id);
+    });
+  }
+  async show(productId) {
+    return this.modal.show()
+      .then(() => salla.api.offer.details(productId))
+      //TODO:: make sure there is only one offer
+      .then(response => this.offer = response.data[0]);
+  }
+  rememberMe(event) {
+    salla.localStore.set('remember-offer-' + this.offer.id, event.target.checked);
+  }
+  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-product-image"><img class="s-offer-product-img" src="{image}" /></a>' +
+      '<div class="s-offer-product-info">' +
+      '   <a href={url} class="s-offer-product-name">{name}</a>' +
+      '   <div class="s-offer-product-price">{price}</div>' +
+      '</div>';
+  }
+  render() {
+    var _a, _b;
+    return h("salla-modal", { ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+      ? [h("div", { class: "s-offer-header", innerHTML: this.headerSlot
+            .replace(/\{name\}/g, this.offer.name)
+            .replace(/\{message\}/g, this.offer.message) }),
+        h("div", { class: "s-offer-body" }, ((_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-badge", innerHTML: this.categorySlot
+              .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-product", 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.sale_price) + '<span class="s-offer-product-old-price">' + salla.money(product.regular_price) + '</span>'
+              : salla.money(product.price)) },
+            h("salla-button", { "btn-style": 'outline-primary', "data-id": product.id, onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart'))))),
+        h("div", { class: "s-offer-footer", slot: "footer" },
+          this.offer.expiry_date ?
+            h("p", { class: "s-offer-expiry" },
+              salla.lang.get('pages.products.offer_expires_in'),
+              " ",
+              this.offer.expiry_date)
+            : '',
+          h("label", { class: "s-offer-remember-label" },
+            h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }),
+            "\u00A0 ",
+            salla.lang.get('common.remember_my_choice'))),
+      ] : '');
+  }
+  componentDidRender() {
+    //todo:: know from where there is hidden attributes to the doms🤔
+    //todo:: add animation
+    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
+  }
+  static get is() { return "salla-offer"; }
+  static get states() { return {
+    "offer": {}
+  }; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "(productId: number) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}