@everymatrix/bonus-elevate-shop-item 1.94.52 → 1.94.54

package/dist/cjs/bonus-elevate-shop-item.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bonus-elevate-shop-assets-slider_3.cjs",[[1,"bonus-elevate-shop-item",{"endpoint":[513],"language":[513],"itemId":[1537,"item-id"],"elevateGift":[1040],"session":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"isGiftNotFound":[32],"redeemErrorMsg":[32],"isRedeeming":[32]}],[0,"bonus-elevate-shop-assets-slider",{"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"itemsPerPage":[514,"items-per-page"],"sliderItems":[16],"activeIndex":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]},null,{"mbSource":["handleMbSourceChange"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+  return index.bootstrapLazy([["bonus-elevate-shop-assets-slider_5.cjs",[[1,"bonus-elevate-shop-item",{"endpoint":[513],"language":[513],"itemId":[1537,"item-id"],"elevateGift":[1040],"session":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"isGiftNotFound":[32],"redeemErrorMsg":[32],"isRedeeming":[32],"powerUpGames":[32],"isLoadingGames":[32]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"bonus-elevate-shop-assets-slider",{"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"itemsPerPage":[514,"items-per-page"],"sliderItems":[16],"activeIndex":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]},null,{"mbSource":["handleMbSourceChange"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/index-ad2fddb6.js

@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'bonus-elevate-shop-assets-slider_3.cjs':
+                case 'bonus-elevate-shop-assets-slider_5.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './bonus-elevate-shop-assets-slider_3.cjs.entry.js')); }).then(processMod, consoleError);
+                        './bonus-elevate-shop-assets-slider_5.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bonus-elevate-shop-assets-slider_3.cjs",[[1,"bonus-elevate-shop-item",{"endpoint":[513],"language":[513],"itemId":[1537,"item-id"],"elevateGift":[1040],"session":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"isGiftNotFound":[32],"redeemErrorMsg":[32],"isRedeeming":[32]}],[0,"bonus-elevate-shop-assets-slider",{"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"itemsPerPage":[514,"items-per-page"],"sliderItems":[16],"activeIndex":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]},null,{"mbSource":["handleMbSourceChange"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+  return index.bootstrapLazy([["bonus-elevate-shop-assets-slider_5.cjs",[[1,"bonus-elevate-shop-item",{"endpoint":[513],"language":[513],"itemId":[1537,"item-id"],"elevateGift":[1040],"session":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"isGiftNotFound":[32],"redeemErrorMsg":[32],"isRedeeming":[32],"powerUpGames":[32],"isLoadingGames":[32]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"bonus-elevate-shop-assets-slider",{"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"itemsPerPage":[514,"items-per-page"],"sliderItems":[16],"activeIndex":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]},null,{"mbSource":["handleMbSourceChange"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -14,6 +14,18 @@
       "tags": [
         "general-styling-wrapper"
       ]
+    },
+    {
+      "name": "@everymatrix/ui-image",
+      "tags": [
+        "ui-image"
+      ]
+    },
+    {
+      "name": "@everymatrix/ui-skeleton",
+      "tags": [
+        "ui-skeleton"
+      ]
     }
   ],
   "bundles": []

package/dist/collection/components/bonus-elevate-shop-item/bonus-elevate-shop-assets-slider.js

@@ -115,11 +115,11 @@ export class BonusElevateShopAssetsSlider {
         const itemStyle = {
             width: `${this.itemElementWidth / this.itemsPerPage}px`
         };
-        return h("div", { key: '3740bd5b367f4e24f0b4391dc7f25c63ccb12958', class: "SliderWrapper" }, h("div", { key: '6aac842f54de59cea8b2f2655e8408a8778702d4', class: 'MainContent ' }, this.showSliderArrows &&
-            h("div", { key: '94de38b6a631824bbe15964d70377639af769917', class: `SliderNavButton LeftArrow ${this.activeIndex === 0 ? 'DisabledArrow ' : ''} ${this.sliderItems.length === 1 ? 'HiddenArrow ' : ''}`, onClick: () => this.move(-1) }, h("svg", { key: '382d3d0c54932b359b2be4b9ed8c3db3c6da49ec', fill: "none", stroke: "var(--emw--color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9b4d592aa650ddff2fbd8625a8b0a5d1b604c723', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))), h("div", { key: 'b3ec493624a11931eb48e44eb620373b2613d0a8', class: 'ItemsWrapper', ref: (el) => this.sliderItemsElement = el }, h("div", { key: '724e11f1b3899c0f4bb179fff9b60f40c363e7f1', class: 'Items AssetsItems', style: styles }, this.sliderItems.map((assetUrl) => h("img", { class: `img${this.itemsPerPage}`, alt: 'Gift Thumbnails', style: itemStyle, src: assetUrl })))), this.showSliderArrows &&
-            h("div", { key: '2791a14781f73619c122401a97a9833e33787282', class: `SliderNavButton RightArrow  ${this.sliderItems.length === 1 ? 'HiddenArrow ' : ''}
-                      ${(this.activeIndex === (this.sliderItems.length - 1) || this.itemsPerPage == this.sliderItems.length) ? 'DisabledArrow' : ''}`, onClick: () => this.move(1) }, h("svg", { key: '3810b14f2a0fc436601186335a01b7af90aabab5', fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '18178c52a74cf77c856f65b6f377a350fc672db8', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" })))), this.showSliderDots && this.sliderItems.length > 1 &&
-            h("div", { key: '83964fb11e6728adb065958ebfbf17902e301b2e', class: "DotsWrapper" }, h("ul", { key: 'cafab68d463e25a0847306314c64041bc3f107f7', class: "Dots" }, this.renderDots())));
+        return h("div", { key: '740222cee57f5759854860f015dd900c1cb66f80', class: "SliderWrapper" }, h("div", { key: '6d8971425bc1fc42bc4e64331b0c5f21d4ed1c40', class: 'MainContent ' }, this.showSliderArrows &&
+            h("div", { key: '1db77bb5cd7dfb6d5e06a4f42a33ff435f9eb224', class: `SliderNavButton LeftArrow ${this.activeIndex === 0 ? 'DisabledArrow ' : ''} ${this.sliderItems.length === 1 ? 'HiddenArrow ' : ''}`, onClick: () => this.move(-1) }, h("svg", { key: 'e406abe6d9d44ab3809322d2f0699ea3ee372b0f', fill: "none", stroke: "var(--emw--color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a8ee39ea455a06058466e03755582fbd07391514', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))), h("div", { key: 'a2681048af708d96aa6886db7b6b94639a650a26', class: 'ItemsWrapper', ref: (el) => this.sliderItemsElement = el }, h("div", { key: 'be1c762012144756bda71a46302dfe0954bc6add', class: 'Items AssetsItems', style: styles }, this.sliderItems.map((assetUrl) => h("img", { class: `img${this.itemsPerPage}`, alt: 'Gift Thumbnails', style: itemStyle, src: assetUrl })))), this.showSliderArrows &&
+            h("div", { key: '927367a3bbc674cc953eccc3359639381423d0a4', class: `SliderNavButton RightArrow  ${this.sliderItems.length === 1 ? 'HiddenArrow ' : ''}
+                      ${(this.activeIndex === (this.sliderItems.length - 1) || this.itemsPerPage == this.sliderItems.length) ? 'DisabledArrow' : ''}`, onClick: () => this.move(1) }, h("svg", { key: 'd84e6e3011f8609f1ded47098bb28333f352f430', fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f05768932ee5e8fb74b6b1016612320d0e4ed737', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" })))), this.showSliderDots && this.sliderItems.length > 1 &&
+            h("div", { key: 'a08098a90c717ccceda93cd741cb65521a83df9b', class: "DotsWrapper" }, h("ul", { key: '8c873c229c603b4aca57e277f74cdf3d2192c01b', class: "Dots" }, this.renderDots())));
     }
     static get is() { return "bonus-elevate-shop-assets-slider"; }
     static get properties() {

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

@@ -1,11 +1,11 @@
 :host {
   display: block;
+  --game-amount-per-line: 6;
 }
 
 .ElevateDetails {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
   padding: 10px;
   width: calc(100% - 20px);
   /*Slider styles*/
@@ -61,6 +61,9 @@
 .ElevateDetails .ShopItemDetail {
   flex-grow: 1;
   min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .ElevateDetails .GiftPoints .Points {
   font-size: 21px;
@@ -184,4 +187,92 @@
   opacity: 0.2;
   stroke: var(--emw--color-secondary, #FD2839);
   pointer-events: none;
+}
+
+.GamesContent {
+  margin: 20px;
+  padding: 15px;
+  min-height: 500px;
+  flex: 1;
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  border: 2px solid var(--emw--color-powup-light-green-0D, rgba(188, 252, 177, 0.0509803922));
+}
+.GamesContent .GamesTitle {
+  display: flex;
+  flex-direction: row;
+}
+.GamesContent .GamesTitle .Title2 {
+  text-transform: capitalize;
+}
+.GamesContent .GamesTitle .GamesAmount {
+  opacity: 0.8;
+}
+.GamesContent .GameTitleTip {
+  color: var(--emw--color-powup-gray-green, #C8D6CE);
+  font-size: 0.8rem;
+}
+.GamesContent .GamesList {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-height: 300px;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--emw--background-gray-color, gray) transparent;
+}
+.GamesContent .GamesList::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 5px;
+}
+.GamesContent .GamesList .Games {
+  width: 100%;
+  padding: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: calc(30px / (var(--game-amount-per-line) - 1));
+}
+.GamesContent .GamesList .Games .Game {
+  width: calc((100% - 30px) / var(--game-amount-per-line));
+  cursor: pointer;
+  position: relative;
+}
+.GamesContent .GamesList .Games .Game .GameMask {
+  transition: opacity;
+  transition-duration: 0.2s;
+  opacity: 0;
+  position: absolute;
+  width: 70%;
+  height: 100%;
+}
+.GamesContent .GamesList .Games .Game:hover .mask-filter {
+  opacity: 1;
+}
+.GamesContent .GamesList .Games .Game:hover img {
+  opacity: 0.4;
+  filter: blur(1.5px);
+}
+.GamesContent .GamesList .Games .Game:hover .GameMask {
+  opacity: 1;
+  mix-blend-mode: screen;
+  background-color: var(--emw--color-powup-green, #24B24E);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  height: 100%;
+  top: 0;
+  border-radius: 8px;
+}
+.GamesContent .GamesList .Games .Game:hover .GameMask .PlayBtn {
+  border: 2px solid var(--emw--color-powup-gray, #f0f0f0);
+  padding: 5px 3px;
+  border-radius: 3px;
 }

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

@@ -2,10 +2,15 @@ import { Fragment, h, Host } from "@stencil/core";
 import "../../../../../general-styling-wrapper/dist/types/index";
 import { getTranslations, translate } from "../../utils/locale.utils";
 import { getDevicePlatform } from "../../utils/utils";
+import "../../../../../ui-image/dist/types/index";
 export class BonusElevateShopItem {
     constructor() {
         this.bindedHandler = this.handleMessage.bind(this);
         this.deviceType = getDevicePlatform();
+        this.powerUpGameSearchConditions = {
+            expand: "games",
+            fields: "powerUpID,games(id,gameId,slug,name,thumbnail)"
+        };
         this.endpoint = undefined;
         this.language = 'en';
         this.itemId = undefined;
@@ -20,6 +25,8 @@ export class BonusElevateShopItem {
         this.isGiftNotFound = false;
         this.redeemErrorMsg = '';
         this.isRedeeming = false;
+        this.powerUpGames = undefined;
+        this.isLoadingGames = false;
     }
     redeemGiftConfirm() {
         if (this.isRedeeming || this.elevateGift.available != 'true') {
@@ -86,6 +93,9 @@ export class BonusElevateShopItem {
                 let filteredGifts = data.data;
                 if (filteredGifts && filteredGifts.length == 1) {
                     this.elevateGift = filteredGifts[0];
+                    if (this.elevateGift.type === 'powerUp' && this.elevateGift.powerUpID) {
+                        this.loadMoreGames();
+                    }
                     this.isGiftNotFound = false;
                 }
                 else {
@@ -95,8 +105,67 @@ export class BonusElevateShopItem {
             });
         });
     }
+    async loadMoreGames() {
+        var _a, _b, _c, _d, _e;
+        if (this.isLoadingGames || (((_a = this.powerUpGames) === null || _a === void 0 ? void 0 : _a.total) > 0 && ((_b = this.powerUpGames) === null || _b === void 0 ? void 0 : _b.items.length) >= ((_c = this.powerUpGames) === null || _c === void 0 ? void 0 : _c.total))) {
+            return;
+        }
+        this.isLoadingGames = true;
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/powerups/available?pagination=games(limit=20,offset=${((_d = this.powerUpGames) === null || _d === void 0 ? void 0 : _d.items.length) || 0})`);
+            const options = {
+                headers: { 'x-SessionId': this.session },
+            };
+            url.searchParams.append('filter', `id=${this.elevateGift.powerUpID}`);
+            Object.entries(this.powerUpGameSearchConditions).forEach(([key, value]) => {
+                url.searchParams.append(key, value);
+            });
+            const response = await fetch(url.toString(), options);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const { data } = await response.json();
+            const fetchedPowerUp = data === null || data === void 0 ? void 0 : data[0];
+            if ((_e = fetchedPowerUp === null || fetchedPowerUp === void 0 ? void 0 : fetchedPowerUp.games) === null || _e === void 0 ? void 0 : _e.items) {
+                if (!this.powerUpGames) {
+                    this.powerUpGames = fetchedPowerUp.games;
+                }
+                else {
+                    this.powerUpGames.items = [...this.powerUpGames.items, ...fetchedPowerUp.games.items];
+                }
+                this.powerUpGames = Object.assign({}, this.powerUpGames);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load more games:', error);
+        }
+        finally {
+            this.isLoadingGames = false;
+        }
+    }
+    initializeGamesObserver() {
+        if (this.loadMoreGamesObserver) {
+            this.loadMoreGamesObserver.disconnect();
+        }
+        this.loadMoreGamesObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.loadMoreGames();
+                }
+            });
+        });
+        if (this.lastGameElement) {
+            this.loadMoreGamesObserver.observe(this.lastGameElement);
+        }
+    }
+    onGameClick(game) {
+        window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } });
+    }
     disconnectedCallback() {
         window.removeEventListener('message', this.bindedHandler, false);
+        if (this.loadMoreGamesObserver) {
+            this.loadMoreGamesObserver.disconnect();
+        }
     }
     componentDidLoad() {
         window.addEventListener('message', this.bindedHandler, false);
@@ -112,11 +181,21 @@ export class BonusElevateShopItem {
             await this.loadElevateGift();
         }
     }
+    componentDidUpdate() {
+        var _a, _b;
+        if (((_a = this.powerUpGames) === null || _a === void 0 ? void 0 : _a.items.length) < ((_b = this.powerUpGames) === null || _b === void 0 ? void 0 : _b.total)) {
+            this.initializeGamesObserver();
+        }
+    }
     render() {
-        return (h(Host, { key: '059f0eb449e36b30ce271306a9faf85b79197f36' }, h("general-styling-wrapper", { key: '4b857c7d532d288c660fc9b9cfc28c17ba80c400', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, mbSource: this.mbSource }), h("div", { key: 'b400e365431afc6af40c11010b708a72525d4af6', class: 'ElevateDetails' }, this.isGiftNotFound && (h(Fragment, { key: '93a532a9d25137fe02aca600c98237f08dbc5347' }, h("div", { key: 'b423b7b20c4e6829ecd5cf53ab860b909ac639d5', class: "Row ThumbnailRow" }, h("div", { key: 'eaafe445f831699a1f4a22bc951a68e211bc1eb1', class: "BackButton", onClick: () => {
+        var _a, _b, _c;
+        return (h(Host, { key: '02194284778bc18ed94c17ee0c4a682da0c9935e' }, h("general-styling-wrapper", { key: '3109c90669d039df0aa7caf8dac48ca7576b1db2', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, mbSource: this.mbSource }), h("div", { key: 'aa8fa9853ff3f0c50cf055f622640f187138531b', class: 'ElevateDetails' }, this.isGiftNotFound && (h(Fragment, { key: '1ff8d0e249663ea5f2ee0de06d406f962f973493' }, h("div", { key: '5575275bd24e74a530ffd2b8b17045f7b0daed7c', class: "Row ThumbnailRow" }, h("div", { key: '501b117a2c493750deb056ecf8f8614351c0fac2', class: "BackButton", onClick: () => {
                 this.onBackClicked();
-            } }, h("span", { key: '70105de7173a933b921bd4a78c62c4d6e5cf847e', class: "BackArrow", innerHTML: "<" }), h("span", { key: 'd695e223a899ae130355d5ee083a622b7cf131dd', class: "BackTxt" }, " ", translate('back', this.language), " "))), h("div", { key: 'f9624e689b03b06c0937f81821ff4e00c0911851', class: "Thumnails GiftNotFound" }, translate('noDataFound', this.language), "."))), this.elevateGift && h(Fragment, { key: '5c104bba7cd29706418cffa9ffdd20d13714bf2a' }, h("div", { key: 'c100262b2d4547e1a81108426fa07e6a66e8f560', class: "ThumbnailRow" }, h("div", { key: 'bf573c9685c7afe71239faced77bfaef4fab2a37', class: 'Row' }, h("div", { key: '10ff56e0df5eca9792428fc5279a79d79f619c56', class: "BackButton", onClick: () => { this.onBackClicked(); } }, h("span", { key: '899bbe9f1288b49743d51f4afec8b9237052b7f1', class: "BackArrow", innerHTML: "<" }), h("span", { key: 'f4dd1b849114f4fd9743b6726394aacf444a6e7b', class: "BackTxt" }, " ", translate('back', this.language), " ")), h("bonus-elevate-shop-assets-slider", { key: 'b11de8226e28e3038e70615093e07dd7ae896730', class: 'Thumbnails', itemsPerPage: 1, sliderItems: this.elevateGift.presentation.assets, showSliderDots: this.showSliderDots })), h("div", { key: '4084bea351593009e0a3a9dd3e3cb70b9d1a864c', class: 'Col Details' }, h("h3", { key: '2346e29ead91d6ace97f99fa768c46db704d1ab9', class: "GiftName" }, this.elevateGift.presentation.displayName || this.elevateGift.displayName), h("div", { key: '835a0b059b2c0399cdb442a8376b0ef8ddf1c9e2', class: "GiftPoints" }, h("span", { key: '73afb596b3b493736e67c3b62207b2dc7dbc27d9', class: "Points" }, this.elevateGift.points, " "), h("span", { key: '7a484d65195a5e6e32b079ca31410eefd239a240', class: " PointsLabel" }, translate('coins', this.language))))), h("div", { key: 'f318deaf612752dc61b49e57b5751755800291ea', class: 'ShopItemDetail Details' }, h("div", { key: '2a7b77649b74baad93816eabf8413d0b45930f83', class: "GiftPresentation" }, h("p", { key: '3ce1a1a6adb36127b3526e005a3ac49349349bfd' }, this.elevateGift.presentation.description ? this.elevateGift.presentation.description : translate('noGiftPresentation', this.language))), h("div", { key: 'e8f61acba748c582288e2053f61c7efc754bb8f9', class: `RedeemButton ${this.elevateGift.available === 'false' || this.isRedeeming ? 'Disabled deactive' : ' active '}
-                ${this.deviceType == 'dk' ? 'DkButton' : ''}`, onClick: this.redeemGiftConfirm.bind(this) }, translate('redeemGift', this.language)), h("span", { key: '8cfe770fbbe29d1aebab26826146590cc1ecd177', class: 'RedeemError Error' }, " ", this.redeemErrorMsg, " "))))));
+            } }, h("span", { key: '556a1ece3c4b8398277ad996ed58d0d84db0f7b4', class: "BackArrow", innerHTML: "<" }), h("span", { key: '43f9a46fe32710cc7d05e953475088f049999791', class: "BackTxt" }, " ", translate('back', this.language), " "))), h("div", { key: 'ba220234e040ed863b3bbc1960b54ced43fe4303', class: "Thumnails GiftNotFound" }, translate('noDataFound', this.language), "."))), this.elevateGift && h(Fragment, { key: 'e1f7f2dfd7d80da3fafdc5edd8d8686522509893' }, h("div", { key: '4a8f3ee47e7ef7bd87eafa5ebdd3346b523f13fd', class: "ThumbnailRow" }, h("div", { key: 'd8dcab9b4b3d4963cd4ef7904caca9e1df3a6e88', class: 'Row' }, h("div", { key: '6368dc35f95a2202cc38c5dc05bdf6f6d83fce55', class: "BackButton", onClick: () => { this.onBackClicked(); } }, h("span", { key: '64f67312085b9216b42cb61a9ee7ea780058856d', class: "BackArrow", innerHTML: "<" }), h("span", { key: '4e5d8bdec62fe9e32cb839e3904113449e4d4c0c', class: "BackTxt" }, " ", translate('back', this.language), " ")), h("bonus-elevate-shop-assets-slider", { key: '0b9e8164653ec6a7c8b9d1d260ed44ca641f0726', class: 'Thumbnails', itemsPerPage: 1, sliderItems: this.elevateGift.presentation.assets, showSliderDots: this.showSliderDots })), h("div", { key: 'd911392a0ce5afac58cdf26046d80cfdaf7c1793', class: 'Col Details' }, h("h3", { key: '273ff2eb682767a5429dc99642b1c166921cb1dc', class: "GiftName" }, this.elevateGift.presentation.displayName || this.elevateGift.displayName), h("div", { key: '459bcb83df4dc907bb7cc9757a86c88b39ca4905', class: "GiftPoints" }, h("span", { key: '3648c21ea2133c6a3050f2417449ab046e51c04b', class: "Points" }, this.elevateGift.points, " "), h("span", { key: '8b6665da119f9dd777644592cc2815fc77dffda1', class: " PointsLabel" }, translate('coins', this.language))))), h("div", { key: '6e9a28dd26368897ddfd76032ce1e3882a886a5b', class: 'ShopItemDetail Details' }, h("div", { key: 'd2844066fe51e4b3d43689406879e1306d494f0a', class: "GiftPresentation" }, h("p", { key: '12f8bce3abf0df34657392e95aa8ddfb42d4c088' }, this.elevateGift.presentation.description ? this.elevateGift.presentation.description : translate('noGiftPresentation', this.language))), h("div", { key: '2b0cc39b8e53336355f1f5d0576a59bfd9859abf', class: 'BottomDetail' }, h("div", { key: '0eabb8f4ecb8236d78665110c835a0cf2689e864', class: `RedeemButton ${this.elevateGift.available === 'false' || this.isRedeeming ? 'Disabled deactive' : ' active '}
+                  ${this.deviceType == 'dk' ? 'DkButton' : ''}`, onClick: this.redeemGiftConfirm.bind(this) }, translate('redeemGift', this.language)), h("span", { key: '9773077b08f77bc2940519070053aee362f34e2a', class: 'RedeemError Error' }, " ", this.redeemErrorMsg, " "))))), ((_a = this.elevateGift) === null || _a === void 0 ? void 0 : _a.type) === 'powerUp' && this.powerUpGames && h("div", { key: 'ec880bb1c11a7fb485f4d7e80dce6e250f2b4e19', class: 'GamesContent' }, h("div", { key: 'a6dc572f4f5b6732ed6d29fad4c76fbf0415ca68', class: 'GamesTitle' }, h("span", { key: '2904186a96290683dbbcd06cfca99f48c616f6f1', class: 'Title2' }, " ", translate('games', this.language)), h("span", { key: '9c7f5fa7f0441721bc32aab10b07c3f7f2de91c4', class: 'GamesAmount' }, " ( ", ((_b = this.powerUpGames) === null || _b === void 0 ? void 0 : _b.total) || 0, " ) ")), h("div", { key: '4f465d62df13e07bf2d946416ed70cdd52591cbb', class: 'GamesList' }, h("div", { key: 'd23fc7b21125dd6467ad56cbd7d2ce03a579d689', class: 'Games' }, (_c = this.powerUpGames) === null || _c === void 0 ? void 0 : _c.items.map((g, index) => {
+            const isLastItem = index === this.powerUpGames.items.length - 1;
+            return h("div", { class: 'Game', ref: isLastItem ? (el) => (this.lastGameElement = el) : null }, h("ui-image", { src: g.thumbnail }), h("div", { class: 'GameMask', onClick: this.onGameClick.bind(this, g) }, h("span", { class: 'PlayBtn' }, "Start Now!")));
+        })), this.isLoadingGames && h("p", { key: '89e860b88abc15beda61b9989e5a82a9f445aadd' }, "Loading more games...")))));
     }
     static get is() { return "bonus-elevate-shop-item"; }
     static get encapsulation() { return "shadow"; }
@@ -335,7 +414,9 @@ export class BonusElevateShopItem {
         return {
             "isGiftNotFound": {},
             "redeemErrorMsg": {},
-            "isRedeeming": {}
+            "isRedeeming": {},
+            "powerUpGames": {},
+            "isLoadingGames": {}
         };
     }
     static get events() {

package/dist/collection/utils/locale.utils.js

@@ -8,6 +8,7 @@ export const TRANSLATIONS = {
         error4003: 'Invalid Session',
         redeemFailed: 'Failed to redeem',
         back: 'Back',
+        games: 'Games'
     },
     tr: {
         coins: 'Coin',