@salla.sa/twilight-components 2.14.402 → 2.14.403

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

@@ -1,78 +1,95 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Host, h } from "@stencil/core";
-import GiftIcon from "../../assets/svg/gift.svg";
-const formatDate = (timestamp) => {
-    if (!timestamp)
-        return '';
-    return new Date(Number(timestamp)).toLocaleDateString(salla.lang.locale, {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-    });
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const translateKey = (key) => {
-    if (!key)
-        return '';
-    try {
-        const k = key.toLowerCase();
-        const translation = salla.lang.get(`pages.loyalty_program.${k}`);
-        return translation === `pages.loyalty_program.${k}` ? key : translation;
-    }
-    catch {
-        return key;
-    }
+import { h } from "@stencil/core";
+import { setTranslations } from "./translations";
+import { closeModals, nearestLowerMultiple, normalizeLoyaltyData } from "./functions";
+import SILayoutGrid from "../../assets/svg/layout-grid.svg";
+import SIShipping from "../../assets/svg/shipping.svg";
+import SIPercentage from "../../assets/svg/percentage.svg";
+import SICart2 from "../../assets/svg/cart2.svg";
+import SIUserAdd from "../../assets/svg/user-add.svg";
+import SIGiftSharing from "../../assets/svg/gift-sharing.svg";
+import SICartUpload from "../../assets/svg/cart-upload.svg";
+import SIGift from "../../assets/svg/gift.svg";
+import { TrackedPromise } from "../../Helpers/tracked-promise";
+import anime from "animejs";
+const sicons = {
+    all: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SILayoutGrid }),
+    free_shipping: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIShipping }),
+    coupon_discount: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIPercentage }),
+    free_product: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SICart2 }),
 };
