@salla.sa/twilight-components 1.4.6 → 1.4.8

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

@@ -1,442 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { Component, h, Method, Prop, State } from '@stencil/core';
-import Star2 from '../../assets/svg/star2.svg';
-import Star3 from '../../assets/svg/star3.svg';
-import CancelIcon from '../../assets/svg/cancel.svg';
-import GiftImg from '../../assets/flat.svg';
-export class SallaLoyalty {
-  constructor() {
-    this.loyaltyProgram = undefined;
-    this.buttonLoading = false;
-    this.selectedItem = undefined;
-    this.askConfirmation = false;
-    this.is_loggedin = false;
-    /**
-     * The exchanged prize point
-     */
-    this.prizePoints = undefined;
-    /**
-     * Available customer points with which they can exchange.
-     */
-    this.customerPoints = undefined;
-    /**
-     * The exchangable prize title
-     */
-    this.prizeTitle = undefined;
-    /**
-     * Does the merchant allow to login using email
-     */
-    this.allowEmail = true;
-    /**
-     * Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
-     */
-    this.allowMobile = true;
-    /**
-     * Does the merchant require registration with email & mobile
-     */
-    this.requireEmail = false;
-    salla.event.on('loyalty::open', () => this.open());
-    salla.auth.event.onLoggedIn(() => {
-      this.is_loggedin = true;
-    });
-    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.cart_total_point_summary = salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints });
-      this.cart_point_exchange_now = salla.lang.get('pages.loyalty_program.cart_point_exchange_now');
-      this.login_button = salla.lang.get('blocks.header.login');
-      if (!this.guestMessage) {
-        this.guestMessage = salla.lang.get('pages.loyalty_program.guest_message');
-      }
-    });
-  }
-  setSelectedPrizeItem(item) {
-    if (!this.selectedItem || this.selectedItem.id != item.id) {
-      this.selectedItem = item;
-    }
-    else {
-      this.selectedItem = undefined;
-    }
-  }
-  handleLongText(text) {
-    if (text.length > 150) {
-      return text.substring(0, 150) + '...';
-    }
-    return text;
-  }
-  prizeItem(item) {
-    let 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("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" }, this.handleLongText(item.description)),
-      h("div", { class: "s-loyalty-prize-item-points" },
-        item.cost_points,
-        " ",
-        this.points,
-        h("div", { class: "s-loyalty-prize-item-check" },
-          h("div", null))));
-  }
-  getConfirmationModal() {
-    var _a, _b;
-    return [
-      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" },
-          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))
-    ];
-  }
-  getAfterExchangeUI() {
-    return h("slot", { name: 'points-applied-widget' },
-      h("salla-list-tile", { class: "s-loyalty-after-exchange" },
-        h("div", { slot: "title", class: "s-loyalty-after-exchange-title" },
-          this.prizeTitle,
-          " \u00A0 - \u00A0 ",
-          this.prizePoints),
-        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 })))));
-  }
-  /**
-   * Show loyalty modal
-   */
-  async open() {
-    if (!this.is_loggedin)
-      return salla.event.dispatch('login::open');
-    this.modal.open();
-    return await salla.loyalty.getProgram()
-      .then((response) => {
-      console.log("🚀 ~ file: salla-loyalty.tsx ~ line 167 ~ SallaLoyalty ~ .then ~ response", response);
-      this.loyaltyProgram = response.data;
-    })
-      .catch(e => console.log(e))
-      .finally(() => {
-      this.modal.stopLoading();
-    });
-  }
-  /**
-   *
-   * Hide loyalty modal
-   */
-  async close() {
-    return this.modal.close();
-  }
-  /**
-   *
-   * Cancel Exchanged prizes
-   */
-  async resetExchange() {
-    return await salla.loyalty.reset()
-      .then(() => {
-      this.prizePoints = undefined;
-      this.prizeTitle = undefined;
-    }).catch(e => console.log(e));
-  }
-  /**
-   * Open Confirmation modal
-   */
-  async openConfirmation() {
-    return await this.modal.close()
-      .then(() => this.confirmationModal.open())
-      .catch(e => console.log(e));
-  }
-  /**
-   * Cancel process
-   */
-  async cancelProcess() {
-    return await this.confirmationModal.close()
-      .then(() => this.selectedItem = null)
-      .catch(e => console.log(e));
-  }
-  /**
-   *
-   * @param {number} loyalty_prize_id
-   *
-   */
-  async exchangeLoyaltyPoint() {
-    this.buttonLoading = true;
-    return await salla.loyalty.exchange(this.selectedItem.id)
-      .then((response) => {
-      this.loyaltyProgram = response.data;
-    })
-      .catch(e => console.log(e))
-      .finally(() => {
-      this.buttonLoading = false;
-      this.cancelProcess();
-    });
-  }
-  render() {
-    // A. when the exchange is done, and we have the final prize points to show it in cart page
-    if (this.prizePoints) {
-      return this.getAfterExchangeUI();
-    }
-    return [
-      h("slot", { name: 'widget' }, this.customerPoints ?
-        h("salla-list-tile", { class: 's-loyalty-widget' },
-          h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Star2 }),
-          h("div", { slot: "subtitle" },
-            this.is_loggedin ? this.cart_total_point_summary : this.guestMessage,
-            h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? this.cart_point_exchange_now : this.login_button))) :
-        ''),
-      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: "md", 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", innerHTML: GiftImg }),
-            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", { class: "s-loyalty-placeholder", alignment: "center" })),
-    ];
-  }
-  componentDidLoad() {
-    this.is_loggedin = salla.config.isUser();
-  }
-  static get is() { return "salla-loyalty"; }
-  static get originalStyleUrls() { return {
-    "$": ["salla-loyalty.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["salla-loyalty.css"]
-  }; }
-  static get properties() { return {
-    "prizePoints": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The exchanged prize point"
-      },
-      "attribute": "prize-points",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "customerPoints": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Available customer points with which they can exchange."
-      },
-      "attribute": "customer-points",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "prizeTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The exchangable prize title"
-      },
-      "attribute": "prize-title",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "allowEmail": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Does the merchant allow to login using email"
-      },
-      "attribute": "allow-email",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "allowMobile": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`"
-      },
-      "attribute": "allow-mobile",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "requireEmail": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Does the merchant require registration with email & mobile"
-      },
-      "attribute": "require-email",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "guestMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Message to show for guest users."
-      },
-      "attribute": "guest-message",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "loyaltyProgram": {},
-    "buttonLoading": {},
-    "selectedItem": {},
-    "askConfirmation": {},
-    "is_loggedin": {},
-    "points": {},
-    "exchange_points": {},
-    "are_you_sure_to_exchange": {},
-    "for": {},
-    "cancel": {},
-    "confirm": {},
-    "cart_total_point_summary": {},
-    "cart_point_exchange_now": {},
-    "login_button": {}
-  }; }
-  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": []
-      }
-    },
-    "resetExchange": {
-      "complexType": {
-        "signature": "() => Promise<any>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any>"
-      },
-      "docs": {
-        "text": "\nCancel Exchanged prizes",
-        "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.css

@@ -1,4 +0,0 @@
-/*
-* Salla Modal Component: popup modal used in most parts of the theme
-* You can use these classes to target the elements in the component.
-*/