@salla.sa/twilight-components 1.0.159 → 1.1.4

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

@@ -0,0 +1,225 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, h, Host, Method, State } from '@stencil/core';
+import Star3 from '../../assets/svg/star3.svg';
+import CheckCircle from '../../assets/svg/check-circle.svg';
+export class SallaLoyalty {
+  constructor() {
+    this.loyaltyProgram = undefined;
+    this.buttonLoading = false;
+    this.selectedItem = undefined;
+    this.askConfirmation = false;
+    salla.lang.onLoaded(() => {
+      this.points = salla.lang.get('pages.loyalty_program.point');
+      this.exchange_points = salla.lang.get('pages.loyalty_program.exchange_points');
+      this.are_you_sure_to_exchange = salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange');
+      this.for = salla.lang.get('pages.loyalty_program.for');
+      this.confirm = salla.lang.get('pages.loyalty_program.confirm');
+      this.cancel = salla.lang.get('pages.loyalty_program.cancellation');
+      this.loyalty_placeholder = salla.lang.get('pages.loyalty.points');
+      this.loyalty_placeholder_info = salla.lang.get('pages.loyalty.points');
+    });
+  }
+  setSelectedPrizeItem(item) {
+    if (!this.selectedItem || this.selectedItem.id != item.id) {
+      this.selectedItem = item;
+    }
+    else {
+      this.selectedItem = undefined;
+    }
+  }
+  prizeItem(item) {
+    var klass = {
+      's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem.id == item.id,
+      "s-loyalty-prize-item": true
+    };
+    return h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass },
+      h("span", { class: "s-loyalty-prize-item-check", innerHTML: CheckCircle }),
+      h("img", { class: "s-loyalty-prize-item-image", src: item.image, alt: item.name }),
+      h("div", { class: "s-loyalty-prize-item-title" }, item.name),
+      h("div", { class: "s-loyalty-prize-item-subtitle" }, item.description),
+      h("div", { class: "s-loyalty-prize-item-points" },
+        item.cost_points,
+        " ",
+        this.points));
+  }
+  getConfirmationModal() {
+    var _a, _b;
+    return h("div", null,
+      h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" },
+        h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, this.exchange_points),
+        h("div", { slot: "description" },
+          h("span", null,
+            this.are_you_sure_to_exchange,
+            " ( ",
+            h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points),
+            " ) ",
+            this.for,
+            " ( ",
+            h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name),
+            " )"))),
+      h("div", { class: "s-loyalty-confirmation-actions" },
+        h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, this.cancel),
+        h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, this.confirm)));
+  }
+  /**
+   * Show loyalty modal
+   */
+  async open() {
+    this.modal.open();
+    return await salla.loyalty.getProgram()
+      .then((response) => {
+      this.loyaltyProgram = response.data;
+    })
+      .catch(e => console.log(e))
+      .finally(() => {
+      this.modal.stopLoading();
+    });
+  }
+  /**
+   *
+   * Hide loyalty modal
+   */
+  async close() {
+    return this.modal.close();
+  }
+  /**
+   * Open Confirmation modal
+   */
+  async openConfirmation() {
+    return await this.modal.close()
+      .then(() => this.confirmationModal.open())
+      .catch(e => console.log(e));
+  }
+  /**
+   * Cancel process
+   */
+  async cancelProcess() {
+    await this.confirmationModal.close()
+      .then(() => this.selectedItem = null)
+      .catch(e => console.log(e));
+  }
+  /**
+   *
+   * @param {number} loyalty_prize_id
+   *
+   */
+  async exchangeLoyaltyPoint() {
+    this.buttonLoading = true;
+    const cartId = await salla.cart.api.getCurrentCartId();
+    return await salla.loyalty.exchangePoint(this.selectedItem.id, cartId)
+      .then((response) => {
+      this.loyaltyProgram = response.data;
+    })
+      .catch(e => console.log(e))
+      .finally(() => this.buttonLoading = false);
+  }
+  render() {
+    return (h(Host, null,
+      h("salla-list-tile", { id: 's-loyalty-activator' },
+        h("div", { slot: "icon", class: "s-loyalty-activator-icon", innerHTML: Star3 }),
+        h("div", { slot: "subtitle" },
+          h("div", null,
+            "You have 200 points that you can use for great prizes",
+            h("salla-button", { shape: "link", color: "danger", onClick: () => this.open() }, "Get Loyalty Program")))),
+      h("salla-modal", { id: "salla-loyalty-confirmation-modal", noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
+      h("salla-modal", { isLoading: true, id: "salla-loyalty-modal", width: "lg", ref: modal => this.modal = modal },
+        !!this.loyaltyProgram ?
+          [
+            h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" },
+              h("div", { slot: "icon", class: "s-loyalty-header-icon" },
+                h("img", { src: "https://cdn.salla.network/custom-themes/images/flat.svg", alt: "flat" })),
+              h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title),
+              h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
+            h("salla-tabs", null,
+              this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title },
+                h("span", null, prize.title))),
+              this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title },
+                h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
+            h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points)
+          ]
+          :
+            h("salla-placeholder", { alignment: "center", iconSize: "xl" },
+              h("div", { slot: "title" }, this.loyalty_placeholder),
+              h("div", { slot: "description" }, this.loyalty_placeholder_info)),
+        h("slot", { name: "footer" }))));
+  }
+  static get is() { return "salla-loyalty"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-loyalty.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-loyalty.css"]
+  }; }
+  static get states() { return {
+    "loyaltyProgram": {},
+    "buttonLoading": {},
+    "selectedItem": {},
+    "askConfirmation": {},
+    "points": {},
+    "exchange_points": {},
+    "are_you_sure_to_exchange": {},
+    "for": {},
+    "cancel": {},
+    "confirm": {},
+    "loyalty_placeholder": {},
+    "loyalty_placeholder_info": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Show loyalty modal",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "\nHide loyalty modal",
+        "tags": []
+      }
+    },
+    "exchangeLoyaltyPoint": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "param",
+            "text": "loyalty_prize_id"
+          }]
+      }
+    }
+  }; }
+}

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, h, Prop, Host, Element, Watch, Method, State } from '@stencil/core';
+import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 /**
  * @slot footer - The footer of modal
@@ -124,31 +124,38 @@ export class SallaModal {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
+    if (this.isLoading) {
+      return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" },
+        h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
+        h("div", { class: "s-modal-wrapper" },
+          h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"),
+          h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') },
+            h("salla-loading", null),
+            h("div", { class: "s-hidden" },
+              h("slot", null))))));
+    }
     return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" },
       h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
       h("div", { class: "s-modal-wrapper" },
         h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"),
-        h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
-          h("div", { class: "s-modal-loader-wrap" },
-            h("span", { class: "s-modal-loader" }))
-          :
-            [
-              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" }))
-                  : '',
-                h("div", { class: "s-modal-header-inner" },
-                  this.iconStyle || this.icon
-                    ? h("div", { class: this.iconBlockClasses() },
-                      h("i", { class: this.iconClasses() }))
-                    : this.imageIcon ? h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '',
-                  h("div", { class: "s-modal-header-content" },
-                    h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }),
-                    h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))),
-              h("slot", null),
-              h("slot", { name: "footer" })
-            ]))));
+        h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') },
+          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.modalTitle || this.subTitle ?
+              h("div", { class: "s-modal-header-inner" },
+                this.iconStyle || this.icon
+                  ? h("div", { class: this.iconBlockClasses() },
+                    h("i", { class: this.iconClasses() }))
+                  : this.imageIcon ? h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '',
+                h("div", { class: "s-modal-header-content" },
+                  h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }),
+                  h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+              : ""),
+          h("slot", null),
+          h("slot", { name: "footer" })))));
   }
   //move the modal as root dom, because we need the model to be outside the forms
   componentDidLoad() {

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

@@ -0,0 +1,100 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, h } from '@stencil/core';
+import Inbox from '../../assets/svg/inbox.svg';
+export class SallaPlaceholder {
+  constructor() {
+    /**
+     * 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';
+  }
+  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("div", { 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("div", { class: "s-placeholder-description" },
+        h("slot", { name: 'description' }))));
+  }
+  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'"
+    }
+  }; }
+}

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.
+*/

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