-export class SallaWalletTable {
+export class SallaLoyaltyProgram {
     constructor() {
-        this.loyaltyPointsArray = [];
-        this.isLoadingLoyalty = false;
-        this.nextPageUrlLoyalty = '';
-        this.handleClick = () => {
-            this.loadMoreLoyaltyPoints();
+        /**
+         * prize to show in details or exchange modals
+         */
+        this.currentPrize = null;
+        /**
+         * collapsed state of points list
+         */
+        this.collapsed = true;
+        this.animatedPoints = 0;
+        this.handleExchangeSucceeded = () => {
+            this.points();
+            this.program();
         };
     }
     componentWillLoad() {
-        return salla.onReady().then(() => {
-            this.loadLoyaltyPoints();
-        });
+        return salla.onReady()
+            .then(() => salla.lang.onLoaded())
+            .then(() => setTranslations())
+            .then(() => {
+            this.program();
+            this.points();
+            salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
+        })
+            .catch((error) => salla.logger.error(error));
     }
-    async loadLoyaltyPoints() {
-        this.isLoadingLoyalty = true;
-        try {
-            let url = `/balance/points?page=1`;
-            let resp = await salla.api.request(url);
-            this.loyaltyPointsArray = resp.data;
-            this.nextPageUrlLoyalty = resp.cursor.next;
-        }
-        catch (error) {
-            console.error('Error loading loyalty points transactions', error);
-        }
-        finally {
-            this.isLoadingLoyalty = false;
-        }
+    disconnectedCallback() {
+        salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
     }
-    async loadMoreLoyaltyPoints() {
-        if (!this.nextPageUrlLoyalty)
-            return;
-        this.isLoadingLoyalty = true;
-        try {
-            let resp = await salla.api.request(this.nextPageUrlLoyalty);
-            this.loyaltyPointsArray = [...this.loyaltyPointsArray, ...resp.data];
-            this.nextPageUrlLoyalty = resp.cursor?.next || '';
-        }
-        catch (error) {
-            console.error('Error loading more loyalty points', error);
-        }
-        finally {
-            this.isLoadingLoyalty = false;
-        }
+    getOutlineItem(number, title, description) {
+        const icons = {
+            1: h("span", { innerHTML: SIUserAdd }),
+            2: h("span", { innerHTML: SIGiftSharing }),
+            3: h("span", { innerHTML: SICartUpload }),
+        };
+        return (h("li", { class: "s-loyalty-program-item" }, h("div", { class: "s-loyalty-program-content" }, h("span", { class: "s-loyalty-program-icon-container" }, h("span", { class: "s-loyalty-program-text-gradient" }, number), h("span", { class: "s-loyalty-program-icon" }, icons[number])), h("div", { class: "s-loyalty-program-title" }, title), h("div", { class: "s-loyalty-program-description" }, description))));
     }
     render() {
-        return (h(Host, { key: '4a8cb15322b005a124eb5792044d6435fd52922e' }, h("div", { key: '54a08cfdb24116455b8c137d20ec5ef22a34ff85' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-program-table" }, h("thead", { class: "s-loyalty-program-table-head" }, h("tr", { class: "s-loyalty-program-table-head-tr" }, h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", { class: "s-loyalty-program-table-tbody" }, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-program-table-tbody-tr" }, h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, point?.type === 'plus' ? '+' : '', point?.points || '', " ", salla.lang.get('pages.loyalty_program.point')), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.points_expire_date)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.key)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.status_key))))))), h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrlLoyalty && (h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (h("div", null, h("div", { class: "s-loyalty-program-table-empty-state" }, h("span", { innerHTML: GiftIcon }), h("div", { class: "s-loyalty-program-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), h("div", { class: "s-loyalty-program-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title'))))))))));
+        if (this.program.status === 'error') {
+            return h("p", null, salla.lang.get('common.errors.error_occured'));
+        }
+        const displayedPoints = this.program.data.points.slice(0, this.collapsed ? nearestLowerMultiple(this.program.data.points.length) : this.program.data.points.length);
+        const prizesGroups = this.program.data.prizes;
+        const prizesCount = this.program.data.prizes_count;
+        return (h("div", { class: "s-loyalty-program-container" }, h("salla-loyalty-hero", { name: this.program.data.name, description: this.program.data.description, image: this.program.data.image }, salla.config.isUser()
+            ? h("div", { slot: "crosspoint", class: "s-loyalty-program-profile-wrapper" }, h("div", { class: "s-loyalty-program-profile-container" }, h("div", { class: "s-loyalty-program-profile-points-section" }, h("h2", { class: "s-loyalty-program-profile-label" }, salla.lang.get('pages.loyalty_program.your_points')), h("p", { class: "s-loyalty-program-profile-points" }, h("span", { class: "s-loyalty-program-profile-points-value" }, !!this.animatedPoints ? this.animatedPoints : this.points.data), "\u00A0", salla.lang.get('pages.loyalty_program.point'))), h("div", { class: "s-loyalty-program-profile-icon" }, h("span", { innerHTML: SIGift }))))
+            : h("button", { slot: "action", onClick: () => salla.event.dispatch('login::open'), class: {
+                    's-loyalty-program-login-action': true,
+                    's-loyalty-program-login-action-dark': !this.program.data.image,
+                    's-loyalty-program-login-action-light': !!this.program.data.image,
+                } }, salla.lang.get('blocks.header.login'))), h("div", { class: "s-loyalty-program-outline-section" }, h("section", { class: "s-loyalty-program-section" }, h("header", { class: "s-loyalty-program-header" }, h("h1", { class: "s-loyalty-program-main-title" }, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", { class: "s-loyalty-program-subtitle" }, salla.lang.get('pages.loyalty_program.three_simple_steps'))), h("ol", { class: "s-loyalty-program-list" }, this.getOutlineItem(1, salla.lang.get('pages.loyalty_program.register'), salla.lang.get('pages.loyalty_program.create_account')), this.getOutlineItem(2, salla.lang.get('pages.loyalty_program.earn_points'), salla.lang.get('pages.loyalty_program.complete_tasks')), this.getOutlineItem(3, salla.lang.get('pages.loyalty_program.redeem_rewards'), salla.lang.get('pages.loyalty_program.enjoy_rewards'))))), h("div", { class: "s-loyalty-program-points-wrapper" }, h("section", { class: "s-loyalty-program-points-section" }, h("header", { class: "s-loyalty-program-points-header" }, h("h1", { class: "s-loyalty-program-points-title" }, this.program.data.promotion_title), h("p", { class: "s-loyalty-program-points-description" }, this.program.data.promotion_description)), h("div", { class: "s-loyalty-program-points-spacer" }), h("ul", { class: {
+                's-loyalty-program-points-list-one': this.program.data.points.length === 1,
+                's-loyalty-program-points-list-two': this.program.data.points.length === 2,
+                's-loyalty-program-points-list-multi': this.program.data.points.length > 2,
+            } }, displayedPoints.map(point => (h("li", null, h("salla-loyalty-point", { point: point }))))), h("div", { class: "s-loyalty-program-points-spacer" }), nearestLowerMultiple(this.program.data.points.length) !== this.program.data.points.length && h("button", { class: "s-loyalty-program-points-more-button", onClick: () => this.collapsed = !this.collapsed }, this.collapsed
+            ? h("span", null, salla.lang.get('pages.loyalty_program.show_more'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "+"))
+            : h("span", null, salla.lang.get('pages.loyalty_program.show_less'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "-"))))), this.program.status !== 'success' ? '' : h("div", { class: "s-loyalty-program-rewards-container s-loyalty-program-slider-arrows-edges" }, h("section", { class: {
+                's-loyalty-program-tabs-hider': prizesGroups.length <= 2 || prizesCount <= 4,
+            } }, h("h1", { class: "s-loyalty-program-rewards-heading-mobile" }, salla.lang.get('pages.loyalty_program.rewards')), h("salla-tabs", null, h("div", { slot: "header", class: "s-loyalty-program-rewards-tab-items" }, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title))))), h("h1", { slot: "header", class: "s-loyalty-program-rewards-heading-desktop" }, salla.lang.get('pages.loyalty_program.rewards')), prizesGroups.map((group) => (h("salla-tab-content", { slot: "content", name: group.type }, h("salla-slider", { id: group.type, type: "default", "slider-config": '{"loop":false,"slidesPerView":"auto","freeMode":true,"spaceBetween":12,"breakpoints":{"768":{"slidesPerView":4,"spaceBetween":24,"freeMode":false,"speed":300}}}' }, h("div", { slot: "items" }, group.items.map((prize) => h("salla-reward-card", { prize: prize, onAreaClick: () => { this.currentPrize = prize; closeModals(() => this.detailsModal.open()); }, onActionClick: () => { this.currentPrize = prize; closeModals(() => this.detailsModal.open()); } })))))))), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => closeModals(() => this.exchangeModal.open()), prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize }))))));
     }
     static get is() { return "salla-loyalty-program"; }
     static get originalStyleUrls() {
@@ -87,9 +104,31 @@ export class SallaWalletTable {
     }
     static get states() {
         return {
-            "loyaltyPointsArray": {},
-            "isLoadingLoyalty": {},
-            "nextPageUrlLoyalty": {}
+            "currentPrize": {},
+            "collapsed": {},
+            "animatedPoints": {}
         };
     }
 }
+__decorate([
+    TrackedPromise(async function () {
+        const { data } = await salla.loyalty.getProgram();
+        return normalizeLoyaltyData(data);
+    }, { initialData: { points: [], prizes: [], prizes_count: 0 } })
+], SallaLoyaltyProgram.prototype, "program", void 0);
+__decorate([
+    TrackedPromise(async function () {
+        const { data } = await salla.loyalty.getPoints();
+        anime({
+            targets: { value: 0 },
+            value: data.points ?? 0,
+            round: 1,
+            easing: 'easeOutQuad',
+            duration: 2000,
+            update: (anim) => {
+                this.animatedPoints = anim.animations[0].currentValue;
+            }
+        });
+        return data.points;
+    })
+], SallaLoyaltyProgram.prototype, "points", void 0);

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

@@ -0,0 +1,166 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+import { closeModals } from "./functions";
+import SIGift from "../../assets/svg/gift.svg";
+export class SallaLoyaltyReward {
+    constructor() {
+        this.size = 'md';
+        this.isActionClickable = (prize) => {
+            switch (prize.key?.toLowerCase()) {
+                case 'free_product':
+                    return prize.is_product_available;
+                default:
+                    return true;
+            }
+        };
+        this.handleActionArea = () => {
+            this.rewardModalOpen.emit(this.prize);
+        };
+        this.handleAction = () => {
+            if (!this.isActionClickable(this.prize))
+                return;
+            if (!salla.config.isUser()) {
+                closeModals(() => salla.event.dispatch('login::open'));
+                return;
+            }
+            else {
+                this.confirmModalOpen.emit(this.prize);
+            }
+        };
+    }
+    render() {
+        return (h("div", { key: '38c63e250c45badf03516c87496619152b9a0af8', class: {
+                's-loyalty-program-reward-container': true,
+                's-loyalty-program-reward-xs': this.size === 'xs',
+            } }, h("div", { key: '93e11a5c458aa3112b00bea4bc845733d8bf4415', onClick: this.handleActionArea, role: "button" }, h("div", { key: '67f5cfe1a3551832548d95bda9c6bcc6cdd26119', class: "s-loyalty-program-reward-img" }, h("img", { key: '36f6dc13da2b7c844d2318d4e9bafeb96d960f11', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: 'c953cfeebaabdad22fba498903936e170aadcebe', class: "s-loyalty-program-reward-content" }, h("div", { key: '68f33aba783ffaef38ea9e4a3f9063b2f68bb2b1', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: 'bdac8babbf1bbabeec37e92053c4c7eab178a06f', size: "xs" }, h("span", { key: '367f3f154a6079781cece4018337b09996229001', innerHTML: SIGift }), h("span", { key: 'fd8cdd6bafe8a8f5f45f7a4e6df2f074ab2b5961', class: "s-loyalty-program-rewards-points" }, this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.points')))), h("div", { key: '84f6dbc80ecaa12ab9dacf48ec289bb3f5bdfc84', class: "s-loyalty-program-reward-title" }, h("span", { key: '1505f38884417eee9f266ab3ddb2f57096f6d0da' }, this.group)), h("div", { key: '82ced1df7118958153868c15c193ac03783dc383', class: "s-loyalty-program-reward-name" }, h("div", { key: 'a853fc37628c02ffe064608f6e52725d664fc259', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: '584d6db1edfafc846eb8908d2762483d5e590296', class: "p-4" }, h("button", { key: 'ac0962db5b5d3121b4c6197c4c378db76a963950', onClick: this.handleAction, disabled: !this.isActionClickable(this.prize), class: {
+                's-loyalty-program-rewards-action-base': true,
+                's-loyalty-program-rewards-action-on': this.isActionClickable(this.prize),
+                's-loyalty-program-rewards-action-off': !this.isActionClickable(this.prize),
+            } }, this.isActionClickable(this.prize) ? salla.lang.get('pages.loyalty_program.redeem_reward') : salla.lang.get('pages.loyalty_program.out_of_stock')))));
+    }
+    static get is() { return "salla-loyalty-reward"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-loyalty-program.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-loyalty-program.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'md'",
+                    "resolved": "\"md\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'md'"
+            },
+            "prize": {
+                "type": "unknown",
+                "attribute": "prize",
+                "mutable": false,
+                "complexType": {
+                    "original": "Prize",
+                    "resolved": "Prize",
+                    "references": {
+                        "Prize": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-loyalty-program/interfaces.ts::Prize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "group": {
+                "type": "string",
+                "attribute": "group",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rewardModalOpen",
+                "name": "rewardModalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Prize",
+                    "resolved": "Prize",
+                    "references": {
+                        "Prize": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-loyalty-program/interfaces.ts::Prize"
+                        }
+                    }
+                }
+            }, {
+                "method": "confirmModalOpen",
+                "name": "confirmModalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Prize",
+                    "resolved": "Prize",
+                    "references": {
+                        "Prize": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-loyalty-program/interfaces.ts::Prize"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/salla-loyalty-program/salla-reward-action.js

@@ -0,0 +1,93 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+import { closeModals } from "./functions";
+export class SallaRewardAction {
+    constructor() {
+        this.isShopNow = (prize) => {
+            if (!(salla.config.get('store.features') || []).includes('loyalty-system-v2')) {
+                return false;
+            }
+            return prize.key?.toLowerCase() === 'free_product';
+        };
+        this.handleClick = (e) => {
+            if (salla.config.isGuest()) {
+                closeModals(() => salla.event.dispatch('login::open'));
+                return;
+            }
+            this.actionClick.emit(e);
+        };
+    }
+    render() {
+        return (h("div", { key: '0d02cecaae79cf166555514890fbf6192e1cd438', class: "s-loyalty-program-rewards-modal-action" }, this.isShopNow(this.prize) ? (h("a", { href: this.prize.prize_url || salla.url.get(''), class: {
+                's-loyalty-program-rewards-action-base': true,
+                's-loyalty-program-rewards-action-on': true,
+            } }, salla.lang.get('pages.loyalty_program.shop_now'))) : (h("button", { onClick: this.handleClick, class: {
+                's-loyalty-program-rewards-action-base': true,
+                's-loyalty-program-rewards-action-on': true,
+            } }, salla.lang.get('pages.loyalty_program.redeem_reward')))));
+    }
+    static get is() { return "salla-reward-action"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-loyalty-program.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-loyalty-program.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "prize": {
+                "type": "unknown",
+                "attribute": "prize",
+                "mutable": false,
+                "complexType": {
+                    "original": "Prize",
+                    "resolved": "Prize",
+                    "references": {
+                        "Prize": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-loyalty-program/interfaces.ts::Prize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "actionClick",
+                "name": "actionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/salla-loyalty-program/salla-reward-card.js

@@ -0,0 +1,92 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+import SIGift from "../../assets/svg/gift.svg";
+export class SallaRewardCard {
+    render() {
+        return (h(Host, { key: '0bd68f7cab478d78db8b083ea11c2090d02aab59', class: "s-loyalty-program-reward-host" }, h("div", { key: 'ef4e857bc55a12e50434c1dda2160674ead3b4e6', class: "s-loyalty-program-reward-container" }, h("div", { key: 'a6a7ccdf50ee296b48c05a01f241192c0f77f30c', onClick: (e) => this.areaClick.emit(e), role: "button" }, h("div", { key: 'e4f55cda0d9f36af95ce101c987819d30b9ad143', class: "s-loyalty-program-reward-img" }, h("img", { key: '450fe8914dcf809005d4707074cb305a59990e81', alt: "", src: this.prize.image || salla.url.cdn('images/s-empty.png'), class: "s-loyalty-program-rewards-img" })), h("div", { key: '7828210caf948e057055c53dc64af45426d7977d', class: "s-loyalty-program-reward-content" }, h("div", { key: '2f39695bd03884f6988b44de68964cdfdb75e0bb', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: 'e9e1dda91aa414d58caaff52a4bb667a1fc1b96f', size: "xs" }, h("span", { key: '7baa15af74cde5a6e744667566377417233d0848', innerHTML: SIGift }), h("span", { key: '6bd7f77ec736a6f0fd9de0c69907cc05e87829b0', class: "s-loyalty-program-rewards-points" }, this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.points')))), h("div", { key: '269da0571a6533ca6621792a3891f4b9d132d337', class: "s-loyalty-program-reward-title" }, h("span", { key: '06c40cc994031777565d43c5259eefb3311dea98' }, this.prize.group_title)), h("div", { key: 'e81936c993e83f96f4143278ec82391135778383', class: "s-loyalty-program-reward-name" }, h("div", { key: '752e5e6fbc5de60f7047913d6b8bf79e597fd407', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name, this.prize.description ? `: ${this.prize.description}` : '')))), h("div", { key: 'a83282f66ab42ee0fa055cf9bf7802af1615e8f0', class: "p-4" }, h("slot", { key: '7186f03318c907b3e8ec15e30322d8bf787d74f8', name: "action" }, h("button", { key: '7b1a13734d2c230dd32d744a42e82fdb1c148660', onClick: (e) => this.actionClick.emit(e.detail), class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-on" }, salla.lang.get('pages.loyalty_program.show_reward')))))));
+    }
+    static get is() { return "salla-reward-card"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-loyalty-program.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-loyalty-program.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "prize": {
+                "type": "unknown",
+                "attribute": "prize",
+                "mutable": false,
+                "complexType": {
+                    "original": "Prize",
+                    "resolved": "Prize",
+                    "references": {
+                        "Prize": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-loyalty-program/interfaces.ts::Prize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The prize item"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "areaClick",
+                "name": "areaClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback to be called when the area is clicked"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "actionClick",
+                "name": "actionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback to be called when the action is clicked"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}