@everymatrix/bonus-elevate-shop 1.0.69

package/dist/cjs/player-elevate-card.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-950597be.js');
+const playerElevateCardItems = require('./player-elevate-card-items-94136a9c.js');
+
+const playerElevateCardCss = "@container (max-width: 270px) {\n  .Card .Inner {\n    flex-direction: column;\n  }\n  .Card .Inner .Content {\n    padding: 9px;\n  }\n  .Inner .Row .ExpirationPoints {\n    order: 1;\n  }\n}\n.Card .PlayerImg {\n  order: 0;\n}\n.Card .ExpirationPoints {\n  order: 3;\n}\n.Card .LevelInfo {\n  order: 2;\n}\n.Card .Inner .Row .PlayerImg {\n  flex-direction: column;\n}\n.Card .Inner .Row .PointsInfo {\n  width: 100%;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  max-height: 50%;\n}\n.Card .Inner .PlayerAvatar .Badge {\n  background-size: contain;\n  background-repeat: no-repeat;\n  position: absolute;\n  right: 5px;\n  bottom: -5px;\n  width: 40%;\n  height: 40%;\n  overflow: visible;\n}\n.Card .Inner .Row .ExpirationPoints {\n  text-align: left;\n  color: var(--emfe-w-color-red, red);\n}\n.Card .Inner .Row .Points {\n  text-wrap: nowrap;\n}\n.Card .Inner .LevelInfo .ElevateLevel {\n  flex-direction: column;\n}\n.Card .Inner .LevelInfo .ElevateLevel .LevelName {\n  width: calc(100% - 20px);\n  text-align: left;\n  font-size: 13px;\n  padding-left: 20px;\n  margin: 10px 0;\n}\n.Card .Inner .LevelInfo .ElevateLevel .ExpirationDate {\n  text-align: center;\n  font-size: smaller;\n}\n.Card .Inner .LevelInfo .ElevateLevel .ExpireTime {\n  margin-left: 5px;\n}";
+const PlayerElevateCardStyle0 = playerElevateCardCss;
+
+const PlayerElevateCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.playerAvatarUrl = undefined;
+        this.language = 'en';
+        this.playerName = undefined;
+        this.dateFormat = 'yyyy-MM-dd';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.pointExpireString = undefined;
+        this.playerLevelFlag = 0;
+        this.playerElevateLevel = undefined;
+        this.elevateWalletTotal = undefined;
+    }
+    onSessionOrEndpointChange() {
+        this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+    }
+    playerElevateLeveLoadedHandler(event) {
+        if (!event.detail) {
+            return;
+        }
+        if (event.detail['elevateLevelWalletTotal']) {
+            this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+        }
+        if (event.detail['elevateLevel']) {
+            this.playerElevateLevel = event.detail['elevateLevel'];
+        }
+        if (event.detail['pointExpireString']) {
+            this.pointExpireString = event.detail.xpExpireString;
+        }
+        if (event.detail.calculatedLevelFlag) {
+            this.playerLevelFlag = event.detail.calculatedLevelFlag;
+        }
+    }
+    onRedeemClick() {
+        window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+    }
+    componentWillLoad() {
+        this.paramProxy = {
+            endpoint: this.endpoint,
+            session: this.session,
+            language: this.language,
+            calculateLevelFlag: true,
+        };
+    }
+    render() {
+        const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
+        const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
+        return (index.h("div", { key: '278a328dd084ee73b2707b93a57bccae64a2c9c7', class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { key: '68c885baf533447a7c77fd887bbec11e53768277', class: "Card Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { key: '4066253a70cdd5e712ca244a708e7c1600c83071', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { key: '64cda2a267c752056b3c7e3134cc324fa96bc261', params: this.paramProxy }), index.h("div", { key: 'c63ae83b401a35f5a78acd83dc3d7296c25141d7', class: "OuterCover Inner", style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, this.playerElevateLevel && (index.h(index.Fragment, { key: 'ba16e5bb54259c17fd9e5aa0e3c03c2ec5d4263c' }, index.h("div", { key: 'fa1bf74f45e28318c95266cc42c54541bde92718', class: 'Content Row' }, index.h("div", { key: '7ede46f91bcc0d894b2b633627a4ca97d15fbe90', class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { key: 'b6d0bac085e0178512b8a63ba8fccae7d4cc8399', playerAvatarUrl: this.playerAvatarUrl, loyaltyIconUrl: this.playerElevateLevel.presentation.asset }), index.h(playerElevateCardItems.PlayerPoints, { key: '88c445dbcd7dbe426a8de18beea02aecc03e26f3', loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language })), this.pointExpireString && (index.h("div", { key: '4d985e486ecb74a6c916b28e619de83cb3d77ac1', class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), index.h("div", { key: '34e051ee1ff79b825fca57db958e1e5684a0aca1', class: `LevelInfo Level${this.playerLevelFlag} ${this.playerElevateLevel.presentation.displayName}` }, index.h(playerElevateCardItems.PlayerNameDiv, { key: 'fa1b1f16e0b25c6adfba4c215e4ed377e05699b2', playerName: this.playerName }), index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { key: '6d18b1422db202363ebcd56cc56946e0e071937b', hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h(playerElevateCardItems.PlayerLoyaltyProcess, { key: '7dae355c4a5a9e28c70dced0ac061608f1753020' }), index.h(playerElevateCardItems.PlayerElevateCardRedeem, { key: '7e5f830b612c962a828c58f20a88dc97d315c910', onRedeemClick: this.onRedeemClick, language: this.language })))))))));
+    }
+    static get assetsDirs() { return ["../static"]; }
+    static get watchers() { return {
+        "session": ["onSessionOrEndpointChange"],
+        "endpoint": ["onSessionOrEndpointChange"],
+        "language": ["onSessionOrEndpointChange"]
+    }; }
+};
+PlayerElevateCard.style = PlayerElevateCardStyle0;
+
+exports.player_elevate_card = PlayerElevateCard;

package/dist/cjs/player-elevate-loyaltycard.cjs.entry.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-950597be.js');
+const playerElevateCardItems = require('./player-elevate-card-items-94136a9c.js');
+
+const playerElevateLoyaltycardCss = ":host{display:block}@media screen and (min-width: 501px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:nowrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:11px;margin-left:5px}}@media screen and (max-width: 500px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:wrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:0px;margin-left:0px}}.LoyaltyCard .Inner .LevelProgress{margin-left:0px}.LoyaltyCard .Inner .Row .PointsInfo{width:100%}.LoyaltyCard .Inner .Row .PointsInfo.ExpirationPoints{text-align:left;color:var(--emfe-w-color-red-50, red)}.LoyaltyCard .Inner .PlayerAvatar .Avatar{display:none}.LoyaltyCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%}.LoyaltyCard .Inner .LevelInfo .ElevateLevel{display:flex;flex:1;align-items:center}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{position:relative;padding-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate .ExpireTime{margin-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .LevelName{padding-left:0;font-size:var(--emfe-w-elevate-fontsize-2xlarge, 21px);position:relative;width:auto;color:var(--emfe-w-elevate-color-levelname, #FFBD2B);font-weight:bold}.LoyaltyCard .NextLevelTip{text-align:right;font-size:11px;color:var(--emfe-w-color-black, #000);opacity:0.8;font-weight:bold}";
+const PlayerElevateLoyaltycardStyle0 = playerElevateLoyaltycardCss;
+
+const PlayerElevateLoyaltycard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.playerAvatarUrl = undefined;
+        this.language = 'en';
+        this.playerName = undefined;
+        this.dateFormat = 'yyyy-MM-dd';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.pointExpireString = undefined;
+        this.playerElevateLevel = undefined;
+        this.elevateWalletTotal = undefined;
+    }
+    onSessionOrEndpointChange() {
+        this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+    }
+    playerElevateLeveLoadedHandler(event) {
+        if (!event.detail) {
+            return;
+        }
+        if (event.detail['elevateLevelWalletTotal']) {
+            this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+        }
+        if (event.detail['elevateLevel']) {
+            this.playerElevateLevel = event.detail['elevateLevel'];
+        }
+        if (event.detail['pointExpireString']) {
+            this.pointExpireString = event.detail.xpExpireString;
+        }
+    }
+    onRedeemClick() {
+        window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+    }
+    componentWillLoad() {
+        this.paramProxy = {
+            endpoint: this.endpoint,
+            session: this.session,
+            language: this.language,
+        };
+    }
+    getNextLevelTips() {
+        var _a;
+        //need xx to reach Diamond
+        let nextLevel = (_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.nextLevel;
+        if (this.playerElevateLevel && nextLevel) {
+            const pointsToReach = (nextLevel.entryPoints - this.playerElevateLevel.loyaltyPoints).toFixed(2);
+            return playerElevateCardItems.translateWithParams('tipsForNextLevel', {
+                pointsToReach,
+                levelName: nextLevel.name,
+            });
+        }
+        return '';
+    }
+    render() {
+        const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
+        const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
+        return (index.h("div", { key: 'd32d09786bf66e0abef026482e7ea04a53c051b1', class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { key: 'dd2685eb840341b8823f24db9b72d0f6b7d340ae', class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { key: '3e2a00d1697c89441a8254cb81c6dc72e5b9f534', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { key: '56221e6d50df3b09c4269000637818009807c994', params: this.paramProxy }), index.h("div", { key: 'f11201024b280d6beb2ce1978ebfa7f2c7c59678', class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { key: '948a023268fad3945b5069686eb29312111042a2', class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, { key: 'de7c52faa07386949ce1ca728968534922e9d880' }, index.h("div", { key: '7c1a0c6ea5dbe7ee2375813b3819efa61e283232', class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { key: '70ae13ee168c6de7bf4618f6ab8761462c8812b2', onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { key: 'c11f916999b52e43e04ee472b0f54691012409a5', class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { key: '6aa61d117b24f9abbee9c5d33e882d6f023f205b', hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h(playerElevateCardItems.PlayerPoints, { key: '7cc02e34d4682c25095dbf6a3077b314410d8093', loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), this.pointExpireString && (index.h("div", { key: '793e388644891e15b32e003ac8914e57e758e86b', class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), index.h(playerElevateCardItems.PlayerLoyaltyProcess, { key: 'a4f6c3b9f9cd5e8c6a025c26154702f9495bbe5b' }), index.h("div", { key: 'd91eda0f963ba9ffd481237f4b16bd4ef638d25e', class: "NextLevelTip" }, this.getNextLevelTips())))))))));
+    }
+    static get watchers() { return {
+        "session": ["onSessionOrEndpointChange"],
+        "endpoint": ["onSessionOrEndpointChange"],
+        "language": ["onSessionOrEndpointChange"]
+    }; }
+};
+PlayerElevateLoyaltycard.style = PlayerElevateLoyaltycardStyle0;
+
+exports.player_elevate_loyaltycard = PlayerElevateLoyaltycard;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,28 @@
+{
+  "entries": [
+    "components/bonus-elevate-shop/bonus-elevate-shop.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/general-styling-wrapper",
+      "tags": [
+        "general-styling-wrapper"
+      ]
+    },
+    {
+      "name": "@everymatrix/player-elevate-card",
+      "tags": [
+        "player-elevate-card",
+        "player-elevate-card-data",
+        "player-elevate-loyaltycard",
+        "player-elevate-pointcard"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/bonus-elevate-shop/bonus-elevate-shop.css

@@ -0,0 +1,92 @@
+:host {
+  display: block;
+}
+
+svg circle {
+  shape-rendering: crispEdges;
+}
+
+.MainContainer {
+  max-width: 420px;
+}
+.MainContainer player-elevate-pointcard {
+  width: 100%;
+  height: 220px;
+}
+
+.Gifts {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  padding-left: -8px;
+  padding-right: -8px;
+  flex: 0 0 45.1282051282%;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  background: var(--emfe-w-color-white, #FFFFFF);
+  color: var(--emfe-w-color-black-150, #000000);
+  font-weight: 500;
+  gap: 10px;
+  margin-top: -100px;
+  position: relative;
+  min-height: 200px;
+}
+
+.InfoContainer {
+  display: flex;
+  margin-top: 17px;
+  justify-content: space-between;
+}
+
+.Gift {
+  display: block;
+  margin-bottom: 10px;
+  padding: 8px;
+  box-shadow: 0px 18px 45px 0px var(--emfe-w-color-black-150, rgba(167, 167, 167, 0.2));
+  border-radius: 11px;
+  background: var(--emfe-w-color-white, #FFFFFF);
+}
+.Gift .ImgContainer {
+  width: 160px;
+  height: 107px;
+  border-radius: 11px;
+  box-shadow: 0px 2px 6px 0px var(--emfe-w-color-black-200, rgba(0, 0, 0, 0.2509803922));
+  cursor: pointer;
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.Gift .Point {
+  font-size: 20px;
+}
+.Gift .Title, .Gift .Description {
+  padding-left: 3px;
+}
+.Gift .Title {
+  font-size: 14px;
+  margin-top: 10px;
+}
+.Gift .Description {
+  font-size: 12px;
+  color: var(--emfe-w-color-black-100, #767171);
+}
+.Gift .AvaliableWrap {
+  align-self: self-end;
+}
+.Gift .AvaliableWrap.active {
+  cursor: pointer;
+}
+.Gift .AvaliableWrap.deactive {
+  cursor: not-allowed;
+}
+.Gift .AvaliableWrap span svg {
+  width: var(--emfe-w-elevate-avaliable-button-size, 46px);
+}
+
+.NoContent {
+  font-size: 16px;
+  color: var(--emfe-w-color-black-100, #afafaf);
+  text-align: center;
+  height: 120px;
+  line-height: 120px;
+}

package/dist/collection/components/bonus-elevate-shop/bonus-elevate-shop.js

@@ -0,0 +1,247 @@
+import { h } from "@stencil/core";
+import { fetchNorwayApi } from "../../utils/fetch";
+import { translation } from "../../utils/translation";
+import { renderGifts } from "../../renders/renderGifts";
+import "../../../../../general-styling-wrapper/dist/types/index";
+import "../../../../../../svelte/general-animation-loading/es2015/general-animation-loading";
+import "../../../../../player-elevate-card/dist/types/index";
+export class BonusElevateShop {
+    constructor() {
+        this.bindedHandler = this.handleMessage.bind(this);
+        this.session = undefined;
+        this.endpoint = undefined;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.locale = translation['en'];
+        this.gifts = [];
+        this.isLoading = true;
+    }
+    async updateGifts() {
+        this.isLoading = true;
+        if (this.session) {
+            const res = await fetchNorwayApi.bind(this, '/v1/elevate/shop', {}).call();
+            this.gifts = res.data || [];
+        }
+        else {
+            this.gifts = [];
+        }
+        this.isLoading = false;
+    }
+    redeemGiftConfirm(id) {
+        const shopItem = this.gifts.filter((gift) => {
+            return gift.id === id;
+        })[0];
+        window.postMessage({ type: 'BEERedeemConfirm', shopItem }, window.location.href);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('message', this.bindedHandler, false);
+    }
+    async redeemGift(id) {
+        const res = await fetchNorwayApi.bind(this, '/v1/elevate/redeem', {}, {
+            method: 'PUT',
+            body: JSON.stringify({ giftID: id }),
+            headers: {
+                'Content-Type': 'application/json-patch+json',
+            }
+        }).call();
+        if (res.success) {
+            this.redeemGiftButton.emit();
+            window.postMessage({ type: 'BEEGiftRedeem', itemId: id }, window.location.href);
+        }
+        else {
+            window.postMessage({ type: 'BEEGiftRedeemFailed', itemId: id, err: res }, window.location.href);
+        }
+    }
+    loadGifts(renderer) {
+        if (this.isLoading) {
+            return h("general-animation-loading", null);
+        }
+        else {
+            if (this.gifts.length === 0) {
+                return (h("div", { class: "NoContent" }, this.locale.noContent));
+            }
+            else {
+                return renderer();
+            }
+        }
+    }
+    render() {
+        return (h("main", { key: 'd659585662c983efd2eeb69a3880ec8328ad8351', class: "MainContainer" }, h("general-styling-wrapper", { key: 'a9b2650455ecd27849e55553eb1679dddce7b7cd', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: translation, translationUrl: this.translationUrl }), h("player-elevate-pointcard", { key: 'f042fb5c3fcb5d5c03059507a1201d1e56dfd5d4', endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), this.loadGifts(renderGifts.bind(this, this.gifts, this.locale, this.redeemGiftConfirm.bind(this)))));
+    }
+    handleMessage(message) {
+        if (message.data.type === "bee-redeem-confirmed" && message.data.id) {
+            this.redeemGift(message.data.id);
+        }
+    }
+    async componentDidLoad() {
+        this.updateGifts();
+        window.addEventListener('message', this.bindedHandler, false);
+    }
+    static get is() { return "bonus-elevate-shop"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bonus-elevate-shop.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bonus-elevate-shop.css"]
+        };
+    }
+    static get assetsDirs() { return ["static"]; }
+    static get properties() {
+        return {
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User Session"
+                },
+                "attribute": "session",
+                "reflect": true
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "translation via url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "locale": {},
+            "gifts": {},
+            "isLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "redeemGiftButton",
+                "name": "redeemGiftButton",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "endpoint",
+                "methodName": "updateGifts"
+            }, {
+                "propName": "language",
+                "methodName": "updateGifts"
+            }, {
+                "propName": "session",
+                "methodName": "updateGifts"
+            }];
+    }
+}

package/dist/collection/components/bonus-elevate-shop/index.js

@@ -0,0 +1 @@
+export { BonusElevateShop } from './bonus-elevate-shop';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/renders/renderGifts.js

@@ -0,0 +1,30 @@
+import { h } from "@stencil/core";
+import avaliableTrueSvg from "../static/avaliable.true.svg";
+import avaliableFalseSvg from "../static/avaliable.false.svg";
+const getStatusData = (gift, redeem) => {
+    switch (gift.available) {
+        case "true":
+            return {
+                extraClass: ' active',
+                onClick: () => redeem(gift.id),
+                icon: avaliableTrueSvg
+            };
+        case "false":
+            return {
+                extraClass: ' deactive',
+                onClick: () => { },
+                icon: avaliableFalseSvg
+            };
+    }
+};
+export const renderGifts = (gifts, locale, redeem) => {
+    return (h("div", { class: "Gifts FlexLayout" }, gifts.map(gift => {
+        var _a;
+        const statusData = getStatusData(gift, redeem);
+        const presentation = gift.presentation;
+        const getPropForBackgroundImage = (asset) => asset ?
+            { backgroundImage: `url('${asset}')` } :
+            {};
+        return (h("div", { class: "Gift" }, h("div", { class: "ImgContainer", onClick: () => window.postMessage({ type: 'BEEShopImgClicked', itemId: gift.id }, window.location.href), style: Object.assign({}, getPropForBackgroundImage(((_a = presentation.assets) === null || _a === void 0 ? void 0 : _a.length) > 0 ? presentation.assets[0] : '')) }), h("div", { class: "InfoContainer" }, h("div", null, h("div", { class: "Point" }, gift.points, " ", gift.points === 1 ? locale.Point : locale.Points), h("div", { class: "Title" }, (presentation === null || presentation === void 0 ? void 0 : presentation.displayName) || gift.displayName), h("div", { class: "Description" }, (presentation === null || presentation === void 0 ? void 0 : presentation.description) || '')), h("div", { class: "AvaliableWrap" + statusData.extraClass, onClick: () => statusData.onClick() }, h("span", { innerHTML: statusData.icon })))));
+    })));
+};

package/dist/collection/static/avaliable.false.svg

@@ -0,0 +1,47 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_183_6497)">
+<circle cx="23" cy="19" r="19" style="fill: var(--emfe-w-elevate-avaliable-button-disabled-color, #B7B7B7);" />
+<circle cx="23" cy="19" r="18" stroke="url(#paint0_linear_183_6497)" stroke-opacity="0.6" stroke-width="2"/>
+<circle cx="23" cy="19" r="18" stroke="url(#paint1_linear_183_6497)" stroke-width="2"/>
+<circle cx="23" cy="19" r="18" stroke="url(#paint2_linear_183_6497)" stroke-width="2"/>
+</g>
+<g filter="url(#filter1_d_183_6497)">
+<path d="M31.1977 11C31.7015 11 32.1279 11.1777 32.4767 11.5332C32.8256 11.8887 33 12.3203 33 12.8281V18.9102C33 20.2852 32.7364 21.5977 32.2093 22.8477C31.6822 24.0977 30.9748 25.1719 30.0872 26.0703C29.1996 26.9688 28.1376 27.6816 26.9012 28.209C25.6647 28.7363 24.3682 29 23.0116 29C21.6473 29 20.3469 28.7363 19.1105 28.209C17.874 27.6816 16.8101 26.9688 15.9186 26.0703C15.0271 25.1719 14.3178 24.0977 13.7907 22.8477C13.2636 21.5977 13 20.2852 13 18.9102V12.8281C13 12.3281 13.1783 11.8984 13.5349 11.5391C13.8915 11.1797 14.3178 11 14.814 11H31.1977ZM23.0116 23.4688C23.376 23.4688 23.6938 23.3398 23.9651 23.082L28.6628 18.5352C28.9496 18.2617 29.093 17.9297 29.093 17.5391C29.093 17.1562 28.9593 16.8301 28.6919 16.5605C28.4244 16.291 28.1008 16.1562 27.7209 16.1562C27.3566 16.1562 27.0388 16.2852 26.7674 16.543L23.0116 20.1758L19.2558 16.543C18.9845 16.2852 18.6705 16.1562 18.314 16.1562C17.9341 16.1562 17.6105 16.291 17.343 16.5605C17.0756 16.8301 16.9419 17.1562 16.9419 17.5391C16.9419 17.9375 17.0814 18.2695 17.3605 18.5352L22.0698 23.082C22.3256 23.3398 22.6395 23.4688 23.0116 23.4688Z" fill="#F0F0F0"/>
+</g>
+<defs>
+<filter id="filter0_bd_183_6497" x="-36" y="-40" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_183_6497"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_183_6497" result="effect2_dropShadow_183_6497"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_183_6497" result="shape"/>
+</filter>
+<filter id="filter1_d_183_6497" x="11" y="10" width="24" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_183_6497"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_183_6497" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_183_6497" x1="49.2869" y1="15.1911" x2="36.3103" y2="15.603" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#EFEFEF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_183_6497" x1="4" y1="0" x2="19.3776" y2="8.17396" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.5"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_183_6497" x1="42" y1="38" x2="27.0558" y2="34.3156" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.5"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>