@@ -0,0 +1,103 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, State, Method, Element, h } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaProductSizeGuide {
+  constructor() {
+    Helper.setHost(document);
+    salla.event.on('size-guide::open', (product_id) => this.open(product_id));
+  }
+  /**
+   * Show the size-guide modal window
+   */
+  async open(product_id) {
+    this.modal.setTitle(salla.lang.get('pages.products.size_guides'));
+    this.modal.open();
+    return await salla.product.getSizeGuides(product_id)
+      .then((response) => {
+      this.guides = response.data;
+    })
+      .catch(e => console.log(e))
+      .finally(() => this.modal.stopLoading());
+  }
+  /**
+   *
+   * Hide the size-guide modal window
+   */
+  async close() {
+    return this.modal.close();
+  }
+  // !Todo - Enhance placeholder text
+  showPlaceholder() {
+    return h("salla-placeholder", { alignment: "center", iconSize: "xl" },
+      h("div", { slot: "title" }, salla.lang.get('pages.products.size_guide_placeholder')),
+      h("div", { slot: "description" }, salla.lang.get('pages.products.size_guide_placeholder_info')));
+  }
+  render() {
+    return (h(Host, { class: "s-product-size-guide-block" },
+      h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, width: "md", ref: modal => this.modal = modal },
+        h("slot", { name: "header" }),
+        !!this.guides ?
+          [h("div", { class: "container px-8" },
+              h("salla-tabs", null,
+                this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name },
+                  h("span", null, guide.name))),
+                this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name },
+                  h("div", { innerHTML: guide.description })))))]
+          : this.showPlaceholder(),
+        h("slot", { name: "footer" }))));
+  }
+  static get is() { return "salla-product-size-guide"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-product-size-guide.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-product-size-guide.css"]
+  }; }
+  static get states() { return {
+    "guides": {},
+    "productId": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "(product_id: number) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Show the size-guide modal window",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "\nHide the size-guide modal window",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}