@everymatrix/casino-challenges-overlay-modal 0.16.1 → 0.16.2

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c1a8ddc1.js');
+const index = require('./index-3aa45572.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-challenges-overlay-modal.cjs",[[1,"casino-challenges-overlay-modal",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isOpen":[516,"is-open"],"reward":[513],"addition":[516],"handleClick":[16],"errored":[516],"orderNumber":[514,"order-number"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-challenges-overlay-modal.cjs",[[1,"casino-challenges-overlay-modal",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isOpen":[516,"is-open"],"reward":[513],"addition":[516],"handleClick":[16],"errored":[516],"orderNumber":[514,"order-number"],"isFreeSpinsGranted":[516,"is-free-spins-granted"],"bonusProgramGames":[16],"currentIndex":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"bonusProgramGames":["handleBonusProgramGameChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/casino-challenges-overlay-modal/casino-challenges-overlay-modal.css

@@ -41,11 +41,11 @@ button:focus {
   flex-direction: column;
   align-items: center;
   position: relative;
-  background: linear-gradient(90deg, var(--emw--color-background, #003E5C) 0.05%, var(--emw--color-background-secondary, #113B21) 87.69%);
-  padding: 26px;
+  background: linear-gradient(90deg, var(--emw--color-background, #003e5c) 0.05%, var(--emw--color-background-secondary, #113b21) 87.69%);
+  padding: 60px;
   border-radius: 26px;
-  border: 2px solid var(--emw--color-primary-variant, #1E654F);
-  width: 450px;
+  border: 2px solid var(--emw--color-primary-variant, #1e654f);
+  width: 540px;
   max-width: 90%;
   text-align: center;
   max-height: 90dvh;
@@ -55,22 +55,24 @@ button:focus {
 
 .InnerContainer {
   border-radius: 20px;
-  background: #F9F8F8;
-  padding: 25px;
+  background: #f9f8f8;
+  padding: 40px 50px;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .ImageWrapper {
-  margin-bottom: 6px;
+  margin-bottom: 10px;
 }
 
 .ModalHeader {
   color: var(--emw--color-typography, #212529);
   text-align: center;
   font-family: var(--emw--button-typography, "PF BeauSans Pro", sans-serif);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weight-bold, 700);
   line-height: normal;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -79,54 +81,51 @@ button:focus {
 .ModalSubtitle {
   color: var(--emw--color-gray-300, #212529);
   text-align: center;
-  font-size: var(--emw--font-size-small, 14px);
-  font-style: normal;
-  font-weight: 400;
-  margin: 16px 0 10px;
-  line-height: 22px;
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weigh-normal, 400);
+  margin-top: 10px;
+  line-height: 24px;
+  width: 316px;
 }
 
 .ModalErrorMessage {
   color: var(--emw--color-typography, #212529);
   font-size: var(--emw--font-size-medium, 16px);
   line-height: 24px;
-  margin: 10px 0 10px;
+  margin: 10px 0;
 }
 
 .ModalReward {
-  background: linear-gradient(90deg, var(--emw--color-primary, #24AA4D) 0%, var(--emw--color-background-secondary, #113F21) 100%);
+  background: linear-gradient(90deg, var(--emw--color-primary, #24aa4d) 0%, var(--emw--color-background-secondary, #113f21) 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-family: var(--emw--button-typography, "PF BeauSans Pro", sans-serif);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 700;
-  margin-bottom: 10px;
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weight-bold, 700);
 }
 
 .ModalAddition {
   color: var(--emw--color-gray-100, #727672);
   text-align: center;
   font-family: var(--emw--button-typography, "Roboto", sans-serif);
-  font-size: var(--emw--font-size-x-small, 12px);
+  font-size: var(--emw--font-size-medium, 16px);
   font-style: normal;
   font-weight: 400;
-  height: 39px;
   align-content: center;
+  margin-top: 10px;
+  line-height: 24px;
 }
 
 .ModalAddition span {
-  background: linear-gradient(90deg, var(--emw--color-primary, #24AA4D) 0%, var(--emw--color-background-secondary, #113F21) 100%);
+  background: linear-gradient(90deg, var(--emw--color-primary, #24aa4d) 0%, var(--emw--color-background-secondary, #113f21) 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  font-size: 12px;
   font-style: normal;
   font-weight: 700;
   line-height: 15px;
   text-decoration: none;
-  margin-left: 8px;
   position: relative;
 }
 .ModalAddition span::after {
@@ -136,22 +135,178 @@ button:focus {
   bottom: 0;
   height: 1px;
   width: 100%;
-  background: linear-gradient(90deg, var(--emw--color-primary, #24AA4D) 0%, var(--emw--color-background-secondary, #113F21) 100%);
+  background: linear-gradient(90deg, var(--emw--color-primary, #24aa4d) 0%, var(--emw--color-background-secondary, #113f21) 100%);
 }
 
 .ModalAction {
   border-radius: var(--emw--button-border-radius, 99px);
-  border: 2px solid var(--emw--button-border-color, #083B17);
-  background: linear-gradient(90deg, var(--emw--color-primary, #24AA4D) 0%, var(--emw--color-background-secondary, #113F21) 100%);
+  border: 2px solid var(--emw--button-border-color, #083b17);
+  background: linear-gradient(90deg, var(--emw--color-primary, #24aa4d) 0%, var(--emw--color-background-secondary, #113f21) 100%);
   padding: 9px 20px;
-  margin-top: 10px;
+  margin-top: 24px;
   text-transform: uppercase;
-  color: var(--emw--button-text-color, #FFF);
+  color: var(--emw--button-text-color, #fff);
   text-align: center;
   font-family: var(--emw--button-typography, "PF BeauSans Pro", sans-serif);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  letter-spacing: 1px;
-  line-height: 1;
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  min-width: 100px;
+}
+
+.ModalSliderWrapper {
+  margin-top: 24px;
+  position: relative;
+  overflow: hidden;
+  width: 316px;
+  justify-self: center;
+}
+
+.ModalSlider {
+  display: flex;
+  transition: transform 0.3s ease;
+  cursor: pointer;
+  touch-action: pan-y;
+}
+
+.ModalSlider:active {
+  cursor: grabbing;
+}
+
+.ModalSlide {
+  min-width: 100%;
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.ModalSlide .ModalSlideSpins {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 99px;
+  width: 188px;
+  height: 48px;
+  text-transform: uppercase;
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  color: var(--emw--color-white, white);
+  align-content: center;
+  background: var(--emw--use-spins-button-bg, linear-gradient(180deg, #ea9018 0%, #e0a84e 100%));
+}
+.ModalSlide .ModalSlideSpins svg {
+  margin-left: 8px;
+}
+.ModalSlide .ModalSlideImageWrapper {
+  position: relative;
+  width: 244px;
+  height: 144px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+.ModalSlide .ModalSlideImageWrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.ModalSlide .ModalSlideImageWrapper::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--emw--color-black-shadow, rgba(0, 0, 0, 0.5019607843));
+}
+
+.prev,
+.next {
+  position: absolute;
+  top: 42%;
+  transform: translateY(-50%);
+  stroke: white;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid var(--emw--button-border-color, #083b17);
+  background: var(--emw--slider-arrow-primary-bg, linear-gradient(90deg, #24aa4d 0%, #113f21 100%));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.prev.disabled,
+.next.disabled {
+  stroke: var(--emw--color-gray-100, #727672);
+  background: var(--emw--ingame-color-black40, rgba(0, 0, 0, 0.4));
+  border-color: var(--emw--color-gray-100, #727672);
+}
+
+.prev {
+  left: 2px;
+}
+
+.next {
+  right: 2px;
+}
+
+.ModalSliderDots {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.ModalSliderDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--emw--color-gray-50, #e2e2e2);
+  margin: 8px;
+  cursor: pointer;
+}
+
+.ModalSliderDot.active {
+  background: var(--emw--border-success-color, #00b74f);
+}
+
+.Mobile .ModalContent {
+  padding: 26px;
+}
+.Mobile .InnerContainer {
+  padding: 25px;
+}
+.Mobile .ImageWrapper {
+  margin-bottom: 6px;
+}
+.Mobile .ModalHeader {
+  margin-bottom: 16px;
+}
+.Mobile .ModalAddition {
+  margin-top: 8px;
+}
+.Mobile .ModalAction,
+.Mobile .ModalSliderWrapper {
+  margin-top: 20px;
+}
+.Mobile .ModalSliderWrapper {
+  width: 230px;
+  justify-self: center;
+}
+.Mobile .ModalSliderWrapper .prev,
+.Mobile .ModalSliderWrapper .next {
+  display: none;
+}
+.Mobile .ModalSliderWrapper .ModalSlideImageWrapper {
+  width: 220px;
+  height: 125px;
+}
+.Mobile .ModalSliderWrapper .ModalSlideSpins {
+  width: 154px;
+  height: 34px;
+  font-size: var(--emw--font-size-x-small, 12px);
+}
+.Mobile .ModalSliderWrapper .ModalSliderDot {
+  margin: 8px 4px;
+}
+.Mobile .ModalSubtitle {
+  width: 220px;
 }

package/dist/collection/components/casino-challenges-overlay-modal/casino-challenges-overlay-modal.js

@@ -2,8 +2,76 @@ import { h } from "@stencil/core";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import giftBox from "../../assets/giftbox.svg";
 import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+import { isMobile } from "../../utils/utils";
 export class CasinoChallengesOverlayModal {
     constructor() {
+        this.startX = 0;
+        this.currentTranslate = 0;
+        this.prevTranslate = 0;
+        this.isDragging = false;
+        this.moved = false;
+        this.threshold = 50;
+        this.onPointerDown = (e) => {
+            var _a;
+            this.isDragging = true;
+            this.moved = false;
+            this.startX = e.clientX;
+            (_a = this.sliderContainer) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
+        };
+        this.onPointerMove = (e) => {
+            if (!this.isDragging)
+                return;
+            const diff = e.clientX - this.startX;
+            if (Math.abs(diff) > 5) {
+                this.moved = true;
+            }
+            this.currentTranslate = this.prevTranslate + diff;
+            this.setSliderPosition(this.currentTranslate);
+        };
+        this.onPointerUp = (e) => {
+            var _a;
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            (_a = this.sliderContainer) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
+            const movedBy = this.currentTranslate - this.prevTranslate;
+            if (movedBy < -this.threshold)
+                this.next();
+            else if (movedBy > this.threshold)
+                this.prev();
+            else
+                this.setPositionByIndex();
+        };
+        this.next = () => {
+            if (!this.bonusProgramGames.length)
+                return;
+            if (this.currentIndex === this.bonusProgramGames.length - 1) {
+                this.setPositionByIndex();
+                return;
+            }
+            this.currentIndex = (this.currentIndex + 1) % this.bonusProgramGames.length;
+            this.setPositionByIndex();
+        };
+        this.prev = () => {
+            if (!this.bonusProgramGames.length)
+                return;
+            if (this.currentIndex === 0) {
+                this.setPositionByIndex();
+                return;
+            }
+            this.currentIndex = (this.currentIndex - 1 + this.bonusProgramGames.length) % this.bonusProgramGames.length;
+            this.setPositionByIndex();
+        };
+        this.onSlideClick = (gameSlug) => {
+            if (this.moved)
+                return;
+            if (gameSlug) {
+                window.postMessage({
+                    type: 'ChallengeInGameRedirect',
+                    data: { Slug: gameSlug }
+                }, window.location.href);
+            }
+        };
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
@@ -15,6 +83,9 @@ export class CasinoChallengesOverlayModal {
         this.handleClick = () => { };
         this.errored = false;
         this.orderNumber = 0;
+        this.isFreeSpinsGranted = false;
+        this.bonusProgramGames = [];
+        this.currentIndex = 0;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -31,6 +102,12 @@ export class CasinoChallengesOverlayModal {
             setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
+    handleBonusProgramGameChange(newValue) {
+        if (this.currentIndex >= newValue.length) {
+            this.currentIndex = 0;
+            this.setPositionByIndex();
+        }
+    }
     componentWillLoad() {
         if (this.translationUrl) {
             resolveTranslationUrl(this.translationUrl);
@@ -45,12 +122,44 @@ export class CasinoChallengesOverlayModal {
             if (this.clientStylingUrl)
                 setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
+        this.setPositionByIndex();
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    setSliderPosition(value) {
+        if (this.bonusProgramGames.length < 2)
+            return;
+        if (this.sliderContainer) {
+            this.sliderContainer.style.transform = `translateX(${value}px)`;
+        }
+    }
+    setPositionByIndex() {
+        var _a;
+        const width = ((_a = this.sliderContainer) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        this.currentTranslate = -this.currentIndex * width;
+        this.prevTranslate = this.currentTranslate;
+        this.setSliderPosition(this.currentTranslate);
+    }
     render() {
-        return (h("div", { key: '6c704266619b5ad109ec6289d65fd6a26f827951', ref: (el) => (this.stylingContainer = el), class: `ModalOverlay ${this.isOpen && 'Open'}` }, h("div", { key: '65b800fd71f65afa246804ff35116bc0f2a6ff6b', class: "ModalWinAnimation" }), h("div", { key: '51df6e0c7d487762f0da0c874805c1e34a520fc2', class: "ModalContent GradientBorder" }, h("div", { key: 'ac9b44635eb8cb1fda4d1a4549c42c5e7055fc18', class: "InnerContainer" }, !this.errored && (h("div", { key: '7b5e93f30b1cb40af1d8f621f13d1e18bb1a06b6', class: "ImageWrapper" }, h("img", { key: '4e7867d129678e327ffc12d1da93b31bef4bc3b8', src: giftBox, alt: "gift-box-icon" }))), h("h1", { key: '05782d9c5b5f905bd726dfbd8a32b51b7993e6c8', class: "ModalHeader" }, translate(this.errored ? 'errorTitle' : 'congrats', this.language)), this.errored ? (h("div", { class: "ModalErrorMessage" }, translate('errorSubTitle', this.language))) : (h("div", { class: "ModalSubtitle" }, `${translate('level', this.language)} ${this.orderNumber} ${translate('completed', this.language)}`, h("div", null, translate('youWon', this.language)), h("div", { class: "ModalReward" }, this.reward))), this.addition && (h("div", { key: '62617e0e83f280c03a51f347d5b4fa487ce327c8', class: "ModalAddition" }, h("div", { key: 'c2aa358edd22cc8fd710fd0e68ae83641652d329' }, translate('physicalReward', this.language)), h("span", { key: '1d116c9906d98b828628a4404988fc33103e9fb2' }, translate('linkText', this.language)))), h("button", { key: '432cad82cd0590ae5c2939a33ba7f52dd4ad31e4', class: "ModalAction", onClick: this.handleClick }, this.errored ? translate('errorBtnText', this.language) : translate('continue', this.language))))));
+        var _a;
+        return (h("div", { key: 'a069be23593a04f768fcca1b86094d3af8e58ca3', ref: (el) => (this.stylingContainer = el), class: {
+                ModalOverlay: true,
+                Mobile: isMobile() || window.innerWidth <= 768,
+                Open: this.isOpen
+            } }, h("div", { key: 'f41925c7697a9cd1c3da2f61c4e3a0673bd5728b', class: "ModalWinAnimation" }), h("div", { key: '9fac97b95cc682790d5e925fc40782ae71b9f54c', class: "ModalContent GradientBorder" }, h("div", { key: '14683c5830b0317dd11d064a6a88a69f4805d250', class: "InnerContainer" }, !this.errored && (h("div", { key: '2b7091ea3619423d41d98440d7800d95ec92a1bc', class: "ImageWrapper" }, h("img", { key: 'd23cfe79a0e7a2e138c0bb1e9894cc7534e5c173', src: giftBox, alt: "gift-box-icon" }))), h("h1", { key: 'f95fbb76d703c28c45c568a0163df747dd269556', class: "ModalHeader" }, translate(this.errored ? 'errorTitle' : 'congrats', this.language)), this.errored ? (h("div", { class: "ModalErrorMessage" }, translate('errorSubTitle', this.language))) : (h("div", { class: "ModalSubtitle" }, `${translate('level', this.language)} ${this.orderNumber} ${translate('completed', this.language)}`, h("div", null, translate('youWon', this.language)), h("div", { class: "ModalReward" }, this.reward), this.isFreeSpinsGranted && (h("div", { class: "ModalAddition" }, translate('playNowOrLater', this.language))), h("div", { class: "ModalAddition" }, translate('rewardInLobby', this.language)))), this.addition && (h("div", { key: '201e5f0d4b3e04797c0478429dcd3c22dd30a4d3', class: "ModalAddition" }, h("div", { key: 'ef793ed69b572f4a9654f55cae0a71dd66af0ad6' }, translate('physicalReward', this.language)), h("span", { key: '131e4d36dc54d3682469a61c7196f0e379efe42f' }, translate('linkText', this.language)))), h("button", { key: 'bca6bc399277288d0ca2d9bd453eef6f6c9793e2', class: "ModalAction", onClick: this.handleClick }, this.errored ? translate('errorBtnText', this.language) : translate('continue', this.language)), this.isFreeSpinsGranted && ((_a = this.bonusProgramGames) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '13b921d1ff411987b9045950b1676e22b52481ab', class: "ModalSliderWrapper" }, h("div", { key: 'b48c9553aec2d709cede91d67b678aa545ed03a2', class: "ModalSlider", ref: (el) => (this.sliderContainer = el), onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp }, this.bonusProgramGames.map((item) => (h("div", { class: "ModalSlide", key: item.GameSlug, onClick: () => this.onSlideClick(item.GameSlug) }, h("div", { class: "ModalSlideImageWrapper" }, h("img", { src: item.Thumbnail, alt: "" })), h("div", { class: "ModalSlideSpins" }, translate('useSpinsNow', this.language), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "6", height: "10", viewBox: "0 0 6 10", fill: "none" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.195262 0.195262C0.455612 -0.0650874 0.877722 -0.0650874 1.13807 0.195262L5.13807 4.19526C5.39842 4.45561 5.39842 4.87772 5.13807 5.13807L1.13807 9.13807C0.877722 9.39842 0.455612 9.39842 0.195262 9.13807C-0.0650874 8.87772 -0.0650874 8.45561 0.195262 8.19526L3.72386 4.66667L0.195262 1.13807C-0.0650874 0.877722 -0.0650874 0.455612 0.195262 0.195262Z", fill: "white" }))))))), this.bonusProgramGames.length > 1 && (h("div", { key: '5878e9df2ba211fbe330d959c89278d611b0d501' }, h("button", { key: '25008b1e3500bdde9b1cf9285640ca342e8490a7', class: {
+                prev: true,
+                disabled: this.currentIndex === 0
+            }, onClick: this.prev }, h("svg", { key: '2433588c5615f8b788022f8859a98f9d16504e84', xmlns: "http://www.w3.org/2000/svg", width: "6", height: "10", viewBox: "0 0 6 10", fill: "none" }, h("path", { key: '14d34bf5a6538e458b7c18bb481f6a5b7c2f55bf', d: "M5 1L1 5L5 9", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '63be7d730151f3741802f415ec3c9e66508b78e7', class: {
+                next: true,
+                disabled: this.currentIndex === this.bonusProgramGames.length - 1
+            }, onClick: this.next }, h("svg", { key: '52f1005fe412de34c71060974688874e5bf45a47', xmlns: "http://www.w3.org/2000/svg", width: "6", height: "10", viewBox: "0 0 6 10", fill: "none" }, h("path", { key: '1af4edf8dc717f54d5735d34ec27de8313918e0d', d: "M1 1L5 5L1 9", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '13201c67ba3cb6a1215fb41f5a6fe3ae60864bdd', class: "ModalSliderDots" }, this.bonusProgramGames.map((_, i) => (h("span", { class: {
+                ModalSliderDot: true,
+                active: i === this.currentIndex
+            }, onClick: () => {
+                this.currentIndex = i;
+                this.setPositionByIndex();
+            } }))))))))))));
     }
     static get is() { return "casino-challenges-overlay-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -263,9 +372,54 @@ export class CasinoChallengesOverlayModal {
                 "attribute": "order-number",
                 "reflect": true,
                 "defaultValue": "0"
+            },
+            "isFreeSpinsGranted": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-free-spins-granted",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "bonusProgramGames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IBonusProgramGame[]",
+                    "resolved": "IBonusProgramGame[]",
+                    "references": {
+                        "IBonusProgramGame": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenges-overlay-modal/src/utils/types.ts::IBonusProgramGame"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
             }
         };
     }
+    static get states() {
+        return {
+            "currentIndex": {}
+        };
+    }
     static get watchers() {
         return [{
                 "propName": "clientStyling",
@@ -276,6 +430,9 @@ export class CasinoChallengesOverlayModal {
             }, {
                 "propName": "mbSource",
                 "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "bonusProgramGames",
+                "methodName": "handleBonusProgramGameChange"
             }];
     }
 }

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

@@ -10,7 +10,11 @@ const TRANSLATIONS = {
         completed: 'has been completed!',
         youWon: 'You have won',
         physicalReward: 'for physical rewards please contact ',
-        linkText: 'Customer Support'
+        linkText: 'Customer Support',
+        playNowOrLater: 'Play your free spins now or come back later.',
+        rewardInLobby: 'You can find your reward in the relevant section of the Lobby Widget.',
+        assistance: 'If you need any assistance, please contact',
+        useSpinsNow: 'Use spins now'
     },
     da: {
         congrats: 'Tillykke!',
@@ -22,7 +26,11 @@ const TRANSLATIONS = {
         completed: 'er blevet gennemført!',
         youWon: 'Du har vundet',
         physicalReward: 'Ved fysiske præmier, venligst kontakt ',
-        linkText: 'Kundeservice'
+        linkText: 'Kundeservice',
+        playNowOrLater: 'Brug dine freespins nu eller gem dem til senere.',
+        rewardInLobby: 'Du kan finde din belønning under ”Mine tilbud”',
+        assistance: 'Har du brug for hjælp? Kontakt venligst',
+        useSpinsNow: 'Brug dine spins nu'
     }
 };
 export const translate = (key, customLang) => {

package/dist/collection/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/utils.js

@@ -1,3 +1,7 @@
-export function format(first, middle, last) {
-    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
+export const isMobile = () => {
+    let userAgent = window.navigator.userAgent;
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};